eoinlarkin / retro-pc Goto Github PK

A fictional e-commerce website for the selling of vintage PC hardware.

The site has been developed using Django, features Stripe integration and has been deployed to Heroku.

• Objectives
• Development
• Design
• Database Model & Schema
• Features
• Testing
• Marketing
• SEO
• Deployment
• Technologies Used
• Credits

The objective of the project was to build a fully functioning e-commerce website with a responsive design and Stripe integration. The site is styled as an online marketplace selling vintage computer hardware.

An agile approach was used in the development of the site. Development of the site was broken down into four distinct sprints as follows:

• 01 - Initial Deployment
• 02 - Development of Core Functionality
• 03 - Site styling & enhancements
• 04 - Testing & Documentation

The Sprints were tracked on Github using the Github milestone tracker.

In designing the site, I defined a number of user stories as follows. User stories were recorded and tracked in the Project Kanban Board.

User stories were categorised as either "must have" or "nice to have". Not all user stories categorised as "nice to have" were implemented. These have been left open as issues on the GitHub issues page.

The user stories classified as "must_have" for the site were defined as follows:

• As a shopper I would like to view a list of products
• As a shopper I would like to view individual product details

• As a site user I would like to easily register for an account
• As a site user I would like to easily login / logout
• As a site user I would like to easily recover my password
• As a site user I would like to have a personalised order history

• As a shopper I would like to select the product category
• As a shopper I would like to search for a product by name or description
• As a shopper I would like to search for products from any page
• As a shopper I would like to see what I've searched for

• As a shopper I would like to select the quantity of product when purchasing
• As a site owner I would like to offer an easy to use payment method

• As a site owner I would like to redirect users to an informative 404 page for bad links
• As a site owner I would like to easily add, remove and modify products
• As a site owner I would like to give users the ability to sign up to a newsletter

User stories classified as nice to have which were uncompleted were marked as open on the Github issues page.

The site was developed using Tailwind CSS and targets a responsive design that will work across different sized screens and devices.

Wireframes were created in advance of the design of the layout of the site. As the development of the site progressed, the design evolved however the original wireframes largely reflect the final site design:

Footer

Navigation Bar

Landing Page

Cart Summary

Checkout

Sign-Up / Register

A broad color palette was chosen for the site with a range of complimenting colors chosen. In choosing the color palette, my objective was to select a color palette that would create a strong visual identity with a number of colors with high contrast.

In defining the colors in the HTML code, custom Tailwind color codes were defined; the hex codes corresponding to the custom codes were as follows:

In choosing the font for the site, I elected to use a monospace font; this was in keeping with the theme of the site and helped to add to the identity of the site.

In building the application, the following applications and associated models were created:

store

• ReleaseDecade
• Manufacturer
• CPU
• Product

cart

• Order
• OrderLineItem

user_account

• UserProfile
• NewsletterSubscribers

The application features four custom models; Manufacturer, CPU, Product and NewsletterSubscribers. These are used to store information relating to the products as well as for the storing of users signed up to the site newsletter.

The following diagram provides an overview of the various models used by the application and the relationship between them.

• Toast Functionality:

  
• Newsletter Signup:

  
• Product Management Page:

  
• Stripe Integration:

  
• Custom 404 Page:

  

Future additional features for the site are as follows:

• As a shopper I would like to sort multiple categories simultaneously
• As a shopper I would like to sort the list of products
• As a site user I would like to receive a confirmation after registering
• As a shopper I would like to easily view the total of my purchases at any time

These user stories have been recorded in the issues section of GitHub and marked for future development.

Testing of the site is documented in the TESTING.md file

retro-pc is a business to customer (B2C) website focusing on selling rate and vintage computer equipment. The website does business directly with customers. Key site features are the ability to search the site, complete an order and process payments through approved payment providers.

A mock-up of a Facebook business page has been created for the retro-pc website. As this was A real Facebook marketing site could be used to advertise the business, promote the products sold on the website and communicate directly with customers.

Facebook Marketing Page:

A newsletter signup form was implemented via a Django form. This allows users to enrol in the site newsletter. Details of users signed up to the newsletter can be accessed in the administration backend.

On signing up to the newsletter, a toast is posted confirming the subscription. If a user already is a subscriber; they receive a toast confirming that they have already subscribed to the newsletter and no new data is posted to the database.

In addition to capturing the user's email, the date that the user subscribed to the newsletter is also recorded.

Newsletter Form:

Newsletter Admin Panel:

Newsletter Subscriber Detail:

Descriptive meta tags were added to the site headers to optimise the site for SEO purposes.

• Meta Tag:

  

A sitemap was made to list the websites important URL's to ensure that search engines are able to easily index the site. This xml was generated using XML-sitemaps.com

A robots.txt file was created to support the indexing of the site by search engines. A robots.txt file was created with the following content:

User-agent: *
Disallow:
Sitemap: YOUR_SITEMAP_URL

In order to make a local clone, the recommended approach is to use the command line interface. The following steps should be taken :

• Navigate to the repository website
• By clicking on the Code button, it is possible to copy the HTTPS link for the repository
• Open the commandline interface on the local computer and navigate to the working directory into which you wish to clone the repository.
• Open commandline interface on your computer
• Enter the following command:
  git clone https://github.com/eoinlarkin/retro-pc.git
• Press Enter. Your local clone will be created.

Heroku was chosen as the hosting platform for the application. In addition Cloudinary was used as the hosting platform for media and static files.

In order to deploy the application to Heroku, the following steps should be followed:

• Create a requirements.txt file: pip freeze > requirements.txt

• Define a Procfile with the following content for use by Heroku; this should sit in the the root directory: web: gunicorn retropc.wsgi:application

• Create a new application in Heroku.

• Add the following Heroku Resources:

  • Heroku Postgres

• Define the following Environmental Variables in Heroku:

  Key	Value
  DATABASE_URL	Heroku postgres database URL
  SECRET_KEY	application secret key
  CLOUDINARY_URL	unique cloudinary url
  DEBUG_MODE	should be set equal to False for deployment
  EMAIL_HOST_PASS	password for email provider
  EMAIL_HOST_USER	user name for email provider
  SECRET_KEY	Django secret key for application
  STRIPE_PUBLIC_KEY	Stripe public key
  STRIPE_SECRET_KEY	Stripe secret key
  STRIPE_WH_SECRET	Stripe webhook key

• Create the database schema locally by running the following Django commands:

python manage.py makemigrations  
python manage.py migrate

• Create a superuser for the application: python manage.py createsuperuser

• Add the hostname of Heroku app to allowed ALLOWED_HOSTS in settings.py: ALLOWED_HOSTS = ['Heroku app URL', 'localhost]

• Push the code to GitHub

• Ensure the Heroku CLI is installed and authenticated. Link the local repository to the Heroku Application with the following command:
  heroku create -a APP_NAME

• Push the code to Heroku with the following command: git push heroku

• Python
• Jinga
• Javascript

• VScode
  All coding was completed in VS Code.
• Heroku
  Heroku was used for the deployment of the app.
• Black
  Black was used as the Linter for Python files.
• Stripe
  Stripe was used as the payments platform.
• Django
  The Django framework was used to develop the site.
• TailwindCSS
  TailwindCSS was used as teh CSS framework to accelerate development of the site.
• coolors.co
  Potential site palettes were tested with Coolors.
• Figma
  Wireframes for the site were generated using Figma
• gauger.io
  This website was used to generate the favicon using an icon from Font Awesome.
• Markdown TOC
  For generating the formatted table of contents in markdown

In developing the site, the following code / tools / content was leveraged:

The following code was leveraged in order to develop the site. In addition site logic was based on template logic from the Code Institute Boutique Ado repository.

• Sticky Footer

• CSS Not Rendering Locally

• 404 Error

• Custom Tailwind Fonts

• Tailwind Dropdown Buttons

• Header with Hamburger Menu

Content for the site including images and details on the various vintage computer hardware was sourced from wikipedia.com

• The cover icon is derived from an icon sourced from iconfinder.com link

• venv was used to manage the python dependencies.
• Cloudinary was used for the upload and storage of both media and static files.
• Heroku was used for the deployment of the site.