StarDesk is a computer hardware/components E-Commerce store, built as my 5th Portfolio Project for Code Institute's Full Stack Web Development Diploma, focused on E-Commerce.
- There are two types of users, admins and regular users.
- Test accounts can be given on demand.
** View the live website here**
- Project Overview
- UX
- Features
- Feature 1 - Homepage and deals
- Feature 2 - Navbar
- Feature 3 - Footer
- Feature 4 - Messages
- Feature 5 - Bag
- Feature 6 - Products
- Feature 7 - Product categories
- Feature 8 - Product details
- Feature 9 - Product admin
- Feature 10 - Newsletter
- Feature 11 - Search bar
- Feature 12 - Product sorting
- Feature 13 - Profile info
- Feature 14 - Order History
- Feature 15 - User Sign in/up
- Feature 16 - Checkout
- Technologies Used
- Testing
- Deployment
- Credits
- This project is a website for the Portfolio Project 5, part of the Code Institute Diploma in Software Development (E-commerce Applications)
- The website is deployed using Heroku at the following URL: StarDesk
- The GitHub repository contains all the source code, Issues, Project (kanban board) and assets. It can be found here.
- The website is fully responsive for all media sizes
The primary goals of the website admins are:
- To add, edit and delete products.
- To add product deals.
- To be able to see and manage user reviews.
The primary goals of the website users are:
- To register for an account on the website.
- To sign in and sign out of the website.
- To view a list of all products.
- To view a list of all products of chosen category.
- To be able to search for a product.
- To add, update and remove products from their bag.
- To be able to complete their purchase.
- To be able to save their information for future checkouts.
- To see their order history.
StarDesk is a computer component e-commerce store.
Its target audience are consumers who will be buying the store products and paying with their card, through Stripe.
Payments are signle (final), as only products are sold. There are no options to make a subscription or other type of payment.
All products contain the information that a consumer might need to consider it, along with images.
The website's features are structured to provide visitors with an easy way to get from the first click to making the purchase.
Payments are simple, as they are implemented by Stripe.
Products can be found in many and easy ways.
Images are accurate and information is descriptive.
There is a review system for users to share their opinions.
As a marketing strategy, a Facebook page was created for the store, which can be found here.
There's also a newsletter form for users to sign up to the store's newsletter. It is located on the footer of the page.
- The website is structured into 17 pages.
- All pages extend the same base, so they have the same look.
- Pages are described below.
| Page | Description |
|---|---|
| Home | The homepage consists of a welcome message and cards for product deals |
| All products | Contains all products and sorting functionality |
| Product categories (7) | Each product category has a page, 7 total |
| Product details | Contains details of chosen product, along with reviews and admin controls |
| Bag | Contains all bag items |
| Checkout | Visitors can checkout to complete their purchase |
| Checkout Success | Visitors can view their completed purchase details |
| Register | Users can sign up for an account |
| Login | Users can sign in with their accounts |
| Logout | Users can sign out of their accounts |
| My Profile | Users see their saved information and order history |
- The project contains 6 apps.
- Bag app, to handle the products in the bag
- Checkout app, to handle all checkouts and webhooks
- Home app, to contain homepage and deals functionality
- Products app, to contain all product models and pages
- Profiles app, for users to save their info and view their orders
- Reviews app, for users to add product reviews
- The project is accompanied by:
- templates
- README (This file)
- TESTING (Documentation about testing)
- Procfile (To run the deployed application)
- Requirements.txt (Contains all necesary libraries required)
- Robots.txt (Required for search engine optimisation)
- Sitemap.xml (Required for search engine optimisation)
- The project was built with the help of the Django Blog app.
- The project uses a relational database (PostgreSQL)
- Data is handled by the application with Django
The database diagram can be seen below:
- The User model contains information about each user that registers
- It is part of the Django allauth library
- The following fields are used for this project: username, email, password
- The UserProfile model is used to store the user's information, so they can checkout more easily
- It has most of the necessary checkout fields with the "profile_" prefix added
- Fields: full_name, phone_number, country, city, postcode, street_address1, street_address2
- The Product model has submodels for each product category
- The main model contains all shared fields and the submodels contain unique ones
- Shared fields: model, manufacturer, image, description, price, rating
- Submodels have unique fields that can be used to connect them, in case project is developed to check whether components match with each other
- Used to add reviews to products
- Model/submodel could be used here, too, yet there weren't many fields
- There are 7 total ProductCategoryReview models, one for each type of product. "ProductCategory" should be replaced with the product model.
- Fields: product, user, score, comment
- Used by admins to add product deals
- Has main DealProduct model and 7 submodels, one for each product model.
- Contains the following fields: product, price_new, deal_ends
- Used to create the orders on the website
- Is directly linked to the User, while having the OrderLineItems linked to it
- Fields: user, email, full_name, phone_number, country, city, postcode, street_address1, street_address2, date, delivery_cost, order_total, grand_total, original_bag, stripe_pid
- Calculates the delivery_cost, order_total and grand_total in its functions
- Used to create order lineitems
- Has main OrderLineItem model and 7 submodels, one for each product model
- Related directly to Order
- Total price is updated when it is created
The User Stories are described below
Potential Customer
- As a potential customer I can see a home page so that I get information about the website/store
- As a potential customer I can get to the products page so that I find all available products
- As a potential customer I can get to an offers page so that I can find deals on the products
- As a potential customer I can get redirected to the login page if I visit a logged-in-only page so that I can log in or sign up
- As a potential customer I can find a sign up button on the navigation so that I can sign up
- As a potential customer I can find a sign up button on the sign in page so that I can directly go to the sign up page
- As a potential customer I can sign up for an account so that can access all that the website offers
- As a potential customer I can find a sign in button on the navigation so that I can sign in easily
- As a potential customer I can add items to my order without signing in so that I can make an order as a guest
- As a potential customer I can complete an order without signing in so that I can make an order as a guest
- As a potential customer I can add items to my order while signed in so that I can make an order as a user
- As a potential customer I can complete an order while signed in so that I can make an order as a user
- As a potential customer I can find a social media link so that I can visit the store's social media account
- As a potential customer I can visit a product's details page so that I can learn more about it or add it to my bag
- As a potential customer I can see my bag so that products added in it are visible
- As a potential customer I can see confirmation or error messages so that I know whether an action was successful or failed
- As a potential customer I can get an email for the order confirmation so that I have a copy of my order
Recurring customer 18. As a recurring customer I can use my profile information in an order so that I can complete my order faster 19. As a recurring customer I can see my order history so that I know what I have ordered in the past 20. As a recurring customer I can edit my profile so that my information is up to date
Admin / Website owner 21. As a website owner I can access an "add product" page so that I can easily add new products 22. As a website owner I can access an "edit product" page so that I can update its information 23. As a website owner I can delete a product so that it gets removed from the catalog 24. As a website owner I can access the admin panel so that I have control of my page's data
The colour palette was taken from Color Hunt
The fonts used are from the Google Fonts library, and are the following: Rubik for the logo Ubuntu for the website's text
- The homepage contains a welcome statement, a hero image and the deals section
- Deals section is updated automatically as deals are added or when they end
- Each deal has a card and provides necessary information
1, 3
- The navbar contains links to all products and their categories
- It is fully responsive, as it changes between static and sticky based on screen size (a refresh might be needed)
- Products and categories are tucked inside a dropdown hamburger menu
- Also contains search bar feature, user controls and bag button
2, 5, 8
- Footer contains a site map with links
- Always stays on the bottom of the page
- Also contains newsletter feature and social links
- Facebook button directs to store Facebook page, rest are mock
2, 13
- Django messages are used with Bootstrap toasts
- Messages are displayed on successful or unsuccessful user actions
16
- Visitors can add products to their bag so they can prepare for checkout
- There is a bag button in the navbar which shows the grand total
- Users can update or remove items from their bag page directly
9, 11, 15
- All products displayed here
- Sorting menu on the left of the page (or top for mobile)
- Go-to-top button on the bottom right of the page
- Pagination to display maximum of 10 products
2, 9, 11
- Choosing a product category (with or without sorting) leads to that category's products page
- Same as the all products page, there is a sorting menu and a go-to-top button, along with pagination if there are enough products
2, 9, 11
- All specific product details on page
- Visitors can adjust the quantity and add as many products as they want to their bag (max. 99)
- Users can review the product
- User reviews visible on the bottom of the page
- Admins have product controls to edit or delete the product, or to add a deal
14
- Admins have the options to edit or delete a product, or add a deal
- They can also add a product from the User button
- That option can be found inside the product details page
- Deleting a product has a confirmation modal
21, 22, 23
- Visitors can add their email to the page's newsletter
- Form is visible on the website footer
- Visitors can search for specific products
- Search bar always visible on the navbar (or button as mobile)
2
- On the products page, visitors can sort by price and rating
- There are controls for both descending and ascending
2
- Registered users can add their profile information so they can do faster checkouts
- Profile information is auto-completed on checkout
- Users can opt to save the information from checkout
18, 20
- Registered users can view their order history on their profile page
- They can click on an order number to view that order success page
19
- Visitors can sign in or sign up as users
- Doing so provides access to profile and ratings
7
- Visitors can complete their order either as signed in or guests
- If signed in, any profile information will be used to autocomplete form
10, 12
The languages used are:
- HTML
- CSS
- JavaScript (only what is created by Django - No personal code)
- Python
The project is based on Django, but contains the following resources, too:
- Amazon Web Services (S3)
- Stripe
- Bootstrap 5
- PostgreSQL
- Coverage
- HTML Markup Validation
- CSS Validation Service
- PEP8 Validation
- Quick Database Diagrams
- Crispy Forms
- FontAwesome
- Google Fonts
- Github
- Heroku
All conducted testing can be found on the separate file, TESTING.md
The project uses Cloudinary for static files hosting and it is needed for deployment and development.
You can clone this repository and run it locally with the following steps:
- Login to GitHub (https://wwww.github.com)
- Select the repository AlexGCbn/StarDesk
- Click the Code button and copy the HTTPS url, for example: https://github.com/AlexGCbn/CI_PP5_StarDesk.git
- In your IDE, open a terminal and run the git clone command, for example:
git clone https://github.com/AlexGCbn/CI_PP5_StarDesk.git - The repository will now be cloned in your workspace
- Create an env.py file(This file should be included in .gitignore, so it will not be commited) in the root folder in your project, and add in the following code with the relevant key, value pairs, and ensure you enter the correct key values
import osos.environ['SECRET_KEY'] = 'ADDED_BY_YOU'os.environ['DATABASE_URL'] = 'ADDED_BY_YOU'os.environ['STRIPE_PUBLIC_KEY'] = 'ADDED_BY_YOU'os.environ['STRIPE_SECRET_KEY'] = 'ADDED_BY_YOU'os.environ['STRIPE_WH_SECRET'] = 'ADDED_BY_YOU'os.environ['DEVELOPMENT'] = 'ADDED_BY_YOU'os.environ['EMAIL_HOST_PASS'] = 'ADDED_BY_YOU'os.environ['EMAIL_HOST_USER'] = 'ADDED_BY_YOU'
- Install the relevant packages as per the requirements.txt file
- In the settings.py ensure the connection is set to either the Heroku postgres database or the local sqllite database
- Ensure debug is set to true in the settings.py file for local development
- Add localhost/127.0.0.1 to the ALLOWED_HOSTS variable in settings.py
- Run "python3 manage.py showmigrations" to check the status of the migrations
- Run "python3 manage.py migrate" to migrate the database
- Run "python3 manage.py createsuperuser" to create a super/admin user
- Start the application by running
python3 manage.py runserver - Open the application in a web browser with the URL: http://127.0.0.1:8000/
This project can be deployed to Heroku with the following steps:
- Create an account on Heroku
- Create an app, give it a name for example stardesk, and select a region
- Under resources search for postgres, and add a Postgres database to the app
- Note the DATABASE_URL, this needs to be set as an environment variable in Heroku and your local environment variables
- Create a Procfile with the text: web: gunicorn stardesk.wsgi
- Make sure you add your environment variables (env.py) to Heroku's Config Vars
- In the settings.py ensure the connection is to the Heroku postgres database
- Ensure debug is set to false in the settings.py file
- Add 'localhost/127.0.0.1', and 'stardesk.herokuapp.com' to the ALLOWED_HOSTS variable in settings.py
- Run "python3 manage.py showmigrations" to check the status of the migrations
- Run "python3 manage.py migrate" to migrate the database
- Run "python3 manage.py createsuperuser" to create a super/admin user
- Connect the app to GitHub, and enable automatic deploys from main
- Click deploy to deploy your application to Heroku for the first time
The app was created by relying on Code Institute's Boutique Ado walkthrough app, so a big thanks for that! A lot of the code is taken from there. The product images and information were all taken from Amazon.
A big thank you to my mentor, Mo Shami, for always being positive and encouraging me to do better! He has been a wonderful mentor that provided great guidance throughout my course.