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

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

• 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

• 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

• 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

• 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.

• 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

• 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

• 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

• 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

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.

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.

• 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.

• 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.

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

• 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)

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

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

Holly Pixels	Mustard

James Curran	Marcus Magnusson