ToolHub is an eCommerce platform that allows users to browse, purchase, and manage high-quality tools. This application is built using Python, Django, Cloudinary for image storage, PostgreSQL for the database, and is deployed on Heroku.

Link to deployed site here

• User Experience
  • Owner Goals
  • Visitor Goals
• Design
  • Wireframes
  • Database Schema
  • Images
• Features
  • Multi-page Features
  • All User Features
  • Logged-In Features
  • CRUD Functionality
• Technologies
  • Languages
  • Tools
• Testing
• Deployment
  • Deployment to Heroku
  • Forking Repository
  • Making a Local Clone
  • Version Control
• Credits

ToolHub is designed to allow users to browse and purchase tools, manage their wishlist, and read and leave reviews.

• Provide a platform for users to easily browse and purchase tools.
• Enable users to create and manage a personal wishlist.
• Allow users to leave reviews and ratings for tools they have purchased.

As a visitor:

• I want to view a variety of tools available for purchase.
• I want to be able to create an account and manage my tools and wishlist.
• I want to be able to read reviews from other customers.

Wireframes created using Miro.

Home Desktop

Home Mobile

Shop Desktop

Shop Mobile

Product detail Desktop

Product detail Mobile

Cart Desktop

Cart Mobile

Checkout Desktop

Checkout Mobile

Dashboard Desktop

Dashboard Mobile

Schema for PostgreSQL database was created on Draw.io

DB Schema

The navbar is displayed on all pages except for the checkout page. On mobile devices, it collapses into a hamburger icon that opens a side navigation menu. The visible links depend on whether the user is logged in or not.

Navbar Logged Out

Navbar Logged In

Footer is present on all pages, with a disclaimer and links to social media accounts.

Footer

On the home page, visitors can see featured products and can search for tools based on categories or keywords and use the filter feature to filter through item tags.

Home Page

On the shop page users can see all avaliable tools for purchase.

Shop

On the product detail page, users can view detailed information about the product, read and leave reviews, and add the product to their cart or wishlist.

Product Detail Page

Users can sign up or log in to their accounts. Once logged in, they can manage their wishlist and view their previous orders.

Log In

Sign Up

Logged-in users can access their dashboard page to manage their passwod information, view their order history, and view their wishlist.

Dashboard

Users can view the items in their cart and proceed to checkout.

Cart Page

Users can pay and place an order with stripe payments

Checkout Page

Confermation page for logout

Logout Page

Users can leave reviews and ratings for the tools they have purchased in the product detail page, and can also delete their own reviews.

Add Review

• HTML5 - Used for structuring and organizing content.
• Bootstrap 5 - Used for responsive design, layout, and styling of the frontend.
• CSS3 - Used for styling and layout.
• JavaScript - Handles frontend interactivity, form validation, and dynamic content rendering.
• Python - Manages the backend functionality.
  • Django==5.1.5
  • PostgreSQL==2.9.10
  • Pillow==11.1.0
  • cloudinary==1.36.0
  • crispy-forms==2.3
  • dj-database-url==2.3.0
  • dj-rest-auth==7.0.1
  • dj3-cloudinary-storage==0.0.6
  • gunicorn==20.1.0
  • requests==2.32.3
  • psycopg2-binary==2.9.10

• Cloudinary - For image and media storage.
• Heroku - For deploying the app.
• PostgreSQL - For database management.
• Git/GitHub - For version control and storage.
• Django - For building the backend functionality.
• Django REST Framework - For building the API.
• FontAwesome - For icons.
• Whitenoise - For serving static files in production.
• Stripe - For handling payments and transactions.

For testing, please refer to the Testing Documentation.

To deploy to Heroku:

1. In GitPod CLI, the root directory of the project, run: pip3 freeze --local > requirements.txt to create a requirements.txt file containing project dependencies.
2. In the Gitpod project workspace root directory, create a new file called Procfile, with capital 'P'. Open the Procfile. Inside the file, check that web: python3 app.py has been added when creating the file Save the file.
3. Push the 2 new files to the GitHub repository
4. Login to Heroku, select Create new app, add the name for your app and choose your closest region.
5. Navigate to the Deploy tab on Heroku dashboard and select Github, search for your repository and click 'connect'.
6. Navigate to the settings tab, click reveal config vars and input the following:

7. Deploy the app by selecting Deploy Branch under the Deploy tab.

By forking the FlavourVault GitHub repository, you make a personal copy of the repository to explore and make changes without affecting the original repository. To fork the repository:

1. Log in to GitHub and go to the FlavourVault Repository.
2. At the top of the repository page, just above the "Settings" button, click the Fork button.
3. You should now have your own copy of the repository in your GitHub account.
   
   

To clone the repository locally, follow these steps:

1. Log in to GitHub and go to the FlavourVault Repository.
2. Under the repository name, click the Clone or download button.
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/Rand-Jelo/ToolHub

7. Press Enter. Your local clone will be created.
   
   

We use Git and GitHub for version control. Git helps us track the history of the project and collaborate with others. It enables us to manage different versions of the code and helps us to roll back changes when necessary.

• git add: Stage the changes for commit.
• git commit: Commit the staged changes with a message describing them.
• git push: Push the changes to the remote GitHub repository.

Once your changes are committed, you can push them to GitHub to make them available to collaborators and for deployment.

• User authentication and management implemented using Django Allauth.
• User password reset functionality powered by Django Rest Auth.
• Recipe submission, editing, and CRUD functionality built with Django.
• Cloud storage for images and media handled via Cloudinary integration.
• Database interactions optimized with Django ORM.
• Search and filtering logic based on Django documentation.
• Payments integrated using Stripe for seamless transactions.

• Icons provided by Font Awesome.
• Responsive design mockups made with Am I Responsive.
• UI wireframes designed using Miro.
• Images sourced from Freepik.

• Django authentication setup guidance from Django Allauth official documentation.
• Payment integration with Stripe documentation.
• API request handling in Django REST Framework based on DRF official documentation.
• PostgreSQL integration references from Heroku documentation.
• Frontend styling and components from Bootstrap documentation.

• A big thank you to my mentor, Mitko Bachvarov, for his continuous guidance and feedback throughout the project.
• Special thanks to the Stack Overflow community for providing solutions to technical challenges.
• Appreciation to the Open Source contributors behind Django, DRF, PostgreSQL, and Stripe for their valuable frameworks.