Thunder Nutrition

Introducing Thunder Nutrition an e-commerce platform is the culmination of my journey in Full Stack Web Development, developed using Python and Django. With Thunder Nutrition, I've combined my passion for fitness with cutting-edge technology to provide customers with a seamless shopping experience. From top-tier supplements to premium equipment, every product is meticulously curated to meet the needs of athletes and fitness enthusiasts.

**Link to Thunder Nutrition App Live **

Contents

• Contents
  • User Experience (UX)
    • User Stories
  • Features
    • Landing Page
    • Produts
    • Product Details
    • Log In
    • Shopping Cart
    • Messages
    • Checkout Page
    • Checkout Success
    • Add Product
    • Edit Products
    • Profile Page
    • Future Features
  • Marketing Strategies
  • Testing
    • Bugs and Issues
  • Technologies Used
  • Deployment
  • Credits
    • Content
    • Media
  • Acknowledgments
• THANK YOU!

---

User Experience (UX)

User Stories

User stories were written and recorded using the Kanban and Issue tool from GitHub that can be found in here

Customer Stories:

1. As a customer, I want to browse products by categories so that I can find items I'm interested in more easily.
2. As a customer, I want to search for products by keywords so that I can quickly locate specific items.
3. As a customer, I want to view detailed product information including descriptions, prices, images, and customer reviews so that I can make informed purchasing decisions.
4. As a customer, I want to add products to my shopping cart so that I can save them for later or proceed to checkout.
5. As a customer, I want to easily edit the quantity of items in my shopping cart before proceeding to checkout.
6. As a customer, I want to securely checkout and make payments using various payment methods (e.g., credit/debit card, PayPal) so that I can complete my purchase.
7. As a customer, I want to have a user account where I can manage my personal information and view order history.
8. As a customer, I want to receive email notifications about order confirmations and promotional offers.

Administrator Stories:

9. As an administrator, I want to add, edit, and remove products from the inventory so that I can keep the catalog up-to-date.
10. As an administrator, I want to manage product categories and attributes (e.g., sizes, colors) to organize the inventory effectively.
11. As an administrator, I want to analyze sales data and customer behavior to make informed decisions about marketing strategies and inventory management.

Back to top

• Agile and Kanban

GitHub Project Boards and Kanban are instrumental in collaborative project management. Using Kanban methodology, tasks move through stages like "To do," "In progress," "Testing," and "Done," providing a visual representation and limiting work in progress.

Back to top

• FlowChart

  The flowchart was a very useful tool to plan ahead the models and understand how to build the application below you can see the chart that was made using the Lucid

  

Back to top

• Design Choices

  The idea was to build a a simple "app-based" design with smooth transitions to make the UX even more seamless and intuitive. All the colors and styles were applied with the built in classes provided that can be found on the Bootstrap documentation.

  

• Wireframes

  wireframes was designed on Balsamiq

  
  
  

Back to top

Features

Landing Page

Landing page was design to look like a simple with a intuitive button to go straight to shopping

Back to top

Products

Products page showing products clear and shortcut button to add to cart

Back to top

Product Details

Product Detail page showing products price, description and button to add to cart

Back to top

Log In

Once the user choose the options new order he will be redirect to a login page that has instructions if the user does not have an account yet

Back to top

Shopping Cart

Shopping cart gives the user hability to edit the cart, update quantity or delete product as well shows the user total and delivery cost

Back to top

Messages

As use add products to cart a message with a preview of the shopping cart will be displayed

Back to top

Checkout Page

User is able to input their data for delivery securly and make payment through Stripe widget. Also check the order summary before purchase

Back to top

Checkout Success

Once payment is success user will see a order summary.

Back to top

Add Product

Administrator or Staff is able to add a product

Back to top

Edit Products

As administrator or Staff they can access the edit product page and edit the products

Back to top

Profile Page

Here user is able to edit his delivery details as well as check order history

Back to top

Custom 404 Page

if there is an error user will be redirected to a custom 404 page.

Back to top

Django Admin

Django Admin is set to offer the administrator a variety of custom filters as well access to full CRUD operations over the models and data of the application

Back to top

Future Features

For future features I will definetly implement some sort of banners for advertisement to get sponsored ads on the website, and notification system for shipment tracking.

Back to top

Marketing Strategies

Meta Tags and Rel

SEO Mechanism

Newsletter

Social Media - Facebook Page

Back to top

Testing

Test	Action	Success Criteria
Landingpage loads	Navigate to website URL	Page loads < 5s, no errors
Links	Click on each Navigation link	Correct section is redirected action performed
Athentications System	User should be able Sign Up Log In and Log Out	All functions working fine as expected
CRUD Functionality	User should be able to create edit and delete orders	All functions working fine as expected
Responsiveness	Resize the viewport window from 320px upwards with Chrome Dev Tools. Use Responsive Design Checker to test various mobile, tablet, and large screen sizes	Page layout remains intact and adapts to screen size
Different web browsers	Runned the app in Google Chrome, Mozilla Firefox and Internet Explorer	App works responsive and layout remains intact no errors or bug detected
Different screen devices	Runned the app using a Samsung Galaxy s20 and Iphone 13	App works responsive and layout remains intact no errors or bug detected

Back to top

HTML Checkers

• Home
• Products - The error displayed is related to "back to top" buttton that does not have a href, but it doesnt need to.
• Products Details
• Product Edit - The error displayed is related to "trailing slash" of an element the is automatically generated from Django Forms.
• Product Add - The error displayed is related to "trailing slash" of an element the is automatically generated from Django Forms.
• Profiles - The error displayed is related to "trailing slash" of an element the is automatically generated from Django Forms.
• My Favourites - The error displayed is related to "trailing slash" of an element the is automatically generated from Django Forms.
• Shopping Cart
• Checkout - The error displayed is related to "back to top" buttton that does not have a href, but it doesnt need to.
• Checkout Success
• Contact

CSS Checkers

• Home - The error displayed is related to FontAwesome cdn link. The other warnings are related to AWS, MailChimp and Bootstrap.
• Checkout - The error displayed is related to FontAwesome cdn link. The other warnings are related to AWS, MailChimp and Bootstrap.
• Profiles - The error displayed is related to FontAwesome cdn link. The other warnings are related to AWS, MailChimp and Bootstrap.

JsHint Checkers

• Stripe_element.js

  
• Country Field

  

Python Linter Checkers

• Main App

  • settings.py

    
  • urls.py

    
• Home App

  • admin.py

    
  • forms.py

    
  • models.py

    
  • urls.py

    
  • views.py

    
• Products App

  • admin.py

    
  • forms.py

    
  • models.py

    
  • urls.py

    
  • views.py

    
  • widgets.py

    
• Shopping Cart App

  • admin.py

    
  • urls.py

    
  • views.py

    
• Checkout App

  • admin.py

    
  • forms.py

    
  • models.py

    
  • signals.py

    
  • urls.py

    
  • views.py

    
  • webhook_handler.py

    
  • webhooks.py

    
• Profiles App

  • forms.py

    
  • models.py

    
  • urls.py

    
  • views.py

    
• Favorites App

  • admin.py

    
  • models.py

    
  • urls.py

    
  • views.py

    

Back to top

Bugs and Issues

Through the development accidentally some of the keys were pushed to github but they were all re-generated and add to the environ on heroku app.

Back to top

---

Technologies Used

I used the following technologies, platforms and support in building my project:

• The application was built in Python.
• The Code Institute modules/lessons aided my learning and many of the concepts learned were applied in this project.
• GitHub was used for the project repository.
• Code Anywhere - for IDE and editor of the code.
• Django - framework to develop the app and a few other libraries such as athentications system "Allauth" all specified in the requirements.txt file
• Bootstrap - for design and choices.
• Heroku - was used for application deployment.
• Elephant SQL - for database.
• Lucid - Flowchart used on readme file.
• AWS - Used to store and host static files.

Back to top

Deployment

GitHub Deployment

First of all you need to have a GitHub account and I choose it because it's free and easy to create a repository to host your code and share with others.

• To create a repository you just need to go to the main page at the top right you will see a "+" button just click here and then new repository

• Select the name of the project and a description make it public and then create a repository

• Once you created your repository go the settings section and then click on pages

• Select the Branch as main and then save it.

• Finally, your repository is deployed and it should show you a link so you can share it with others.

Cloning the Repo

1. Click on the "Code" button near the top right corner of the page.
2. Copy the HTTPS or SSH URL that appears in the box. Open your terminal (or Git Bash on Windows) and navigate to the directory where you want to clone the repository.
3. Type "git clone" followed by a space, and then paste the URL you copied in step 3.
4. Press enter to run the command. This will clone the repository onto your local machine.
5. You should now have a local copy of the GitHub repository on your machine.

Forking the Repo

1. Click the "Fork" button near the top right corner of the page. This will create a copy of the repository in your own GitHub account.
2. Once the fork is complete, you will be redirected to the forked repository in your account.
3. If you haven't already, clone the forked repository to your local machine using the steps outlined in the previous answer.
4. Make any changes or additions you want to the code in your local copy of the repository.
5. Commit your changes to your local repository using the "git commit" command.
6. Push your changes to the forked repository on GitHub using the "git push" command.
7. If you want to contribute your changes back to the original repository, create a pull request by going to the original repository's page and clicking the "New pull request" button. From there, you can compare your changes to the original repository and request that they be merged.
8. You should now have a forked copy of the GitHub repository in your account, and you can make changes to it and contribute back to the original repository if desired.

Heroku Deployment

1. First of all you need to have a Heroku account.
2. From the Dashboard, click "New" - "Create new app".
3. Enter a name for the app. Click "Create App".
4. Connect your GitHub account and select the repository and branch to deploy.
5. When you create the app, you will need to add two buildpacks from the Settings tab. The ordering is as follows:
   • heroku/python
   • heroku/nodejs
6. You must then create the followinf Config Varw:
   • PORT. Set this to 8000.
   • DATABASE_URL. Set this to your database url.
   • DISABLE_STATICFILES. Set to 0.
   • SECRET_KEY. Set to your secret key.

Back to top

Credits

Content

• Code Institute - Tutor Support.
• Code Institute Python Template - Template for Python mock terminal in Heroku.
• GitHub - for deployment and host.
• Code Anywhere - for IDE and editor of the code.
• W3 Schools - used for multiples researches and tutorials in HTML and CSS.
• Stack Overflow - used to clarify questions and collect answers.
• Real Python - Also provide with clarity the solutions
• AWS - Used to store and host static files.

Back to top

Media

• Lucid - Flowchart used on readme file.
• Bootstrap - for design and choices.

Back to top

Acknowledgments

This project taught me a lot and helped me put in practice what I have learn throughout the Course specially getting to know more about Django frameworks and libraries. I was happy enough with the results and to be able to develop a real world application for a friend that will use it as a tool to better manage his business. I Thank the opportunity and help I got from all Code Institute Tutors, but special thanks to Tutors that helped me a lot troubleshooting and explaining to me my questions.

by Cesar Garcia

THANK YOU!

Back to top