<meta name="theme-color" content="teal">
<meta name="description" content="English Grows is a site that offers English teaching services online to B2B and B2C customers, offering     
   individual lesson packs and reduced group formats">
<meta name="keywords" content="English learning, teaching English, English classes online, English lessons online, English tutor, online teacher, English teacher, private lessons online, reduced group classes, online reduced groups, e-learning, corporate English lessons, online reduced classes, live English lessons">
<meta name="author" content="Edna Torres Munill">

This file lists the website’s essential pages, making sure Google can find and crawl them all. It also helps search engines understand the website structure, and can help speed up content discovery. Having included this file, improves the site quality, allowing for a better SEO indexing.

To create the file, follow these steps:

1. Go to Xml-sitemaps.com, and include the site's url to generate the xml file, and click on START:

   

2. The file will automatically be generated after the tool crawls all the site's urls (could take a moment, depending on site's complexity). Once completed, click on 'view sitemap details':

   

3. Download the file, and include it in the site's main root directory

This files disallows crawler spiders to crawl to certain urls in the site, which should not be shown to users on a search engine. All urls of the following directories have been disallowed for security and for a meaningfulness search:

• Account
• Bag
• Profile

To promote this site's visibility and to improve customer reach, a mockup profile has been created in the social media platform of facebook:

A form has been included to enable users to subscribe in order to receive special offers and tips. Only a name a an email is requested, and the data is stored and easily accessed through the admin panel. A model allows authorized users to perform CRUD functionlity on the admin panel to create email templates for a newsletter, in this case.

A model allows authorized users to perform CRUD functionlity on the admin panel to create email templates for emailing campaigns, in this case. A fucntion hsa been added, so that when a specific email is checked (selected), and the option send email campaign is selected on the dropdown in the email templates model, when the user clicks on go, the email template selected gets automatically sent to all the users who subscribed to the newsletter.

This way, this function has a double purpose: To send the newsletter, and to send other marketing campaigns.

These future features are thought of as being some of the user's imagined wishes:

• WISH: As an admin user, I want to include additional fields in the user profile, in order to be able to track students' progress.
• WISH: As an admin user, I want to receive an email each time a B2B user sends a request via the contact form, in order to be able to easily keep track of incomming requests.
• WISH: As an B2B user, I want to receive a copy of the request made via the contact form, in order to be able to have a reminder of my request.

All issues have been solved, and closed in Github by the creator of this site.

No defects of note have been detected on this site.

No outstanding defects have been detected in this site.

• For a meaningful testing of the site, Stat Counter has been used, in order to get an insight of the following:

  • BROWSER MARKET SHARE - Most commonly used browsers worldwide:

  

  • BROWSER VERSION MARKET SHARE - Most commonly used browser versions worldwide:

  

  • OS MARKET SHARE - Most commonly used operation systems worldwide:

  

  • MOBILE vs DESKTOP vs TABLET MARKET SHARE - Most commonly used devices worldwide:

  

  • SCREEN RESOLUTION STATS - Most common screen resolution (in pixels) worldwide:

  

Following all the above information, compatibility and responsive testing has been done on the most common browser versions, OS, and screen resolution combinations, by using Browser Stack Chrome extension, the Chrome Dev tool's emulator, and real devices. On the mobile real device, XRecorder app has been used.
NB: As BrowserStack now charges for testing a device over 1 minute limit time for their free version, the following testings for this project have been adapted to this inconvenience. In case of it being a real business, I would pay the subscription to get a full-time testing account.

Please find the correspondent compatibility and responsive testing reflected in the following table:

The following tests have been run for this project:

To improve my first report, the following actions have been taken:

• Include a site.manifest

No errors nor warnings have been found when passing HTML validator:

• BAG App

  • bag.html

    

• CHECKOUT App

  • checkout.html

  • checkout_success

  • order_confirmation_email.html

• HOME App

  • about.html

  • companies.html

  • index.html

  • subscribe_form-html

• INDIVIDUAL SERVICES App

  • add_service.html

  • delete_confirmation.html

  • edit_service.html

  • individual_services.html

  • pack_details.html
    

• PROFILES App

  • profiles.html

No errors were found when passing the W3C validator:

This file contains the main CSS of the site. It is in the directory: /static/css/base.css. Check the file here

This file contains some CSS specific for the profiles app. It is in the directory: /profiles/static/profiles/css/profiles.css. Check the file here:

The validation of the code has been successful. The validator used has been JShint. In order to remove inaccurate warnings related solely to the fact that it by itself does not support JS ES6, I found the helpful and easy way to make the tool read and analyse the ES6 code effectively, by simply adding this comment to the top of the code:
// jshint esversion: 6

• checkout/static/checkout/js/stripe_elementss.js - Initial errors fixed:

  • JShint was not recognizing $ JQuery, so I click on 'CONFIGURE' at the top, and activate JQuery.
  • JSHint was flagging Stripe as an undefined variable because it didn't know that Stripe is defined in the Stripe.js library, which is loaded externally. To fix this in JSHint, I declared Stripe as a global variable by adding a JSHint directive at the top of the file. This way, JSHint understands that Stripe is expected to be available globally: /* global Stripe */

  

• static/js/quantity_selector.js - No errors found:

  

Validation has been done using CI Python Linter by Code Institute, and the results have been the following:

• contexts.py - No errors found:

  

• views.py -

  

• admin.py

  

• forms.py

  

• models.py - The only line that is too long, is due to the unability to separate the operation in two lines

  

• views.py

  

• settings.py

  

• admin.py

  

• forms.py

  

• models.py

  

• utils.py

  

• views.py

  

• admin.py

  

• forms.py

  

• models.py

  

• views.py

  

• admin.py

  

• forms.py

  

• models.py

  

• views.py

  

This site has been tested to be ADA compliant, and has achieved WCAG 2.1 validation. Find below the contrast audits from Juicy Studio website and the general accessibility reports generated by EqualWeb Accessibility Checker Chrome extension, which have all achieved positive results.

Font and backgroud colors have passed at AAA and AA levels, as can be seen in the following reports that have been generated by Juicy Studio:

This website is compliant with all international standards, as proved after EqualWeb Accessibility Checker scan of the site, which gave no errors:

Manual testing of the site has been performed following the user's stories:

• 1. Check the social media links to see the site's social media profile: Check Facebook profile

  

• 2. Check the about page

  English.Grows.-.can.se.about.mp4

• 3. See at first glance the part of the site that is specially dedicated to me (B2B or B2C)

  

• 4. Users can subscribe to the newsletter - Users can register to the newsletter via the form, and get success message:

  https://github.com/user-attachments/assets/1dcfb229-a354-4ae6-b03a-7bc1b8fc3918 - Admin user can perform CRUD functionality on subscribers via the admin panel:

  english-grows-NEWSLETTER.susbscriber.created.success.mp4

• 5. B2B can contact the site to receive a customized training plan.

  English.Grows.-.B2B.customers.can.sent.contact.requests.mp4

• 6. All available services are listed

  English.Grows.-.All.available.services.are.listed.mp4

• 7. View specific type of service

  English.Grows.-.Sort.a.specific.type.of.service.mp4

• 8. View individual service details

  English.Grows.-.view.service.details.mp4

• 9. view the total of my pending purchase at any time

  English.Grows.-.view.total.amount.of.pending.purchase.at.any.time.mp4

• 10. sort the full list of available services by categories (types) or by price

  • By Types:

    English.Grows.-.sort.services.by.type.mp4

  • By price:

    English.Grows.-.sort.all.services.by.price.mp4

• 11. sort specific category of services by price, or alphabetically

  English.Grows.-.within.a.specific.type.of.service.sort.by.price.or.name.mp4

• 12. Register for an account, and receive an email confirmation after registering.

  • Once a new user is registered, its data is automatically stored in the database.

    English.Grows.-.New.user.data.is.reflected.in.admin.-.stored.in.db.mp4

  • User receives verification email

    

  • Verification url in email works as expected, and once user clicks on 'verify', he is redirected to home page, already logged in:

    verification.link.to.verify.account.from.email.received.works.as.expected.mp4

• 13. Easily login and logout.

  English.Grows.-.easy.login.logout.mp4

• 14. Easily recover user password:

  • After user clicks on 'forgotten password", user inputs the account email and confirmation message is displayed
  • User receives an email with link to restore password
  • Link to restore password works as expected
  English.Grows.-.Reset.Password.Complete.Workflow.mp4

• 15. Have a personalized user profile:

  

• 16. Update and save my personal account information on my user profile:

  English.Grows._.Update.personal.info.in.profile.mp4

• 17. Access my bag, and update or delete any items in it:

  English.Grows.-.View.Update.and.Delete.items.in.Bag.mp4

• 18. Users' personal data is secured: No one else can access a user's profile, nor order urls, which also contain personal data:

  English.Grows._.My.Profile.-.personal.data.in.order.secured.mp4

• 19. ONLINE PAYMENT - STRIPE API - Users can make secure online payments * User can easily access the checkout page and proceed to checkout (video below) * Stripe API works as expected and payment intent is successfully reflected on Stripe API, without any errors (video below)
  * User views an order confirmation message and order details on the screen

• 20. Receive a confirmation email after a purchase, with details of the order:

  English.Grows.-.Order.confirmation.email.with.order.details.and.stored.in.user_profile.mp4

• 21. View past orders, and read their full information on the user's personal profile:

  English.Grows._.My.Profile.-.view.past.orders.details.in.user.profile.mp4

• 22. See success or error messages for every action undertaken*:

• 23. Sort orders by users (by profiles):

  english-grows-.Sotr.orders.by.users.mp4

• 24. Order is automatically linked to the authenticated user who made it:

  

• 25. User's email is stored in a separate email list, to easen up future emailing campaigns.

  

• 26. Store data in admin from B2B contact requests:

  

• 27. Edit and delete existing services directly from the site, without having to access the lesser user-friendly admin panel.

  English.Grows.-.Edit.and.delete.service.-.Google.Chrome.mp4

• 28. Add service directly directly from the site

  English.Grows.-.Superuser.can.add.service.from.site.mp4

• 29. Only authenticated users can make an order, so that personal data from all users is protected.

  English.Grows.-.only.authenticate.dusers.can.order.-.data.security.mp4

All the functionalities described below related to marketing have been tested, and work as expected, summing up to the facebook profile page created, to improve social media presence of the brand, as part of the marketing campaign (num. Please refer to the video below num. 32 which includes the three features testing:

• 30. create editable email templates for the newsletter or emailing campaigns (Marketing campaigns).

• 31. send marketing campaigns to subscribed users.

• 32. send a newsletter to users that are subscribed.

  english-grows-update.and.send.EMAILING.CAMPAIGN.mp4

  

  

  **PROOF of EMAILING CAMPAIGN FUNCTIONING: One subscription was made using [email protected] email (does not exist), and when sending campaign to all subscribers, I receive an error email informing that email could not be delivered to inexistent email [email protected]:

  

• The Admin user can easily create a service directly through the admin, with no need to upload fixtures, as initially.

• Only authorized users can add/update/delete service.

  English.Grows.-.Unauthorized.users.can.t.add_update_delete.services.mp4

• Services created can be Read, or viewed:

  English.Grows.-.Google.Chrome.2024-11-09.18-54-07.mp4

Admin users can Update a service directly through the site, without need to access the admin panel, for a better UX. This can be done on the general services page, or on the service details page, both with a success message to inform user of the action completed:

Admin users can Delete a service, with confirmation step, and success message:

All the functionalities described below reñlated to marketing have been tested, and work as expected, summing up to num. 1 story, which allows users to chceck social media profile at FB, as part of the marketing techniques. Please refer to the video below num. 29 which includes the three features testing:

• 27. create editable email templates for the newsletter or emailing campaigns (Marketing campaigns).
• 28. send marketing campaigns to subscribed users.
• 29. send a newsletter to users that are subscribed.

• Python 3.12
• JS ES6
• CSS3
• HTML5

The following have been used for the development of this site:

• Django 5.1 - Whithin django framework, many libraries and modules have been used. For mode details on these, please refer to requirements.py on the root directory. - Check Django 5.1 Documentation
• Chrome Dev Tools - To inspect the elements, and be able to spot what element was having an unexpected behaviour, and correct it more efficiently. Also have used Lighthouse tool's reports to check and improve core web vitals.
• Github - To deploy the code in order to be accessed by Heroku.
• Heroku - To deploy this python site.
• PostgreSQL - A database has been created through Code Institute handy link, to store all the site's data, such as user personal data, order details, available services, users' contact requests, and more.
• AWS - Amazon Web Services have been used to create an s3 bucket to store all media and static files of this site.
• Bootstrap 5 - Check documentation here
• Django Summernote - To enable the site owner to easily create an email template to launch an email marketing campaign to subscribers, or a newsletter. Documentation can be found here
• Favicon - To create the necessary files for the logo to be on the upper part of the browser tab next to the site tir.
• Font Awesome - For the icons used
• Google Fonts - To select fonts and implement them in the site
• Github - To deploy the site online, and Github desktop app to link Visual Studio Code to Github.com
• Coolors - To insert colors selected previously directly through visual studio code, but used this tool to display the palette beautifully, and insert it in this readme file.
• Amiresponsive - To display the site in all types of devices simultaneously.
• EqualWeb Accessibility Checker - Google Chrome extension to check general errors and contract errors for optimal accessibility.
• Juicy Studio tool to generate accessibility reports related to contrast, following the WCAG 2.0's luminosity contrast algorithm.
• Blisk to check the viewport of multiple devices, very useful for selecting testing targets.
• Viewport Sizer - Used to check the viewport of multiple devices, very useful for selecting testing targets.
• BrowserStack to test responsiveness by emulating different devices, operating systems and browser vendors.
• XRecorder for Android, to record the compatibility and responsiveness testing performed on real Android device.
• Google Gmail: Used as email provider to send emails to users and customers, also via smtp.
• Word Tracker - To track the best keywords to include for SEO improved ranking.
• XML sitemaps - To generate the sitemap.xml file for this site

The site was created using Gitpod editor and pushed to Github to the remote repository ‘english-grows.
The following git commands were given to the terminal throughout development to push updated code to the remote repo on Github:

1. git add . - Command to add the updated file(s) to the staging area before they are committed to the main branch, represented by a '.'.
2. git commit -m “commit text” - Command to commit changes to the local repository queue ready for the final push.
3. git push - Command to push all updated code to the remote repository on Github.
4. python3 manage.py runserver - Command to run python app on local server.

• Make sure all the modules and requirements have been correctly installed by:
  • Install the necessary modules with command: pip3 install module
  • Make sure you install versions that are compatible, to avoid system issues. Check the requirements file in this repository for surther reference, and type the command on the terminal: pip3 install -r requirements.txt

WARNING - DATA PROTECTION To avoid pushing sensible credentials stores in variables (e.g.: DATABASE_URL, SECRET_KEY) to Github:

1. Create an env.py file on the main directory of the app.
2. Ensure that env.py is included in the .gitignore file.
3. To include secret variables on the env.py file:
   • (i) On the top of the file, include the imports: -import os from pathlib import Path
   • (ii) Include eac hsecret var following this example:
   • os.environ.setdefault('DATABASE_URL', 'your-data-base-url')
   • (iii) Import Operational System to your settings.py, so it can access the system variables secretly stored in your env.py file:
   • import os
   • (iv) To access the system variables in your settings.py file, use the following method to store them in other safe variables:
   • DATABASE_URL = os.environ.get("DATABASE_URL")
4. BEFORE COMMITTING TO GITHUB:
   • On the terminal, type git add ., then git status and make sure the env.py file is not in the list. Once you are reassured that it is not in the list of files to be committed, safely commit.

1. Create and add the 'Procfile' to the root directory of the app, and include web: gunicorn candlelight.wsgi --log-file - Heroku relies on this file to determine how to run your application, ensuring the correct setup of your web server. Use commands like web: gunicorn PROJECT_NAME.wsgi in the 'Procfile' to instruct Heroku on starting your web server with Gunicorn.
2. If you haven't done so yet, create a requirements.txt file to store necessary modules and libraries:
   • pip3 install -r requirements.txt
3. Ensure you have updated the requirements.txt file listing all project dependencies. The comnmand to update the file is pip3 freeze > requirements.txt
4. Set up necessary configuration variables in Heroku setting tab > Config Vars (eg. SECRET_KEY, DATABASE_URL, etc.).
5. Add Heroku to your ALLOWED_HOSTS in your app's 'settings.py' file: candlelight-worlds.herokuapp.com.

1. Sign up to an account on Heroku
2. Create new app. Remember that app name must be unique on the whole of Heroku site.
3. Store all the secret environment variables (secret keys) on settings > Config Vars.

1. Ensure that in your settings.py, DEBUG = False before doing the last commit to Github before deploying to Heroku.
2. On Heroku, click the deploy tab on the top navigation bar.
3. Scroll down and select Github as 'Deployment method'
4. Use the github link and type in the name of your repository
5. Scroll down, to 'Manual Deploy' configuration and select main on the dropdown for the branch the deploy
6. Then click on deploy from branch
7. Once the app is loaded, click on the 'View' button that appears only then.
8. Once your application is running, you can switch to Automatic Deploys so that any changes in the repositori are automatically reflected in Heroku deployed app.

• All the images are free copyright, and have been taken from [Pexels.com]
• The logo had previously been created by the creator of this site with the free version of Canva for her personal freelance website as a certified teacher of English as a second language.

• Some nice tutors and mentor Rory Patrick Sheridan at Code Institute for their patience and useful insights.
• I have searched thorough Bootstrap 4 documentation.
• I have searched thorough Django 5.1 documentation.
• I have searched Stackoverflow, Youtube, W3School, Geeksforgeeks among other sites when encountering issues or knowledge blockers.
• I have found inspiration and revieved material from Code Institute Full Stack Web development course.
• I have searched throughout Google Developers documentation
• I have read how to make links crawlable on Google Developers documentation to improve SEO.
• I have read on how to make select element accessible article from Deke University to improve accessibility.
• I have read about ARIA searchbox role in Developer Mozilla to make search bar accessible to screen readers, and improve accessibility.
• I have read on how to include discernible text in links article from Deke University to improve accessibility.
• I have read this article about robots.txt on Chrome for Developers, to fix invalid text and improve SEO.
• I have read on aria-labels for buttons article from Deke University to improve accessibility.