Skip to content

frankkode/brightershop

BranchesTags

Repository files navigation

Build Status

Ecommerce Django-Python project

Table of Contents

Project summary

Full Stack Framework website project with Python 3.7 and Django 3.

  1. The goal of this project is to create a simple yet fully functional e-commerce website shop.
  2. Build simple, reusable django ecommerce app that can be used as an template and reference again in the future projects.

Design

The website was designed with mobile first approach with user in mind. The wirefames with first design can be found here.

The project uses Poppins and Roboto fonts from Google Fonts Library Main color #74ab8c is used for topbar and footer.The color was chosen to match with product collection color.

User Experience

User Stories

'Simplicity, usability with elegance to meet exact needs of customer.'

As a shopper, user I expect:

  • Browse products within the store
  • Filter the products by category
  • Search product or info
  • Add products to the cart
  • View and modify cart
  • Apply discount codes
  • Go through simple secured checkout proccess
  • Be able to place order with or without the account
  • To have an options for paying for the order
  • Register an account
  • Login to dashboard to modify personal info
  • See status of the recent order(dispatched?)
  • See order history
  • Print invoice
  • Find contact info
  • Get notifications about actions on the website and also via email regarding the orders

As an administrator I want:

  • Be able to login to dashboard where I can find info about
    • Customers
    • Orders
    • Status of orders
  • See and print Invoices
  • Bee able to export orders as csv
  • Be able to add, edit or remove orders
  • Edit customers info
  • Contact customers

Back to top

Features

Existing Features

Global

  • Topbar with logo - Full page width container with logo linking to the home page.
  • Search bar - available on all pages able to query string in the whole database and display the results on the search.html page
  • Responsible navbar:
    • On larger screen display the links from the left and accounts dropdown with cart status on the right
    • On smaller screen display hamburger icon for puldown menu with links on the left and cart and accounts dropdown menu on the right
  • Cart displaying current amount of items in cart, linked to cart detail page
  • Account access dropdown menu for register,login, logout and dashboard view. For NOT logged in user, it displays link to login or register page, for logged in users, logout and dashboard view and personal message.
  • Footer with
    • Section for displaying quick links and
    • Section with store opening hours and contact information(linked to email or phone app)

Home page

Simple page with some graphics displaying bestselling products. Products displayed here are filtered based on attribute 'bestseller', specified in the models and editable within admin area. Her, user has an option to add product to the card without specifiyng quantity.This page can be also used for announcements, news, updates.

Special offer

Page displaying products filtered based on attribute 'special_offers'.

Products page

Main Product list page. This page lists all products available within the store. Each product is placed in the container linked to the product detail page. Each container contains product name, image, content, price and form for adding chosen amount of item to the cart. After clicking on add to cart button, product/s is/are added to the cart und user is transfered to the cart view page. This acts also as a confirmation that the product/s been added to the cart.
After clicking on the container with the product, user gets redirected to the detail page of the product. On this page, category filter, located above all products, can be applied to display all or filtered by 'category' products.

Product detail page

After selecting amount and pressing add to cart button, user is redirected to the cart page

Categories Page

Displaying only products in selected category.

Search Page

Full site search is performed after entering string into the searchbar box. User is redirected to the search result page where relevant results are displayed

Cart

If cart is empty, only 'Cart is empty is displayed'. After adding an item to the cart(clicking add to cart button), user gets redirected to the cart page where products present in cart are displayed on the left with the ability to update ammount of product/s or remove the item/s completely from the cart. Price is automatically calculated after add, edit or remove item/s (user actions).

Checkout

Currently, if user is not logged in, after clicking on checkout button on cart page, user is redirected to the page where log in or continue as guest checkout options are displayed. This is giving user freedom to choose to buy items without registering an account.

  • Clicking here on sign in link will redirect user to the sign in page. Items in cart persist after succesfull login.
  • Clicking on continue as guest will redirect to the order create page where user is required to fill in personal details.

Order Create

User is presented with order form where details like address, name, etc are required to place an order and to continue to payment page.

Payment page

User is presented with the option to select either stripe or paypal as payment gateway. Clicking on stripe pay now button will open stripe payment form in new window where correct credit card details are required before they're submitted. If details are correct, payment is processed, and user is redirected to the custom payment_success page.

Login, Logout, Register, Dashboard

Standard django forms and sessions are used for managing user accounts

Admin area

  • Option to export orders in the csv format
  • Ability to export individual order in the PDF format

Features to be implemented

  • Sending emails from the app to the customer
  • Recommendation engine for displaying popular and frequently bought items
  • Customer dashboard to be populated with personal details, recent orders, invoices
  • Full PayPal integration
  • Testing

Back to top

Technologies used

Folowing programming languages, technologies, libraries and tools were used for building the project:

Testing

Google Chrome's and Firefox's Development tools on local pc were constantly used to test changes I made to project and to make sure its displaying correctly on all screen sizes. I also used different mobile devices like phones, tablets and iPads for checking correct mobile responsivennes.

For code Validation:

Forms and inputs are validated by django itself.
Pep8 linter was helpful by highlighting syntax errors during development.

Deployment

For my version control I used Github and Heroku for hosting the live project.

For local deployment:

  1. Open Terminal in the desired project directory of local maschine
  2. Create and activate virtual environment if necessary.
    python3 -m venv venv
    source venv/bin/activate for linux maschine.
  3. Enter folowing commands :
    https://github.com/frankkode/brightershop (will download and unpack the project)
    pip3 install -r requirements.txt
  4. In the main project folder of the project directory, where settings.py lives, create .env file and enter the following:
  • SECRET_KEY = "your own key" # Django app secret key
  • AWS_ACCESS_KEY_ID = "your own key" # Amazon S3
  • AWS_SECRET_ACCESS_KEY = "your own key" # Amazon S3
  • STRIPE_SECRET_KEY = "your own key" # Stripe
  • STRIPE_PUBLISHABLE_KEY = "your own key" # Stripe
  • DATABASE_URL = "your own key" # Postgres key from Heroku
  • CLIENT_ID = "your own key" #Paypal
    Replace the "your own key" value with your secret keys
  1. In the terminal, enter the folowing commands :
  • python manage.py makemigrations
  • python manage.py migrate
  • python manage.py createsuperuser
  • python manage.py runserver

In the browser, open http://127.0.0.1:8000 and the project should be now live and ready to use.

To deploy the project to Heroku

  1. Create the app in Heroku.
  2. Add Heroku Postgres free Hobby level in the Add-Ons section for serving postgres database.
  3. Copy all variables (keys) from the .env file located in the root folder of the project directory to the Config Vars section in Heroku->Project->Settings.
  4. In Heroku->Project->Deploy section connect the github repository of the project and Enable Automatic Deploys from the master branch if thats the case. Otherwise, manual Deploy Branch option is available too.
  5. Before Deploying the Branch, Procfile and updated requirements.txt files are necessary to be in the root dir of the folder.
  6. If automatic deploys were selected, from now on the project updates after every commit to github.
  7. If Deployement, build, went successfuly, restart the dynos in Heroku -> Project Section and project.
  8. Allowed Hosts section in settings.py file should now be updated in order to serve the website.(Add deployed heroku project website address to the python ALLOWED_HOSTS dictionary ).
  9. The project should be now visible to the public on the https address Heroku provides.

The live version of this project deployed to Heroku can be found here.

Back to top

Credits

Content

Product images used from the official product catalog of the company.
Banners and graphics created by myself using Pixabay and Canva.
Product description used from product cataloque

Inspiration & Sources

Code Institute Ecommerce project
Django Official Website
Youtube videos and Udemy courses
Django related books

Thanks

Brighter shop manager

Back to top

About

online market

Topics

github javascript python heroku html bootstrap django paypal stripe css3 sqlite aws-s3 postgresql vscode virtualenv travis adobe

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages