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 **
User stories were written and recorded using the Kanban and Issue tool from GitHub that can be found in here
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.
-
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
-
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 was designed on Balsamiq
Landing page was design to look like a simple with a intuitive button to go straight to shopping
Products page showing products clear and shortcut button to add to cart
Product Detail page showing products price, description and button to add to cart
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
Shopping cart gives the user hability to edit the cart, update quantity or delete product as well shows the user total and delivery cost
As use add products to cart a message with a preview of the shopping cart will be displayed
User is able to input their data for delivery securly and make payment through Stripe widget. Also check the order summary before purchase
Once payment is success user will see a order summary.
Administrator or Staff is able to add a product
As administrator or Staff they can access the edit product page and edit the products
Here user is able to edit his delivery details as well as check order history
For future features I will definetly implement a favorites page where user could add to favorites, also some sort of banners for advertisement to get sponsored ads on the website.
| 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 |
- All HTML files were passed through the W3C validator with no errors
- All JavaScript files were passed through JSHint with no errors present.
- The website was tested on major browsers including Chrome, Safari, Firefox and Edge.
- All user flows were tested in depth including navigating through the purchase flow, clicking CTAs and links, and form submission.
- All forms were tested to ensure validation was present and that forms could be submitted without error
- Lighthouse was used to test for Performance, Accessibility, Best Practices and SEO and adjustments were made to improve test results.
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.
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.
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
- Click on the "Code" button near the top right corner of the page.
- 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.
- Type "git clone" followed by a space, and then paste the URL you copied in step 3.
- Press enter to run the command. This will clone the repository onto your local machine.
- You should now have a local copy of the GitHub repository on your machine.
Forking the Repo
- 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.
- Once the fork is complete, you will be redirected to the forked repository in your account.
- If you haven't already, clone the forked repository to your local machine using the steps outlined in the previous answer.
- Make any changes or additions you want to the code in your local copy of the repository.
- Commit your changes to your local repository using the "git commit" command.
- Push your changes to the forked repository on GitHub using the "git push" command.
- 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.
- 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
- First of all you need to have a Heroku account.
- From the Dashboard, click "New" - "Create new app".
- Enter a name for the app. Click "Create App".
- Connect your GitHub account and select the repository and branch to deploy.
- 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
- 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.
- 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
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