Giter Club home page Giter Club logo

puffins's Introduction

Build Status

Puffins

Puffins

"Always be yourself. Unless you can be a puffin, then always be a puffin."

We at puffins are dedicated to provide beautiful, uniting and sustainable products to individuals, love birds and families. With our mehtod to only produce whats demanded by our customers and delivering longlasting, high quality products we want to counter the biggest problems of the western society. Our products are locally produced in Europe and we only use materials where we know the origin, to guarantee 100% ethical and sustainable products.

This site is the final Milestone Projects that made up the Full Stack Web Development Course at Code Institute. The core requirements focus on bulding a fullstack site with the use of Django, Python, JavaScript, HTML, CSS and a relational database. The final result is hosted on Heroku, while storing static and media files on an S3 Cloudstorage from AWS. The store is connected to Stripe.

To test the site incl. the checkout process please use the test credit card number provided in the Stripe Documentation:

  • Number: 4242 4242 4242 4242
  • Exp. Date: Anything (e.g. 02/24)
  • CVC: Anything (e.g. 007)

Visit the deployed site: puffins

Table of Content

UXD Considerations

Purpose and Aim of the Project

The aim of this project is to create an ecommerce shop for sustainable clothing especially targeted towards young couples and families. The goal is to create this shop as an interactive fullstack website that allows customers to browse products, make purchases by credit card and if registered manage a wishlist or see their orderhistory. These goals should be supported by providing a clean and easy to use website that allows seamless navigation and has a low bounce rate.

Design process

Before laying out the project and creating an initial design market research was done. During this research phase the following questions were also acknowledged:

  • How do other stores look?
  • What are typical design patterns used across stores?
  • Which site are appealing to me?
  • Which kind of stores fit to my business idea?

The final layout was influenced by the following sites:

Target group

The shop is targeted to women and men alike. The typical age of a shopper is estimated to be between 25 and 40 years. Especially couples and small families are targeted with the products. The families usually have 1-2 children in the age of 6 month up to 12 years. All customers have mindset respecting the environment and favoring sustainable products. The income of the target group is an average mid to high household income. Furthermore the target group has a passion for living outdoors and owning sustainable high quality products to use in day to day life.

Epics & User Stories

Before the start of the Project the Epics and User Stories were defined and written out to have complete set of necessary features to get the site going. In total 6 Epics were defined and user stories were broken down into 3 user groups:

  • regular site visitors
  • registered users
  • the store manager/owner.

EPIC: Browse Site

As a site visitor, i want to...

  • ... access the website with any device (smartphone, tablet, desktop), so that i am able to visit the shop anytime and anywhere.
  • ... have easy navigation, to quickly solve the reason for my visit.
  • ... have information about the brand, to get to know the company and understand their mission and story.
  • ... be able to contact the company, so that i quickly can get in touch if i have a question or issue.

Epic: Browse Products

As a site visitor, i want to...

  • ... browse products by category and productline, so that i quickly find what i am looking for.
  • ... sort products, to adjust the order according to my needs.
  • ... be able to search for specific products, to quickly get what i need.
  • ... to access product details, to get more information on an item.
  • ... be able to choose a size, to order the necessary items according to my needs.

Epic: Manage Cart & Make Purchase

As a site visitor, i want to...

  • ... see all my items in a cart, so that i have an overview of my potential purchase.
  • ... be able to reduce / increase quantity, so that i can order my prefered amount.
  • ... be able to remove an item from my cart, so that i can manage my cart efficiently.
  • ... be able to checkout from the cart view, so that i can quickly finish my purchase.
  • ... be able to pay a order by credit card, so that i don't have to deal with an invoice and money transfer.
  • ... receive an order confirmation, so that i know my order was received.

As a registered user, i want to...

  • ... have my details prefilled from my profile, so that i quickly can finish my purchase

Epic: Registration & Useraccount

As a site visitor, i want to...

  • ... be able to sign up to the store, so that i can track orders and have my data prefilled in the order form.

As a registered user, i want to...

  • ... be able to login, so that i can access my useraccount.
  • ... be able to see my order history, so that i know what i've purchased in the past.
  • ... manage my personal details, so that i can quickly update my data if something changes.

Epic: Manage Wishlist

As a registered user, i want to...

  • ... add/remove items to my wishlist, so that can save items for later purchase to my useraccount.
  • ... have an overview of my wishlist, to get an overview of my already added products.

Epic: Store Management

As a store owner, i want to...

  • ... be able to manage the products, categories, productlines and productvariants, so that i have an overview of my inventory.
  • ... manage blog entries, to add new/edit posts on the blog to provide customers some additional value.
  • ... manage FAQs, so that i can quickly update often asked questions

Layout, Styling & Wireframes

The wireframes were created in Figma. Figma is a cloud based desing tool which allows you to rapidly create prototypes, wireframes and layouts Figma

The whole figma project can be accessed here: Puffins - Wireframes

Logo

The puffins logo was created by polardots. It shows a vector style puffin stand upright and is signaling joy to the world!

The puffins text logo was created by me with Figma.

Puffins Textlogo

Color Scheme

The color scheme was chosen with the goal to represent a lightweight modern website. The colors are taken from the base colors of the puffin bird.

Color Scheme

Components

Components were created in Figma:

Puffins - Components

Wireframes

The whole figma project can be accessed here: Puffins - Wireframes

Mobile:

Puffins - Mobile

Tablet/Medium-width screen:

Puffins - Mobile

Desktop - large screen:

Puffins - Mobile

Final Layout

Puffins

Information Architecture

Application Framework

The project brief required to base the project on the Django application framework - "The web framework for perfectionists with deadlines". Django is an open source python web framework that takes away the burdens of regular web development and allows developers to quickly build a secure, scalable and state-of-the art app.

Database Selection

During development the built-in SQLite3 database from django is used. However, for the deployment to Heroku a switch to postgressql was undertaken. Django’s authentication system in combination with django-allauth is used to manage users and permissions. The structure of the products and checkout app are based on the Boutique Ado project from Code Institute and customized to the specific project needs.

Data Models

Categories

Name Type Example Data
name CharField(max_length=254) grown_ups
display_text CharField(max_length=254) Grown Ups
image ImageField(null=True, blank=True) grownup_puffin.png
image_url URLField(max_length=1024, null=True, blank=True) https://thepuffins.s3.amazonaws.com/media/grownup_puffin.png

Productline

Name Type Example Data
name CharField(max_length=50) tshirt
display_text CharField(max_length=254) T-Shirt

Products

Name Type Example Data
category ForeignKey( 'Category') 1
productline ForeignKey( 'ProductLine') 1
name CharField( max_length = 254 ) passionate
display_text CharField( max_length = 254 ) Passionate Puffin
price DecimalField(max_digits=6, decimal_places=2, validators=[MinValueValidator(0.01)], blank=True) 49.95
discount_price DecimalField(max_digits=6, decimal_places=2, validators=[MinValueValidator(0.01)], blank=True) 39,96
is_on_sale BooleanField(default=False) True
avail_for_pre_order BooleanField( default = False ) False
date_of_dispatch CharField( max_length = 254 , blank = True , null = True ) null
discontinued BooleanField( default = False ) false
image ImageField( null = True , blank = True ) passionatepuffin.png
image_url URLField( max_length = 1024 , null = True , blank = True ) https://thepuffins.s3.amazonaws.com/media/passionatepuffin.png
description TextField( null = True , blank = True ) Made with love and passion: the passionate puffin with its super soft, lightweight cotton fabric and neps in contrast colour has the perfect fit. Wear it on its own or as a base layer under a cardigan. Made the Puffins way, from organic linen from the EU for a great sustainable tee. T-shirts made from linen make you stay cool in the summer . They are more durable and also feel lighter.
is_featured BooleanField( default = False , null = True , blank = True ) True
color CharField( max_length = 254 , null = True ) grey
material_1 CharField( max_length = 254 , null = True , blank = True ) linen
material_2 CharField( max_length = 254 , null = True , blank = True ) ""

Productsize

Name Type Example
SIZE_CHOICES [('NO', 'None'), ('XS', 'Extra Small'), ('S', 'Small'), ('M', 'Medium'), ('L', 'Large'), ('XL', 'Extra Large'),]
shirt_size CharField( max_length = 2 , choices =SIZE_CHOICES) XS

Productvariant

Name Type Example
product ForeignKey('Product', on_delete=models.CASCADE) 1
size ForeignKey('ProductSize', on_delete=models.CASCADE) XS
quantity IntegerField( validators =[MinValueValidator( 0.0 )]) 9

Order

Name Type
order_number CharField( max_length = 32 , null = False , editable = False )
user_profile ForeignKey(UserAccount, on_delete =models.SET_NULL,null = True , blank = True ,related_name = 'orders' )
order_status CharField( max_length = 1 , choices =STATUS_OPTIONS, default = '0' )
first_name CharField( max_length = 50 , null = False , blank = False )
last_name CharField( max_length = 50 , null = False , blank = False )
email EmailField( max_length = 254 , null = False , blank = False )
phone_number CharField( max_length = 20 , blank = True )
country CountryField( blank_label = 'Country' , null = False , blank = False )
zipcode CharField( max_length = 20 , null = True , blank = False )
town_or_city CharField( max_length = 40 , null = False , blank = False )
street_address1 CharField( max_length = 80 , null = False , blank = False )
street_address2 CharField( max_length = 80 , blank = True )
total_order DecimalField( max_digits = 10 , decimal_places = 2 , null = False , default = 0 )
total_tax DecimalField( max_digits = 10 , decimal_places = 2 , null = False , default = 0 )
tax_rate DecimalField( max_digits = 6 , decimal_places = 2 , null = False , default = 0 )
delivery_cost DecimalField( max_digits = 10 , decimal_places = 2 , null = False , default = 0 )
grand_total DecimalField( max_digits = 10 , decimal_places = 2 , null = False , default = 0 )
date_order_placed DateTimeField( auto_now_add = True )
original_cart TextField( null = False , blank = False , default = '' )
stripe_pid CharField( max_length = 254 , null = False , blank = False , default = '' )

OrderLineItem

Name Type
order ForeignKey(Order, null = False , blank = False , on_delete =models.CASCADE, related_name = "lineitems" )
productvariant ForeignKey(ProductVariant, null = False , blank = False , on_delete =models.CASCADE)
quantity IntegerField( blank = False , default = 0 )
lineitem_total DecimalField( max_digits = 6 , decimal_places = 2 , null = False , default = 0 , editable = False )

Useraccount

Name Type
user OneToOneField(User, on_delete =models.CASCADE)
default_phone_number CharField( max_length = 20 , null = True , blank = True )
default_street_address1 CharField( max_length = 80 , null = True , blank = True )
default_street_address2 CharField( max_length = 80 , null = True , blank = True )
default_zipcode CharField( max_length = 20 , null = True , blank = True )
default_town_or_city CharField( max_length = 40 , null = True , blank = True )
default_country CountryField( blank_label = 'Country' , null = True , blank = True )

Wishlist

Name Type
user_profile OneToOneField(UserAccount, on_delete =models.CASCADE, null = False , blank = False)
wished_products ManyToManyField(Product, related_name = 'userwishlists' )

FAQs

Name Type
CATEGORY_CHOICES [( '1' , 'General' ), ( '2' , 'Return' ), ( '3' , 'Pre Order' ), ( '4' , 'Delivery' ), ( '5' , 'Payment' ),]
category CharField( max_length = 1 , choices =CATEGORY_CHOICES)
name CharField(max_length = 120 , null = True, blank = False )
title CharField(max_length = 120 , null = True , blank = False )
answer TextField()
created_at DateTimeField(auto_now_add = True ,null = False )
updated_at DateTimeField(auto_now = True , null = False)

Blog

Name Type
author ForeignKey(UserAccount, on_delete =models.CASCADE, null = False , blank = True )
title CharField(max_length=120, null=True, blank=False)
subtitle CharField(max_length=180, null=True, blank=False)
body TextField()
slug SlugField(unique=True, max_length=250, default=None)
created_at DateTimeField(auto_now_add=True, null=False)
updated_at DateTimeField(auto_now=True, null=False)
title_image ImageField(null=True, blank=True)
title_image_url_1 URLField(max_length=1024, null=True, blank=True)
content_image_1 ImageField(null=True, blank=True)
content_image_url_1 URLField(max_length=1024, null=True, blank=True)
content_image_2 ImageField(null=True, blank=True)
content_image_url_2 URLField(max_length=1024, null=True, blank=True)

Features

The following features were thought of.

:white_check_mark =Features that made it into the deployed Project
🧰 = Features that are interessting for Future Development

Navbar

  • Logged in and non-logged in users see different options βœ…
  • Searchbar opens below nav when search icon is clicked βœ…
  • Fixed to top and transparent βœ…
  • Changes background and font color on scroll βœ…
  • Changes background and font color if collapsed on small screens βœ…

Footer

  • Logo is displayed βœ…
  • Quicklinks to products are available βœ…
  • Contact details are accessabile βœ…
  • Link to About page is present βœ…
  • Sign Up for Newsletter subscription 🧰

Landing Page

  • Caroussel with image also behind nav βœ…
  • Random featured products are chosen to be displayed in caroussel βœ…
  • Images for featured icons are different from the product picture to be even more appealing 🧰

About Page

  • Vision is diplayed βœ…
  • Short introduction to company is provided βœ…
  • Images of company founders and founder portrait 🧰

Help / Contact Page

  • FAQ are diplayed βœ…
  • FAQs are categorized βœ…
  • Contact form available for User βœ…
  • Chat Option to provide direct support 🧰

Shop

  • Products can be browsed by Category (e.g. Kids) βœ…
  • Products can be browsed by Category & Productline (e.g. Kids -> T-Shirt) βœ…
  • Products can be sorted by...
    ...Featured Products βœ…
    ...Price βœ… ...Color βœ…
    ...Name βœ…
  • Products have different labels based on
    Normal Product βœ…
    Sale Product βœ…
    Pre-Order Productn:white_check_mark:
  • Product Details have a Select Option if different sizes are available βœ…
  • Product Details have only a "Add to Cart" button if unisize item βœ…
  • Partnerlook Section sorts products by name to display matching items side by side βœ…
  • Product can be shared on social media 🧰

If registered:

  • Product Details allow user to add/remove product to/from wishlist βœ…

Highlights

  • Products a prominently display βœ…
  • only featured items are rendered βœ…

Cart

  • Cart is present in Side Drawer Container βœ…
  • Newest Item is always presented on top βœ…
  • Total inkl. Tax & Shipping βœ…
  • Checkout straight from Cart Side Drawer βœ…
  • Add to cart renders updated cart via Ajax-Request βœ…
  • Increase/Decrease Quantity request via Ajax within Side Drawer Cart 🧰
  • Remove Items from Cart ia Ajax-Request within Side Drawer Cart 🧰
  • Reserve requested item & quantity to for 10 Min. to avoid checkouts with unavailable products 🧰

If registered:

  • attach cart to userprofile instead of saving to session 🧰

Checkout

  • Order summary βœ…
  • Form to enter shipping address βœ…
  • Payment via Credit Card βœ…
  • Users gets order confirmation by mail βœ…
  • general discount codes can be used 🧰
  • personalized discount codes can be used 🧰
  • Users receives order updates when order status changes 🧰
  • Apple Pay integration 🧰

If registered:

  • Form is prefilled with available user data βœ…
  • Form data can be saved to userprofile βœ…

Sign Up & login:

  • Sign up can be undertaken βœ…
  • Sign up also collected first and last name βœ…
  • login can be undertaken βœ…
  • Password reset βœ…
  • Delete account 🧰
  • Sign in with apple or google account 🧰

Registered Users: Useraccount

  • User can look up saved address information βœ…
  • User can update address information βœ…
  • User can see past orderes βœ…
  • User can enter detail view of past orders βœ…

Registered Users: Wishlist

  • User can add/remove items to personal wishlist from product details βœ…
  • User can view stored wishlist items βœ…
  • Users can add items to wishlist from product overview 🧰
  • users can add items and size to wishlist 🧰
  • users can immediatley transform wishlist into order 🧰

Store Management:

  • ... can create/read/update/delete products in Django-Admin-View βœ…
  • ... can create/read/update/delete blogposts in Django-Admin-View βœ…
  • ... can create/read/update/delete FAQs in Django-Admin-View βœ…
  • ... can create/read/update/delete Users in Django-Admin-View βœ…
  • ... Order Management system 🧰

Newsletter

  • User can sign up for newsletter 🧰
  • User get a coupon code for newsletter subscription 🧰
  • User can manage their subscription 🧰

Technologies Applied

The following technologie were used during the development of the project.

Databases

Languages

Frameworks

Libraries, Tools

Hosting

Testing

A detailed description about the testing process and results can be found in the TESTING.md. To give a brief overlook of the feature testing this table gives a codensed overview of the tested, features, devices, browsers and results:

Test Case iPhone Safari iPhone Chrome iPhone Edge iPad Safari iPad Edge iPad Brave Mac Edge Mac Safari Mac Chrome
Test Navbar βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Footer βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Landing Page βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
About Page βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Help / Contact Page βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Shop βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Highlights βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Cart βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Checkout βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Sign Up βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Registered Users: Useraccount βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…
Registered Users: Wishlist βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ… βœ…

Deployment

This site is deployed to heroku and the versioning was done with git and the Repository is hosted on Github.

Prerequisites to work with this Site

This project can be used for development with the following tools:

  • IDE of Choie (i prefer Gitpod)
  • Python3, PIP & Git should be installed

Furthermore accounts with the following services are used in this project:

Local Deployment: Step-by-Step Instructions

Official Github Documentation on cloning a repositiory: Github - Cloning Repos

  1. Navigate to Mainpage of the repository
  2. Click on "Code" button
  3. Choose "Clone with HTTPs" & copy URL
  4. Open Terminal
  5. Change the current working directory to prefered location
  6. Type git clone and past copied URL git clone https://github.com/p0wen/puffins.git
  7. Press Enter to create local Clone - Make sure your environment supports python3 -
  8. Type pip3 install -r requirements.txt into Terminal
  9. Setup the environment variables. This process is differnet depending on the used IDE. Gitpod supports global Environments for the development process. Therefore they were stored in the settings. The following variables are needed:
    DEVELOPMENT=True   
    STRIPE_PUBLIC_KEY = <YOUR STRIPE_PUBLIC_KEY>
    STRIPE_SECRET_KEY = <YOUR STRIPE_SECRET_KEY>
    STRIPE_WH_SECRET = <YOUR STRIPE_WH_SECRET>
    
  10. Migrate the models and create the database by typing the following commands into the terminal:
    1. python3 manage.py makemigrations
    2. python3 manage.py migrate
  11. Import the provided fixtures in the following order (copy&paste if you like):
    1. python3 manage.py loaddata categories
    2. python3 manage.py loaddata productline
    3. python3 manage.py loaddata products
    4. python3 manage.py loaddata proudctsize
    5. python3 manage.py loaddata productvariants
    6. python3 manage.py loaddata blog
    7. python3 manage.py loaddata faq
  12. Create a superuser for accessing the django admin view with the following command: python3 manage.py createsuperuser You will be asked for an email address, username and password.
  13. You should be all set and when using the command python3 manage.py runserver the project should run.
  14. You can access the django admin view by adding ~/admin to the end of your (local) URL.

Deployment to Heroku: Step-by-Step Instructions

This project is deployed to Heroku. For the deployment the following steps were/are necessary:

  1. Create/Log in to your Heroku account and create a new App.
  2. Install Heroku Add-on Heroku Postgres from the Resources tab. The free Hobby Dev version is fine. Now click the Provision button to add it to your project.
  3. Create requirements.txt from your project with the help of pip3 freeze --local > requirements.txt (already provided within the repository)
  4. Create a Procfile echo web: gunicorn puffins.wsgi:application > Procfile (already provided within the repository)
  5. Commit changes to Git git add . followed by git commit -m "Deploy: Updated Procfile" (already provided within the repository)
  6. Set the environment variables in Heroku Settings > Reveal Config Variables The following Variables must be set:
    USE_AWS = TRUE
    AWS_ACCESS_KEY_ID = <YOUR AWS_ACCESS_KEY_ID>
    AWS_SECRET_ACCESS_KEY = <YOUR AWS_SECRET_ACCESS_KEY>
    DATABASE_URL = <YOUR DATABASE_URL> (Set by Heroku Postgres)
    EMAIL_HOST_USER = <YOUR EMAIL_HOST_USER>
    EMAIL_HOST_PASSWORD = <YOUR EMAIL_HOST_PASSWORD>
    DEFAULT_FROM_EMAIL = <YOUR DEFAULT_FROM_EMAIL>
    STRIPE_PUBLIC_KEY = <YOUR STRIPE_PUBLIC_KEY>
    STRIPE_SECRET_KEY = <YOUR STRIPE_SECRET_KEY>
    STRIPE_WH_SECRET = <YOUR STRIPE_WH_SECRET>
    
  7. Extract the DATABASE_URL Value from the Heroku Settings and set it up in your IDE or local .env file. Make sure to keep this DATABASE_URL a secret and definitly don't commit it to Github.
  8. To test if the Postgres database is connected to your IDE you can make use of the command python3 manage.py showmigrations. This should show undone migrations for all models.
  9. Now migrate the models and create the postgres database on heroku by typing the following commands into the terminal:
    1. python3 manage.py makemigrations
    2. python3 manage.py migrate
  10. To setup the data in the database import the provided fixtures in the following order (copy&paste if you like):
    1. python3 manage.py loaddata categories
    2. python3 manage.py loaddata productline
    3. python3 manage.py loaddata products
    4. python3 manage.py loaddata proudctsize
    5. python3 manage.py loaddata productvariants
    6. python3 manage.py loaddata blog
    7. python3 manage.py loaddata faq
  11. Create a superuser for the Postgres database for accessing the django admin view with the following command: python3 manage.py createsuperuser You will be asked for an email address, username and password.
  12. Log in to heroku from your terminal heroku login
  13. Add exisitng repository to Heroku heroku git:remote -a <your repository>
  14. Push changes to Heroku git push heroku master
  15. Now go to your S3 account. There bucket should already contain a folder called static. To upload the product images create a new folder called media. And add the files to this folder. Make sure to grant public read access to these objects.
  16. Finally, visit the app url from heroku and check out your great site!

References, Credits & Acknowledgment

Credits

Content & Products

Media

Category Images:

Acknowledgements

Special Thanks to...

References

Fair use disclaimer

This is for educational use

puffins's People

Contributors

p0wen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.