This is project milestone 4 for Code Institute Full-stack development program: Fullstack frameworks with Django
The purpose of this project is to create an e-commerce shop for a small sushi take-away shop called Sushiish, which allows their customer to be able to pre-order food for pick up or delivery with the ability to pay orders online with Stripe payments in order to reduce the waiting time for customers, and the workload for employees. While Sushiish is a fictional sushi business, its inspiration, menu, and media assets are taken from my own business: a take-away shop selling sushi and wok.
Responsiveness of Sushiish
Link to live site: Sushiish Shop
-
As a new visitor and a site user, I want to:
- know what the website is about upon landing the site.
- be able to navigate through the website smoothly.
- be able to sign up / log in / log out in order to order take-away.
- have a personalized profile page where I can add my delivery information and see my previous purchase history.
-
As a shopper during the dish selection phase, I want to:
- be able to see all the dishes available to buy and filter the dishes based on their categories.
- exclude the dishes based on certain allergies.
- search for a dish based on name or descriptions (ingredients).
- view product's detailed information.
- able to see the total amout of my current purchase at any time.
-
As a shopper during checking out phase, I want to:
- view all the dishes I have added to my order.
- easily adjust quantity of a product currently in my order / delete a product
- be able to add a note to the kitchen or delivery.
- choose time I expect to pick up the food or have it delivered.
- easily enter personal information / delivery information / payment information.
- pay for orders with my card in a safe and secured matter.
- receive a confirmation from the shop that I have successfully or failed to create an order or pay.
-
As the shop owner, I want to:
- be able to add more dishes to the menu.
- be able to edit current dishes.
- delete a dish out of the menu.
Covid-19 era has made online ordering and delivery an important feature and source of intake for restaurant businesses to offer customers a fast, convenient, and contactless way of ordering food. In order to increase Sushiish' competence and attractiveness, it is a must that the shop can offer such services to their customer base. The ordering flow has to be seamless and without much troubles or confusions for ease of use for customers of any age group.
- Content requirements
- Introduction of the shop to give visitors an idea of what this shop is selling
- List of: product categories / products (grouped by categories)
- Detailed information of each product: ingredients, allergies (if any), price, image of the dish.
- Shopping cart:
- what products have been added to cart - quantity - total price
- Total amount of the whole shopping cart and delivery charge (if delivery).
- Account information:
- My profile
- My saved addresses
- My purchase history
- Functionality requirements
- User account:
- Sign up / Log in / Log out
- Edit profile: personal information / delivery address
- Purchase history
- Online shop:
- Product filtering by categories
- Product filtering by allergies
- Search for a product by name or description
- Product showcase page with thumbnail images
- Product's details page with full image and more descriptions
- Shopping cart, create an order and payment:
- View / Edit existing product's quantity / Delete existing product on shopping cart
- Secured online payment with card through Stripe API
- Order confirmation email
- Toast messages to inform users if their actions have succeeded or failed
- Admin and store management:
- CRUD functionalities for product categories
- CRUD functionalities for allergies
- CRUD functionalities for products
- CRUD functionalities for users
- CRUD functionalities for orders
Sitemap
The main goal of this project is to generate sales, it is important to keep it as simple as possible so users can easily navigate themselves within the shop and go to checkout and pay seamlessly without much trouble. Therefore the information architecture of this site is very simple: a landing page where users get an impression what type of site this is. Here, users should easily see the 3 main possible navigations:
- product listing page (menu) where users can filter the products by categories (appetizers, sashimi & maki, maki, sushi combo)
- account page for logged in user (or navigation to sign up / login page if not logged in)
- shopping cart, which further leads to checkout page where users can fill in information for pickup or delivery and pay securely with their card.
ER Modelling
After the information architecture is generated, the database design is also very simple. The database is initially designed to store the following information:
- Product categories
- Products
- Orders
- Order items
- User profiles
- Users (based on Django's allAuth)
During the development phase, the database is adjusted upon further research and rethinking the best practice to handle data. The adjusted modelling is shown in the following diagram with expansion of Allergy table, Address table, and Contact Form table.
ER Modelling Adjusted
-
CSS framework chosen for this project is Bootstrap v5.1. This framework is chosen for its clean, simple and clear response UI design, which is easy for novice users to navigate and interact with data and database.
-
Color: the color scheme for Sushiish is taken from the ingredients of one of the most popular and classic maki roll: salmon avocado roll. Salmon (pinkish shade #FF7E6B), avocado (light green shade #44B5AA), all on a rice (white #FFFFFF) background.
Sushiish color schemes -
Font:
- Caveat Brush is chosen as the font for the logo and being used for hero texts / headlines.
- PT Sans is used for normal text through the website. The text hiery is determined by the use of color and boldness.
- Wireframes for mobile: View here
- Wireframes for desktop: View here Tablet design will be similar to desktop design with minor differences in order to fit better with the screen property of a tablet such as columns or padding, etc.
The initially design was followed closely during development. There were only some minor changes such as the ordering of certain card elements of information piece which I decided to adjust during development phase to fit with screen size and the readability of the text better.
Features that have been implemented can be found at FEATURES.md.
This project is a work in progress. The MVP being released now has all the basic functionalities needed for a user to order food for self pickup or delivery and pay securely with their card through Stripe API. Site owner has also access to all the data through Django's default admin panel. The next phase will be to add more features to the site which enhances the buying experience for the user and give site owner a better user experience and control over the online shop. The following features are planned to be implemented:
- A better designed admin dashboard for site owner to manage the webshop and its data
- Site owner can limit delivery area and/or setting different delivery fees for certain areas
- Product can have more added options for customization such as size, sauce options, extras etc.
- Implement order status tracking for users
- A more complicated discount system: discount for certain products/categories, discount campaigns, discount codes, discount for specific customers, etc.
- HTML5 - build up layout and content of the application.
- CSS3 - add custom styling and override Bootstrap stylings to fit with the theme of the website.
- JavaScript - to add interactive functionailities to the app.
- Python - to build backend functionalities handling data, database interaction, and CRUD functionalities.
- Figma - for wireframe creation.
- Visual Studio Code - the code editor being used to build the project.
- LucidChart - to create database diagram.
- PicResize - to resize large images.
- Chrome DevTools - used heavily for debugging during development and testing process.
- Git - the built-in Git feature in VS Code was used for version control and push to github.
- Github - Github is used to store project's code remotely.
- Google Fonts - to import the desired fonts for this project
- FontAwesome - implement icons for navigation menu, actions, etc.
- CSS Scan - to create box shadow for elements
- Autoprefixer CSS online - to parse CSS and add vendor prefixes.
- Heroku - platform being used to deploy the application
- Stripe - for handling online payments.
- Postgresql - database used for storing data built in as a service by Heroku.
- Amazon Web Services (AWS) - to host media and static files on the the cloud.
- W3C Markup Validator, W3C CSS Validator, JSHint, PEP8 online, Lighthouse, - to validate the code syntax and to check the code quality for HTML markup, CSS, JavaScript, Python, and the site overall performance.
- Bootstrap v5.1 - the responsive front-end framework to build the layout and style the app.
- Django - the core framework that this e-commerce project is built with.
- Stripe API - the payment gateway used for handling online payments.
Testing can be found in its own section TESTING.md
-
Environement: The project was developed using VS Code editor and its integrated version control feature to commit gits, which are then pushed to GitHub in order to store the codes remotely. The project is hosted on Heroku and can be accessed at http://sushiish.herokuapp.com/.
-
Project management and development workflow:
- Project management: In order to keep track of my own progression and to-dos, I created a basic kanban project boards on GitHub. Based on project's user stories, requirements and wireframes, I scope out the tasks accordingly to 3 phases: To do, In progress, and Done.
- Creating issues as a way to keep a list of small things to build / to do / to fix as I go along with developing the big features.
- Branches: I created a branch for each feature, develop on the respective branch, and pushed them to GitHub.
- Log in to GitHub and navigate to this project's respository: ms4-sushiish-django.
- Just above the navigation menu of the repository (above the Settings button), locate the Fork button.
- The original copy of the repository is now copied on your GitHub account which allows you to view and/or work on the codes without affecting the original work.
Follow these steps to clone this project:
1.Log in to GitHub and navigate to this project's respository: ms4-sushiish-django. 2. Under the navigation menu of the repository, locate and click the button "Code" which shows different options to clone or download. 3. To clone this repository using HTTPS, copy the link under "Clone with HTTPS". 4. Open Git terminal. 5. If needed, change the current workspace to the location where you want the repository to be cloned 6. Type git clone and paste in the URL copied in step 3 and press Enter.
-
Create
.envfile:- Create a .env file in the project's directory called
sushiish_shop. - Add the following code to the file:
STRIPE_PUBLISHABLE_KEY='insert_your_stripe_public_key' STRIPE_SECRET_KEY='insert_your_stripe_secret_key' STRIPE_WEBHOOK_SECRET='insert_your_stripe_wh_key' SECRET_KEY='insert_your_very_secret_key' DATABASE_URL='postgres://user:password@host:port/dbname' # insert your own database URL for deploying to Heroku AWS_ACCESS_KEY_ID='insert_your_aws_access_key' AWS_SECRET_ACCESS_KEY='insert_your_aws_secret_access_key' AWS_STORAGE_BUCKET_NAME='insert_your_aws_bucket_name' AWS_S3_REGION_NAME='insert_your_aws_region_name' USE_AWS=True # set to True if you want to use AWS for storage otherwise set to False to use local storage DEFAULT_FROM_EMAIL='a_default_send_from_email' EMAIL_HOST_USER='your_email_address_for_sending emails_to_users' EMAIL_HOST_PASSWORD='email_password_generated_by_gmail_app' ALLOWED_HOSTS=['insert_your_domain_name'] DEBUG=True # set to False when deploying to Heroku
- Add
.envand__pycache__to .gitignore to secure your sensitive data.
- Create a .env file in the project's directory called
-
Create virtual environment and install dependencies:
- Create a virtual environment in the root directory of the project.
- Type
python3 -m venv .venvin the terminal and press Enter. - Type
source .venv/bin/activatein the terminal and press Enter. - Type
pip install -r requirements.txtin the terminal and press Enter.
-
requirements.txt and Procfile:
- The currently available
requirements.txtfile from this repo contains the list of dependencies that are required to run this project. If you develop the project further using more packages and dependencies, you can add them to therequirements.txtfile with the following command in terminal:
pip freeze > requirements.txt- The currently available
Procfilefile contains the commandweb: gunicorn sushiish_shop.wsgi:application. It is used to determine which command to run when the app is started on Heroku. If you develop the project further with a different commands to run the app, make adjustment toProcfilefile accordingly. - Push your changes to
requirements.txtandProcfileto GitHub if any.
- The currently available
- Log in to Heroku
- On top right corner of the screen, locate the
Newbutton and the chooseCreate new app. - Give a unique name to the app, choose appropriate region, and click
Create. - Access Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option in order to add the Postgres addon to the app.
- Access your app dashboard and click on
Deploy. - Set up environment on Heroku by going to
Settingstab. - On
Config Varssection, clickReveal Config Vars. - Based on
.envfile, add all the environment variables to theConfig Varssection. At this stage, setDISABLE_COLLECTSTATICtoTrueto temporarily disable the collectstatic command until AWS is configured. - Under
Deployment method, choose GitHub and coonect to the respective repository. - Enable automatic deployment and click
Deploy. - On top right coner of the app's dashboard, locate the button
Open app. You will be able to see you deployed app with link to live site. - Update allowed hosts to the domain name of your herokuapp.
- In your IDE evironment, set up the project to use Postgres database on Heroku.
- Migrate the database to the latest version and create super user access with the following command in terminal:
python3 manage.py makemigrations
python3 manage.py migrate
python3 manage.py createsuperuser # which will ask you for username and password
- Upload the fixtures to the database by running the following command in terminal and make sure that products are loaded last.
python3 manage.py loaddata categories
python3 manage.py loaddata allergies
python3 manage.py loaddata products
- In AWS, create a bucket and upload the static files and media files to the bucket.
- Configure your bucket with appropriate permissions and CORS rules.
- Create IAM user and create a policy for the user to allow access to the bucket.
- In your IDE, set up the project to use AWS for storage with the respective environment variables for AWS.
- Execute
python3 manage.py collectstaticto upload static files to the AWS S3 Bucket. - Upload product photos from media folder manually to the AWS S3 Bucket.
- Remove DISABLE_COLLECTSTATIC variable from Heroku Config Vars.
- This project follows Code Institute's walkthrough project Boutique Ado to build a Django web application.
- Tutorial on how to create a nice horizontally scrolled ticket for category filtering navigation bar from benfrain.com.
- Intensive reading of Django's documentation and a lot of Google search leading to StackOverflow, GeeksForGeeks, dev.to, CSS Tricks etc., which helps me to understand the concepts better and fine-tune my codes and logic.
- The content throughout this page is written by me and/or adapted from my own business Hy's Løren.
- Sushi icon for favicon is taken from Sushi icon by Icons8.
Photos of food and drinks are copyrights from my own business Hy's Løren.
A big thanks for my mentor Narender Singh for the constructive code review sessions and for the help in debugging my own logic, thinking, and codes, which has helped me to learn more about anything coding related from the very first project until this last one.