Intro

This task is the final project for the 'Full Stack Frameworks with Django' module of the Code Institute Full Stack Software Development course. This project is an eCommerce shop front to host decorative pins, keychains and cute stationery. The name chosen for the website is nicknacks, which means in free translation "this and that". The name choice will allow administrator to expand on the produce offered.

The site is worked within Django structure, sent live on Heroku, utilizes AWS S3 to have media and static records. Locally, it utilizes the inherent Django Db.sqlite3 information base, though when conveyed live it uses Heroku's Postgres information base. Authentication functionality is provided by Django's Allauth: administrator superuser can add and alter things in the Products and Categories applications, while visiting clients can enlist and login, accessing vestige depictions and their request history in the Checkout and Profile applications. A section has also been made available to the enlisted client, to add their own drawings, which can in due course be used as designs of their own. This is analysed furthermore in this readme, under the relevant heading.

• Goals
• Target Audience
• Business Goals
• Customer goals
• User Stories
  • Viewing and Navigation
  • Registration and User Accounts
  • Sorting and searching
  • Admin and Store Management
• Design
  • Font
  • Color Scheme
  • Wireframes
• Product Features
• Users Features
• User Stories Testing
• Error pages testing
  • 404
  • 500
• Requirements
• Local deployment
• Deployment on Heroku

Goals

The main goal of the nicknacks is to sell beautiful hand made accessories. Secondly, through that website people can order something they have designed and desire to have made into piece of accessory or piece of stationery

Target Audience

• Users aged 8 to 80
• Users interested in cute accessories and stationery
• Users with interest in accessory and stationery design and production for their own use

Business Goals

• To create a platform that enables the prospect client to find and purchase the product they like
• To enable prospect user to submit their design and have it either just stored or even produced
• In order to increase the retention, encourage users to register
• Offer a presentable design of the website, with the use of neumorphic design, to increase aesthetic appeal
• Offer easy interaction on the page

Customer goals

• Finding product that fits their taste
• Buy product through an easy payment flow
• Upload their own designs and store them in their registered account
• Place order for their designs, to have them produced
• See their previous purchases

User Stories

Viewing and Navigation

• As a shopper I want to be able to view the list of products to purchase some
• As a shopper I want to be able to view individual product details to identify the price and description
• As a shopper I want to be able to quickly identify special offers to take advantage of special savings on products I'd like to buy
• As a shopper I want to be able to easily view the total of my purchases at any time to see the history of my purchases and how much I spent.

Registration and User Accounts

• As a registered shopper I want to be able to easily register for an account so I can have a personal account, be able to see what I purchased or designs I uploaded
• As a registered shopper I want to be able to easily login or logout so I can access my personal account information
• As a registered shopper I want to be able to easily recover my password in case I forget it so I can recover access to my account
• As a registered shopper I want to be able to receive an email confirmation after registering so I can verify that my account registration was successful
• As a registered shopper I want to be able to have a personalised user profile so I can view my personal order history and order confirmations and save my payment information
• As a registered shopper I want to be able to submit my personalised design, to be able to order it if I ever wish to
• As a registered shopper I want to be able to place an order for my personalised design so I can have my design made into pin, keyring or a piece of stationery
• As a registered shopper I want to be able to easily contact the store owner with any queries I might have so I can ask any questions I may have

Sorting and searching

• As a shopper I want to be able to sort the list of available products so I can easily identify the best rated, best priced and categorically sorted products
• As a shopper I want to be able to sort a specific category of products so I can find best priced or best rated product in a specific category or sort the product in that category by name
• As a shopper I want to be able to sort multiple categories of products simultaneously so I can find the best priced or best rated products across board categories, such as pins or keyrings
• As a shopper I want to be able to search for a product by name or description so I can find a specific product I'd like to purchase

Purchasing and Checkout

• As a registered shopper I want to be able to easily select quantity of a product when purchasing it so I can ensure I am selecting correct product and a correct quantity
• As a registered shopper I want to be able to view items in my bag to be purchased so I can identify the total cost of my purchase and all items I will receive
• As a registered shopper I want to be able to adjust the quantity of individual items in my bag so I can easily make changes to my purchase before checkout
• As a registered shopper I want to be able to easily enter my payment information so I can check out quickly and with no hassle
• As a registered shopper I want to be able to feel that my personal and payment information is safe and secure so I can confidently provide the needed informatoin to make a purchase
• As a registered shopper I want to be able to view an order confirmation after checkout so I can verify that I have not made any mistakes
• As a registered shopper I want to be able to receive an email confirmation after checking out so I can keep the records of my purchases

Admin and Store Management

• As a store owner I want to be able to add a product as this would enable me to add new items to my store
• As a store owner I want to be able to Edit/Update product to apply any changes, be it in price, description, image or other product criteria
• As a store owner I want to be able to delete a product remove product if they are no longer for sale

Design

Font

Throughout the project there is only one font used, which is Montserrat at various weighs. The aim is to make this website as minimalist and clean as possible, to make the neumorphic effect stand out more.

Color Scheme

The use of neumorphic design througout the page influenced a decision of one main color being used. The color used throughout the page is pale and light, almost white, as this ensures best effectivens of the design style.

Wireframes

All Products - Mobile and PC

Product Detail - Mobile and PC

Register Account - Mobile and PC

Sign In - Mobile and PC

• Products to purchase through an ecommerce system
• A dedicated Design section for the registered user to upload their own designs
• A dedicated Order section for the registered user to order their own designs
• Administration panel so superuser can add, edit and delete products
• Profile page where registered shopper can see their order history
• Contact button through which both registered and not registered user may send a message to the superuser.

All pages share navigation bar with logo to the left, which once clicked on, takes you home from any page.

In the middle there are four call to action buttons:

• Everything - Option that returns a dropdown list with Items sorted in accordance to price, rating, category and just last option, everything
• Pins - Option returning the main hero of this website, which are all Pins. Upon clicking on this option the user will be able to choose from Animals, Things, People, Plants and finally, just head to all Pins.
• Randoms - By clicking on this the user will be faced with three choices, Keychains, Stickers and Stationery
• Special Offers - this dropdown list contains two positions which are visible to the non logged users, which are New and Sale items, as well as the position which is only available if user is logged in. This is Order Your Own, where user can order designs they have uploaded, going by sku of the Design uploaded To the right corner in the PC view there are two CTA buttons: My Account and a Basket.
• My Account: For the registered and while logged in user that is not a superuser, they will be able to add Custom Drawing/Design, Check out their Profile, which contains history of purchases. By clicking on this option, the logged in user will be able to log out from their session For the regisered and logged in as a superuser, the user will be able to do all of the above plus Manage the main products of the ecommerce and see all of the uploaded Designs by registered users.
• Basket This option is available to both logged in and not logged in users. The difference is, only logged in user will be able to successfully check out with the items, as this option is for the time being only made available to the logged in user.

Future Features

• Styling of the allauth emails - the future feature, which could not be addressed due to time constrains, is to make the confirmation emails to the user more aesthetically pleasing, styled with the same neumorphic flair
• Customised Design display and ordering - a future feature would be to streamline the ordering process of the user's design. The user should be able to see all designs they have uploaded. One major flaw that the current method displays is the necessity of the sku number, which the user might not remember after uploading of their design.

Product Features

Feature	Action	Effect
Logo (upper left corner)	Hover over	The address on hover is showing as home page
Search bar	Entered "Space",	one product is listed under this name - correct The summary shows message "1 Products found for 'space'"
All button, bringing back to all products	Click on All button	Linked correctly
Everything	Click on By Price	Items appear sorted ascending, from low price to high
	Click on By Rating	Items appear sorted descending, from high rating to low
	Click on By Category	Categories of Items become sorted alphabetically
	Click on Everything	All items are displayed, sorted by SKU
Pins	Click on Animals	Pins from that Category are displayed, the badge on top of the page also states what Category we are at.
	Click on Things	Pins from that Category are displayed, the badge on top of the page also states what Category we are at.
	Click on People	Pins from that Category are displayed, the badge on top of the page also states what Category we are at.
	Click on Plants	Pins from that Category are displayed, the badge on top of the page also states what Category we are at.
	Click on All Pins	All Pins are displaying now
Randoms	Click on Keychains	Keychains are displayed, the badge on top of the page states same.
	Click on Stickers	Stickers are displayed, along with badge
	Click on Stationery	Stationery and badge are here
Special Offers	Click on New Arrivals	New Arrivals and badge are here
	Click on Sale	Pins from that Category are displayed, the badge on top of the page also states what Category we are at.
My Account	Click on Register	Sign up form appears Form sends Confirmation email appears in the email box Clicked on the confirmation email - Confirm email address page appears Logged in with newly created account - the success message appears and I am now logged in Upon clicking Confirm, a success message appears and a signing page is returned
	Click on Login	The address on hover is showing as home page
Basket	Bag empty	Click on Keep Shopping button, brings me back to all Products page
	Bag with content	Increase and Decrease quantity buttons work Price updates when Update option is clicked Price in Grand total Updates over the 10% Delivery Free Delivery treshold is calculated correctly and called back to user
Footer	Test all of the Social Media/Contact links	All open in a separate tab and bring the user to the said website
	Home page
Shop Now button	Clicked on	Brings me to a page with all products
	All Products page
Sort Products Dropdown	Sort testing each Condition	Price (low to high) - sorts according to price, from cheapest to dearest Price (high to low) - sorts according to price, from dearest to cheapest Rating (low to high) - sorts rating from lowest Rating (high to low) - sorts rating from highest. Name (A-Z) - sorts Products alphabetically Name (Z-A) - sorts products reverse-alphabetically Category (A-Z) - sorts Categories of products alphabetically Category (Z-A) - sorts Products by Categories sorted reverse-alphabetically
Superuser - editing the product details	Click on the Edit option underneath one of the products	A Product Management Edit a Product form is rendered and a warning message is triggered in upper right corner Changed Category and Name,saved Name and Category successfully changed, confirmed with a success toast rendered in upper right corner
	Click on the Delete option	Product is immediately deleted and a success toast confirming deletion is rendered in the upper right corner of the page
Adding product to the basket	Click on the Product and click Add to Basket	Basket total updates to the correct amount, success toast confirms the product was added to the bag
Navigating from Product Detail back to All Products	Click on the Keep Shopping button	A page with all product is rendered
Checking out	Click on the Shopping Bag, click on Secure Checkout	Non registered user - a sign in page renders with option to register, if user is not yet registered Registered User - A Checkout page is rendered with most information saved as per users account. User can also see the Order Summary to the right of the form Entered card details and name, after which clicked on the Complete Transaction button A thank you page is rendered, with a summary of order as well as the success toast renders in upper right corner Confirmation email arrives to the email box

For testing the Stripe checkout use the following:

 Card number: 4242 4242 4242 4242
 CVC_: any 3 digits
 Card expiry date: any future date
 ZIP/Postcode: any 5 digits

Users Features

Feature	Action	Effect
Registration	Click on My Account and My Profile	Click on MyAccount and Register A Sign Up form is rendered, fill in the blanks User Exists - an error is rendered above the user name "User is already registered with this email address" Register unregistered email address, press send A confirmation email is sent to the provided email address
Login	Click on My Account and My Profile	Click on MyAccount and Login A Sign In form renders Wrong Password entered, an error is generated "The username and/or password you specified are not correct" Log in with the correct password Home page is rendered
Logout	Click on My Account and My Profile	Click on MyAccount and Logout A page renders confirming "Are you sure you want to sign out" Click Sign Out A success toast is rendered in upper right corner of the screen
Change Password	Click on My Account and My Profile	Click on MyAccount and Login Click Forgot Password Enter email you are registered under A page renders confirmation "We have sent you an email. Please contact us if you do not receive it within a few minutes" When clicked, it returns a change password form
View profile	Click on My Account and My Profile	Log in and click on MyAccount and My Profile My Profile page is rendered with Default Delivery Informaton and history of purchasees
Update profile	Click on My Account and My Profile	While in My Profile, fill in the new details and click Update Information A success toast is rendered in upper right corner of the screen Information is updated

User Stories Testing

User Story	Testing
As a shopper I want to be able to view the list of products to purchase some	The list of products is available as per below Home page - click on Shop Now buttonEverything - choose the desired filtering or choose 'Everything'
As a shopper I want to be able to view individual product details to identify the price and description	While at All Products click on a sample Product The Price and Description is clearly visible
As a shopper I want to be able to quickly identify special offers to take advantage of special savings on products I'd like to buy	One of the CTA buttons on navbar is marked as Special Offers and is visible from every page of the website
As a shopper I want to be able to easily view the total of my purchases at any time to see the history of my purchases and how much I spent	This feature can be accessed on My Account -> My Profile History of orders is visible next to the profile details
As a registered shopper I want to be able to easily register for an account so I can have a personal account, be able to see what I purchased	As soon as the unregistered user is ready to check out and complete a purchase, the site renders a Sign Up call to action page By clicking on My Account and Register, the unregistered user may easily register and from then on use account to keep record of their purchases
As a registered shopper I want to be able to easily login so I can access my personal account information	By clicking on My Account, user's acount is easily accessible and editable
As a registered shopper I want to be able to easily recover my password in case I forget it so I can recover access to my account	Upon login attempt there is a 'Forgot Password' option From there on, the user may request a password resetting email Upon receipt of the email, user will be able to click on the link and easily amend or set a new password
As a registered shopper I want to be able to receive an email confirmation after registering so I can verify that my account registration was successful	Shortly after registration, a confirmation email arrives to the inbox of the email provided
As a registered shopper I want to be able to have a personalised user profile so I can view my personal order history and order confirmations and save my payment information	The profile can be accessed through My Account button in upper right corner of the page
As a registered shopper I want to be able to add my own personalised design	Upload of the Design via Design Management accessible through My Account option
As a registered shopper I want to be able to place an order for my personalised design so I can have my design made into pin, keyring or a piece of stationery	This feature is available from Special Offers option on the navbar by clicking on Order Your Own Feature will be improved by building a dedicated display of the designs uploaded, with button to order directly from there This is a future feature
As a registered shopper I want to be able to easily contact the store owner with any queries I might have so I can ask any questions I may have	The Contact Us button is available in a footer and accessible from every part of the website. The Contact Us form opens in a separate tab and once message is sent, a confirmation template renders to inform user that someone will be in touch
As a shopper I want to be able to sort the list of available products so I can easily identify the best rated, best priced and categorically sorted products	This option is available by accessing 'Everything' option within the navbar
As a shopper I want to be able to sort a specific category of products so I can find best priced or best rated product in a specific category or sort the product in that category by name	The sorting option is available on every page in a format of a dropdown.
As a shopper I want to be able to sort multiple categories of products simultaneously so I can find the best priced or best rated products across board categories, such as pins or keyrings	By clicking on Everything or All Pins, user may choose from either all products or all pins. Additionally there are badges displayed on top of the All Pins page, to inform what categories are being displayed
As a shopper I want to be able to search for a product by name or description so I can find a specific product I'd like to purchase	The option of a Search bar is available at all times, it returns key words by the product name or from within a products description
As a registered shopper I want to be able to easily select quantity of a product when purchasing it so I can ensure I am selecting correct product and a correct quantity	While adding product to the basket, user chooses the quantity of the product chosen While in the basket, and preparing for check out, user can edit the quantity or delete the product entirely by clicking remove
As a registered shopper I want to be able to view items in my bag to be purchased so I can identify the total cost of my purchase and all items I will receive	The current total is constantly displayed in upper right corner, under basket.
As a registered shopper I want to be able to adjust the quantity of individual items in my bag so I can easily make changes to my purchase before checkout	The quantity can be amended when user is in the basket, preparing for check out
As a registered shopper I want to be able to easily enter my payment information so I can check out quickly and with no hassle	The payment details are entered after clicking Check out
As a registered shopper I want to be able to feel that my personal and payment information is safe and secure so I can confidently provide the needed informatoin to make a purchase	The Check out is only possible if the user is logged in. This way user's details, if they choose to save them, are securely stored
As a registered shopper I want to be able to view an order confirmation after checkout so I can verify that I have not made any mistakes	The order confirmation is displayed as well as emailed to the email address provided
As a registered shopper I want to be able to receive an email confirmation after checking out so I can keep the records of my purchases	Email confirmation is sent instantanously after the product(s) is/are purchased
As a store owner I want to be able to add a product as this would enable me to add new items to my store	This option is available to the superuser and while logged in Choose My Account and Product Management This will render a Product upload form
As a store owner I want to be able to Edit/Update product to apply any changes, be it in price, description, image or other product criteria	While logged in as a superuser, go to the product in question and click edit button on all products view or on a product detail page From then on enter any details you want to change, including images Upon submitting, a success toast appears
As a store owner I want to be able to delete a product remove product if they are no longer for sale	Whle logged in as a superuser, click on Delete option by product that needs to be deleted A success toast appears and the product is gone from the system

Error pages testing

Error	Testing
404	Added a random string of characters to the deployed link. Example: http://ms4nicknacks.herokuapp.com/404
500	While working on a local copy, attempted to style the allauth emails. This threw the error 500 template on few occasions

Error pages templates

404

500

Requirements

• an IDE such as GitPod or Visual Studio Code - I used GitPod
• PIP to install packages in Python
• python 3 programming language used on the back-end
• git version control system for code source
• stripe create an account for online payments
• AWS cloud storage service for online backup of website assets. (Create an S3 bucket)

Local deployment

1. Save a copy of the github repository at https://github.com/bezebee/MS4.git by clicking the 'download.zip' button at the top of the page and extracting the zip file, or you clone the repository with this command:

   $ git clone https://github.com/bezebee/MS4.git
   

2. Copy the repository into your IDE.

3. Install all required modules with the command:

   pip3 install -r requirements.txt
   

4. Store your environment variables and save them in the 'Environment Variables'-Settings in your IDE:

   'DEVELOPMENT', 'True'
   'SECRET_KEY', '<your value>'
   'STRIPE_PUBLIC_KEY', '<your value>'
   'STRIPE_SECRET_KEY', '<your value>'
   'STRIPE_WH_SECRET', '<your value>'

5. Replace with the values from your own accounts

   • The SECRET KEY: you can get from a free Django Secret Key Generator
   • STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY: from Developer's API on the Stripe dashboard
   • STRIPE_WH_SECRET: from Stripe's developer API after creating a webhook

6. Set up the local database by running these two commands:

   python3 manage.py makemigrations
   python3 manage.py migrate

7. Create a superuser for the database, in order to access Django's admin-panel

   python3 manage.py createsuperuser

8. Start your server by running the following management command in your terminal:

   python3 manage.py runserver

Deployment on Heroku

1. Go to https://heroku.com/ and create a new app with a unique name

2. Provision the Postgres database: Go to the Resources tab and install the addon "Heroku Postgres". Heroku automatically adds the 'DATABASE_URL' to the Config Vars.

3. Go to the Settings tab, click Reveal Config Vars and copy the DATABASE_URL value into your local memory.

4. In your App on Heroku, go to the Settings tab, and click on 'Reveal Config Vars', set these variables:

   'AWS_ACCESS_KEY_ID', '<your value>'
   'AWS_SECRET_ACCESS_KEY', '<your value>'
   'DATABASE_URL', '<your value>'
   'SECRET_KEY', '<your value>'
   'STRIPE_PUBLIC_KEY', '<your value>'
   'STRIPE_SECRET_KEY', '<your value>'
   'STRIPE_WH_SECRET', '<your value>'
   'USE_AWS', 'True'

5. Migrate the database:

   python3 manage.py makemigrations
   python3 manage.py migrate

6. Create a superuser for the database, to access Django's admin panel:

   python3 manage.py createsuperuser
   

7. If any packages have been updated, make a new requirements.txt file:

   pip freeze > requirements.txt
   

8. Create a new file named Procfile with no file extension, add web: python app.py to the file and save

9. push files that were changed to Github:

   git add .
   git commit -m "..."
   git push

10. Go back to the Heroku, open your app and go to the Deploy tab. Choose a Deployment method, I deployed mine through GitHub.

11. By choosing Github as a deployment method, I had to enter your Github link and choose Automatic Deployments. This will enable every commit to push directly to Heroku.

The inspiration for the website was mainly taken from the Coding Institute lectures presented by Chris Zielinski. Below are other resources I used while building the project:

1. CSS3 Neumorphic Social Media Icons | Coding Nepal
2. Neumorphic design example - Codepen
3. Neumorphism and CSS
4. Debug False not rendering static files locally - Solution from StackOverflow

The images of pins are used for Educational Purposes only. Products are available to purchase from these pages:

Holly Pixels	Mustard

The gif animations are used for Educational Purposes only.

James Curran	Marcus Magnusson