Fullstack Development Milestone Project – 'Teff' E-commerce (Archived)

Updated Project on branch1 (https://github.com/SamLookingGlass/FullStackDevelopment-Project/tree/branch1)

Context

This project focuses on the full-stack development for a mobile-responsive web-based e-commerce website called ‘Teff’. 'Teff' is a purveyor of t-shirts with sleek and modern designs.

The website requires users to create an account before checking out.

Demo

The e-commerce website can be found here: https://tsw-teff.herokuapp.com/ The website has not been deployed yet but the source code is available for inspection.

1. User Experience (UX)

(i) Project Strategy

User Stories	Features
User wants to browse t-shirts by size, color, price and on promotion	Navbar with filters.
Admin wants to populate details for new t-shirt launch on the website.	Able to upload t-shirt image through UploadCare.
Admin wants to update t-shirt inventory on the website.	Automatic update of stock count when a t-shirt is sold.

2. Technologies Used

• HTML 5
  The project uses HTML5 to structure the content of the website.
• CSS
  The project uses CSS to add stylistic touches to the website.
• Bootstrap
  The project uses Bootstrap to structure the layout of the website (i.e. Navbar, Footer) and ensure website is mobile responsiveness.
• Django
  The project uses the Django python Web framework to develop the e-commerce website.
• Jinja 2
  The project uses Jinja2 to write conditional statements to display content blocks when certain conditions are met. Additionally, Jinja2 was used to set up template inherritance and extension of html/css files for the project.
  The project uses MongoDB Atlas as a cloud database to store user data and file uploads.
• GoogleFonts
  The project uses GoogleFonts to style the typography on the website to enhance the visual experience of users.
• FontAwesome 4.7
  The project uses the icons provided by FontAwesome 4.7 alongside call-to-action buttons to enhance the user experience by making user interaction with the application more intuitive.
• Heroku
  The project uses Heroku for the deployment and management of the web application. As Heroku provides timelogs, when an error occurs, it makes easier to identity and remedy bugs.

3. Deployment

(i) Development Process

• All codes was written on AWS Cloud9 and codes were saved and tested locally.
• Regular committing and pushing of codes to GitHub ensured that changes to codes can be tracked and allows for version control maintainence.
• Heroku was set up first before embarking on code development.

4. Credits and Acknowledgement

• Credited to Pexel.com for the photos and videos used on the wbsite
• The website template was adapted from https://mdbootstrap.com/freebies/jquery/e-commerce/