ENGLISH GROWS

Overview

This site is an e-commerce that sells services. The services provided are the following:

• Live online lessons for B2B and B2C customers:
  • Individual Lesson Packs
  • Reduced Groups

Live Site

• You can view the deployed site on Heroku here

Repository

• You can check the Github repository here

Author

EDNA TORRES MUNILL

TABLE OF CONTENTS

• PROJECT OVERVIEW
  • Live Site
  • Repository
  • Author
• UX
  • Target Audience
  • Project Goals
  • User Stories
  • User Profiles
  • AGILE DEVELOPMENT
  • DESIGN CHOICES
  • FEATURES
  • Navbar
  • User Authentication
  • Contact Form
  • Service Sorting
  • Search Bar
  • Shopping Bag
  • Online Payments - Stripe API
  • 404 Error Page
  • SEO
  • Admin Console
  • TESTING
  • Defect Tracking
    • Github Issues
    • Defects of Note
    • Outstanding Defects
  • Core Web Vitals
    • Lighthouse Reports
  • Accessibility
    • Contrast Validation Reports
    • General WCAG 2.1 Report
  • Manual Testing
• TECHNOLOGIES USED
  • Languages
  • Frameworks, Libraries and Programs Used -CREDITS & ACKNOWEDGEMENTS

UX

You will find in the points stated below a brief study aiming at providing the user with the best possible experience when visiting this site.

Target Audience

B2B

Any company interested in improving their employees' level of English for one of the following reasons:

• Wants to compete in the international market
• Locally works with international customers

B2C

Any individual person wanting to improve their level of English tfor one of the following reasons:

• Travel
• Careers
• University Students (e.g: Students must certify a B2 level of English to apply to the Erasmus program)

Project Goal

1. The site aims at providing B2B and B2C users with services they can buy: live online lessons in individual or reduced groups format.
2. All users can register for an account.
3. B2B users can send a contact form to receive customized offers on the type of service desired.
4. B2C services available can be stored in a shopping bag and bought online through Stripe API.
5. All users can subscribe to the monthly newsletter.
6. Members of the monthly newsletter are informed of interesting cultural events, and social and historic facts related to the British culture, and English speaking countries around the world.

USER STORIES

As a first-time visitor

B2C and B2B

1. [ ] MUST HAVE: I want to check the social media links to see the website profile, to look at photos from past events, and maybe follow.
2. [ ] COULD HAVE: I want to check a FAQS section to find relevant information on the services provided, benefits to creating an account (e.g.: free on-demmand material, newsletter), etc.

B2C

3. [X] MUST HAVE: I want to check all the services available.
4. [X] MUST HAVE: I want to sort the services by categories, or by price, and also be able to view only one specific category of services.

B2B

5. [X] MUST HAVE: I want to contact the site to receive a customized training plan and quote.

As a Returning Visitor

6. [ ] COULD HAVE: I want to subscribe to the newsletter to be informed about special offers, new courses or features.
7. [X] I want to be able to easily register for an account, and receive an email confirmation after registering, so that I can verify that my account registration was successful.

As an Authenticated User

8. [X] I want to be able to easily login and logout, so that I can access my personal account information.
9. [X] I want to be able to easily recover my password in case I forget it, so that I can recover access to my ccount.
10. [ ] MUST HAVE: I want to be able to have a personalized user profile, so that I can view my personal order history and order confirmations.
11. [ ] MUST HAVE: I want to be able to update and save my billing information on my user profile.

Viewing and Navigation

• [ ] I want to view a list of services, so that I can easily choose what service suits me best.
• [ ] I want to be able to view specific type of service, so that I can quickly find services I'm interested in whitout having to go through all the services (e.g.: only ocmpany or individuals' services)
• [ ] I want to be able to view individual service details, so that I can identify the price and description.
• [ ] I want to be able to easily view the total of my purchase at any time, so that I can avoid spending too much.

Sorting and Searching

• [ ] I want to sort the list of available services, so that I can easily identify the best priced and sorted by types.
• [ ] I want to sort a specific type of service, so that I can find the best-priced services in a specific type.
• [ ] I want to sort multiple types of services simultaneously, so that I can find the best-priced services across broad types, such as 'individual' or 'reduced groups'.

AGILE DEVELOPMENT

As part of the Agile development method, user stories have been created and implemented one at a time. Future features will be created following the 'Could Have' and 'Won't Have/Wish' labels on the stories. Kanba Project

DESIGN CHOICES

The design of this site is thought to inspire professionality, trust, and the dark tones of blues provide foster a state of relaxation, of wellbeeing. Thi is the palette used, contrasting with white font:

FEATURES

Navbar

There are two navigation bars and both are responsive:

• The first, topnav has a dark blue #003366 color, and is fixed on top of every single page of the site. It has three icons with links: logo(to home), user, bag.
• The second nav is on the individual services page, accessed through "For You" button on the home page. It has a search bar to search to seach whithin all the services for specific words.

https://github.com/user-attachments/assets/71ea8143-fb09-4948-8eb5-bf2eeeb86a10

User Authentication

https://github.com/user-attachments/assets/a05ad833-22d2-4918-af9c-399ab638847e

Contact Form

https://github.com/user-attachments/assets/148b0e3d-b0d0-4f58-9eed-d86b26624faa

Product Sorting

https://github.com/user-attachments/assets/bafbf9ec-4e4d-4802-9856-65bd3ae02a98

Search Bar

The search bar is on the for you service page:

Shopping Bag

Whithin the shopping bag, users can update quantity of service packs to buy, and eliminate any service from the bag as well. The subtototal is updated too depending on the quantity of each item. Then the user can check out, or return to services. Please refer to the follwoing videos and screen captures to see all these features in action. https://github.com/user-attachments/assets/c5d745df-9c5d-490b-afe4-098bc30c4d05

https://github.com/user-attachments/assets/75625e41-44d3-4b62-b630-76f3f1d1a89a

Online Payments - STRIPE API

404 Error Page

SEO

The lighthouse web report (displayed in the Testing section below) passed the SEO at 100. I have included the following meta tags and info:

<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, teaching, learning, learn, lessons, tutor, teacher, education, private, groups, online groups, e-  
   learning, corporate, reduced, live">
<meta name="author" content="Edna Torres Munill">

Admin Console

The admin console reflects most of the models present in this site, and features from django-allauth. The models are detailed in a section below, and the allauth are as follows:

• 
• EMAILS
  • This is taken from django-allauth, and stores the emails of the registered users in the admin for future emailing campaigns, and to send the users the free monthly newsletter.
• AUTHENTICATION AND AUTHORIZATION
  • These also come from django-allauth, and is used to give certain permissions to users, to verify them manually, update information, or delete them.

STRUCTURE &

The site has been built using Django 5.1 in Python 3.12, and has the following structure:

• The site contains four django apps (bag, checkout, home, individual_services) with several models.
• You can check the code for further detail, and check the requirements.txt to know all the modules and their correspondent versions.

TESTING

DEFECT TRACKING

GITHUB ISSUES

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

DEFECTS OF NOTE

No defects of note have been detencted on this site.

OUTSTANDING DEFECTS

No outstanding defects have been detected in this site.

GENERAL PERFORMANCE

The following tests have been run for this project:

Lighthouse Report

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

• Include a site.manifest

Tablet & Mobile Device

Laptop and Desktop

CODE

CSS

No critical errors were found whe passing the W3C validator

JS ES6

No critical errors were found whe passing the validator JShint

• checkout/static/checkout/js/stripe_elementss.js :
  

• static/js/quantity_selector.js :

ACCESSIBILITY

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.

CONTRAST VALIDATION REPORTS

Font and backgroud colors have passed at level AAA. The following reports have been generated by Juicy Studio

GENERAL WCAG 2.1 REPORT

This website is compliant with all international standards, as proved after EqualWeb Accessibility Checker scan of the site.

MANUAL TESTING

USER ACCOUNT

1. Registration process completed:

   • Form is posted to the databse reflected in the admin, as user is created.

   • User receives verification email

     

   • Verification url works as expected

   • Once user clicks on 'verify', he is redirected to home page, already logged in.

2. Password Reset / forgotten

   • 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.

     

TECHNOLOGIES USED

LANGUAGES

• Python 3.12
• JS ES6
• CSS3
• HTML5

FRAMEWORKS, LIBRARIES AND PROGRAMS USED

• The following have been used:
  • Django 5.1 - Whithin django framework, many libraries and modules have been used. For mode details on the libraies and modules, refer to requirements.py on the root directory.
  • 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 reports to check and improve core web vitals, including accessibility issues.
  • Remove.bg to remove background from logo image.
  • Favicon - To create the logo, and the icon on the title included in each page of this site
  • 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.

CREDITS & ACKNOWEDGEMENTS

• All the images are free copyright, and have been taken from [Pexels.com].
• I have researched 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.