- In a Nutshell
- Project Goals
- Business Objectives
- User Stories
- Features
- Database Design
- UI/UX
- Deployment
- How to Use
- Testing
- Future Considerations
- Credits
This is the 4th milestone project for the CodeInstitute level 5 Web Application Development Course
The Community Toolshed Renting Application is a platform that allows users to subscribe and rent tools and party items on a daily basis. Subscribers pay an annual fee to gain access to a shared inventory of tools and reusable party supplies, promoting sustainability, affordability, and community resource sharing.
This project is potentially something that will be reworked into a live project used by the Handcross Hardware & Craft local store, where I currently help at and where there currently offer this service however without an online platform
Community Toolshed is a full-stack e-commerce platform built with Django, Stripe, and Bootstrap, designed for a local hardware store’s rental service. The platform allows users to sign up, subscribe, and rent tools or party items, such as cutlery, plates, and power tools. Once subscribed, users can place rental orders, view past orders, and manage their profiles. Payments are securely processed using Stripe, ensuring a smooth checkout experience. The platform also includes a dedicated management system where store managers can add, edit, and remove products, as well as oversee rentals. A built-in maintenance system enables managers to track tool conditions, create repair tickets, and update tool statuses as needed. The site features a responsive, user-friendly interface, ensuring seamless navigation across devices.
This project was built using Code Institute’s Boutique Ado template as a foundation. However, significant modifications were made to the Django models, templates, and order logic to better suit the rental-based functionality and management features required for the Community Toolshed service. The project follows best practices in version control using Git and GitHub and is deployed on Heroku for live access.
Users can create an account and subscribe to access rentals. Subscription is yearly ($10/year) and grants full access to item rentals.
Tools: Individually tracked items with serial numbers, repair status, and availability. Party Items: Bulk-tracked items (plates, cups, cutlery) with stock and damage tracking. First-come, first-serve rental system.
Users place rental orders for specific date ranges. Orders track damaged items and cleaning requirements for reusable items. Rentals must be returned before new orders are placed.
Secure payment processing for subscriptions and rentals. Payment statuses: pending, paid, failed.
Tools marked as broken or needing repair are sent for maintenance. Maintenance requests track repair status (pending, in_progress, fixed, written_off).
This website should advertise the benefits of joining the Community Toolshed and subscribing to the rental service. The main goal is to attract new subscribers and encourage existing subscribers to continue their membership.
The business wants to be able to verify the identity of users and ensure that they are responsible renters. The business also wants to track the condition of items and ensure that they are maintained and repaired as needed.
There will be a 1 year subscription fee of £10 for all users. This fee will be used to maintain the website and cover the cost of repairs and maintenance.
1️⃣ As a Community Member, I want to rent tools so that I can complete home improvement projects affordably.
- ✅ I can browse available tools in the inventory.
- ✅ I can select a tool and choose a rental period.
- ✅ I can place an order for the tool (if available).
- ✅ I receive confirmation of my order.
- ✅ I can return the tool and report if it is broken or needs repair.
- ✅ I can browse available party items (plates, cups, cutlery, etc.).
- ✅ I can select a quantity of party items to rent.
- ✅ I can place an order for my event date.
- ✅ If items are broken or need cleaning, I can report them upon return.
3️⃣ As a Subscriber, I want to manage my membership so that I can continue renting items without interruption.
- ✅ I can subscribe and pay the $10 yearly fee.
- ✅ I can view my subscription status (active/inactive).
- ✅ If my subscription is inactive, I cannot rent items.
A full list of the user requirements can be seen in the TESTING.md file
- Users can sign up and login to the platform
- Users can logout of the platform
Users emails are unique and passwords are hashed for security
- Users can browse all items available for rent
- Users can filter items by category
- Users can search for items by name
- Users can view the details of an individual item
- Users can see the availability of an item
- Users can see the rental price of an item
Cart verifies if users are logged in and verified
- Users can add items to their cart
- Users can view their cart
- Users can remove items from their cart
- Users can adjust the quantity of items in their cart
- Users can checkout their cart
- Users can pay for their cart
- Users can view their order confirmation
- Users can view their order history
- Users can view the details of an individual order
- Users can report an item as needing maintenance
- Managers can view all maintenance tickets
- Managers can update the status of a maintenance ticket
- Managers can create a new maintenance ticket
- Users can view their profile
- Users can update their profile
- Users can view their subscription status
- Users can renew their subscription
- Users can view their order history
- Users can request verification of their account
- Users can subscribe to the platform
- Users can pay for their subscription
- Users can view their subscription status
- Users can renew their subscription
- Users can pay for their cart using stripe
- Users can pay for their subscription using stripe
- Webhooks are used to create redundancy in the payment system
- Webhooks are used to update the status of an order when a payment is successful
- Webhooks are used to send confirmation emails
here is where is main urls and the settings file lives
here is the main landing page of the website, where users can see the main features of the website and sign up or login
here is where the user profile is managed, users can update their profile, view their subscription status and renew their subscription, and see their order history and view their verification status
This app also contains the UserProfile Model
Here is where the products are managed, users can view all items available for rent, view the details of an individual item, see the availability of an item and see the rental price of an item
This app contains the Item Model, the Category Model, the Tool Model and the PartyItem Model
This app also contains the views used by the manager to add and edi items
Here is where the cart is managed, users can add items to their cart, view their cart, remove items from their cart and adjust the quantity of items in their cart
This app contains a cart contexts processor to ensure that the cart is available on all pages
Here is where the checkout process is managed, users can checkout their cart, pay for their cart and view their order confirmation
The subscription payment process is also managed here
This app contains the Order Model, the OrderItem Model and the Subscription Model
There is also a webhook handler to manage stripe webhooks and also to send confirmation emails
here is where the maintenance process is managed, users can report an item as needing maintenance, managers can view all maintenance tickets, update the status of a maintenance ticket and create a new maintenance ticket
This app contains the MaintenanceTicket Model
- In the type field, the item is either a tool or a party item, 0 or 1 respectively
- In the current implementation the item can only have one category
Subclass of Item Model
- The tool condition can be one fo the following
TOOL_CONDITION = (
(0, 'New'),
(1, 'Fair'),
(2, 'Poor'),
)- The tool model has a serial number field to track individual tools. The item parent has and sku field which allows multiple tool of the same kind, and still be individually maintained
Subclass of Item Model
- the party items are bulk tracked, so there is no serial number field, instead teh following fields are used to track the item
- available_amount: the amount of items available for rent
- broken_amount: the amount of items that are damaged
- stock_amount: the amount of items in stock
- The payment status can be one of the following
PAYMENT_STATUS = (
('pending', 'Pending'),
('paid', 'Paid'),
('failed', 'Failed'),
)- the stripe_pid field is used to store the stripe payment id
- start_date and end_date are used to track the rental period
- the order is associated with a UserProfile for the user who placed the order, this allows the user to view their order history
- the order item has a status, which can be:
ORDER_ITEM_STATUS = (
('reserved', 'Reserved'),
('active', 'Currently Rented'),
('returned', 'Returned'),
)- the order item is associated with an order, this allows the user to view the details of an individual order
- the order item is directly associated with an item, this allows the user to view the details of an individual item
- the subscription is associated with a UserProfile, this allows the user to view their subscription status
- users with an active subscription can rent items
- users with an inactive subscription cannot rent items
- the is a stripe_pid field to store the stripe payment id
- the subscription number is unique to each subscription and users can purchase a new subscription each year
This model is used to store the user's profile information and is associated with the Django User model
- there is a verified field to track if the user has been verified
- there is a subscription field to track if the user has an active subscription
- in practice this would allows managers to verify users once they visit the store
A maintenance ticket is created when a user/manager reports an item as needing maintenance
- the status field can be one of the following
MAINTENANCE_STATUS = (
('pending', 'Pending'),
('fixed', 'Fixed'),
('written_off', 'Written Off'),
)- the maintenance ticket is associated with an tool, this allows the user/manager to view the details of the tool and also view care instructions
- the maintenance ticket can be associated with an order, this allows the user/manager to track down the details of the order and also view the rental period and who rented the item
These are additional models that are used to manage the email verification process
This is the complete ERD for the project
It was generated with the graph_models command and the image was created with GraphvizOnline
No mockups were created for this project, it was designed as I went along based on the Code Institute walkthrough project.
The styling are mainly sticking to bootstrap defaults with some custom css for the glassmorphism effect and some others
These are the main pages of the website, I will attach a screenshot of both the mobile and desktop view
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to display all the items available for rent
| Desktop | Mobile |
|---|---|
 |
 |
it can also be filtered by type, category, sorted by the user or be searched for
Filtering options
Sorting options
Search
This page is used to display the details of an individual item
Users can:
- set a start and end date to rent the item
- see the availability of the item
- see the rental price of the item
- see the category of the item and click on it to see all items in that category
- add item to cart
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to display the items in the cart
Users can:
- see the content of the cart
- edit or remove items from the cart
- continue to checkout
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to display the payment form and submit the payment to stripe
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to display the order confirmation and details
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to display the user's profile
User can:
- edit info used for making orders
- view subscription status
- renew subscription
- view verification status
- (testing purposes) request verification
- view order history
- access individual order details
| Desktop | Mobile |
|---|---|
 |
 |
This page is similar to the Checkout (Success) Page but is used to view a past order
Users can:
- (testing purposes) change the status of the order or make a ticket for maintenance
In the future the changing of the status and creation of maintenance tickets will be done by the manager
Visually identical to the Checkout (Payment) Page but is used to pay for the subscription
Visually identical to the Checkout (Success) Page but is used to show the confirmation of the subscription payment
This page is accesses only by the managers
It displays a list of completed tickets and allows the manager to view the details of the ticket
It also has a list of active tickets and allows the manager to edit the ticket or update the status of the ticket
The manager can also create a new ticket
| Desktop | Mobile |
|---|---|
 |
 |
This page can be accessed either from the maintenance page or from the from a past order page by the manager
If accessed from a past order the page will be prepopulated with the details of the selected tool
It contains a form to create a new maintenance ticket
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to edit certain details of the maintenance ticket
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to complete the maintenance ticket
| Desktop | Mobile |
|---|---|
 |
 |
This page is used to display a past maintenance ticket and its details
| Desktop | Mobile |
|---|---|
 |
 |
This page is accessed only by the managers and is used to manage the products and show the statuses of orders
The manager can:
- click through to an order, this is important because from there is where the manager can change the status of the order and create tickets
- add a new tool
- edit a tool
- delete a tool
- add a new party item
- edit a party item (not implemented but would be similar to the tool edit page)
| Desktop | Mobile |
|---|---|
 |
 |
This page contains a form to add a new tool to the inventory
- the description field is a summer note field to allow for rich text
- the image field is a custom widget that allows the user to upload an image and see a preview of the image
| Desktop | Mobile |
|---|---|
 |
 |
This page is similar to the add tool page but is used to add a new party item to the inventory
| Desktop | Mobile |
|---|---|
 |
 |
The edit tool page contains the same form as the add tool page but is prepopulated with the details of the selected tool
| Desktop | Mobile |
|---|---|
 |
 |
There are 2 main navigation bars. The site navbar is used to navigate the website and the product navbar is used to navigate the products page, controlling the category and sorting options
| Desktop | Mobile |
|---|---|
 |
 |
Site Navbar
This navbar is used to navigate the website, it contains the following links
- Home
- Cart (the cart icon)
- Through Account dropdown
- Profile
- Logout (Login and Register if not logged in)
- Maintenance (only visible to managers)
- Product Management (only visible to managers)
It has a search bar that allows users to search for items
It has a responsive design that collapses into a hamburger menu on smaller screens
Desktop:
Mobile:
| Closed | Open |
|---|---|
 |
 |
Product Navbar
This navbar is used to navigate the products page with different sorting and category options.
It contains 4 dropdown menus:
All Items (sorting options for all items):
- By Price
- By Rating
- By Category
- All Items
Tool (category options for tool items):
- Garden
- DIY
- Cleaning
- All Tools
Party Supplies (category options for party items):
- Plates & Cutlery
- Cups & Glasses
- Other
- All Party Supplies
Offers
- New Additions
- Deals
- All Specials (this section has no items in the current implementation)
The Community Toolshed project uses a modular URL structure to ensure clean and maintainable routing. Each app has its own urls.py file, which is included in the main project-level urls.py file. Below is a detailed explanation of how the URLs are connected to their respective views and functionalities.
The main URL configuration is located in community_toolshed/urls.py. It acts as the entry point for routing requests to the appropriate app-level URL configurations.
-> Included URLs
-
Admin Panel
- Path:
/admin/ - View: Django's built-in admin interface.
- Purpose: Provides access to the admin dashboard for managing the database and models.
- Path:
-
User Authentication (Allauth)
- Path:
/accounts/ - View: Provided by Django Allauth.
- Purpose: Handles user authentication, including login, logout, and registration.
- Path:
-
Text Editor (Summernote)
- Path:
/summernote/ - View: Provided by the
django_summernotepackage. - Purpose: Enables rich text editing for admin fields.
- Path:
-
Homepage
- Path:
/ - Included URLs:
homepage/urls.py - View:
homepage.views.index - Purpose: Displays the main landing page of the website.
- Path:
-
Products
- Path:
/products/ - Included URLs:
products/urls.py - Purpose: Handles product-related functionality, such as viewing, adding, editing, and deleting items.
- Path:
-
Cart
- Path:
/cart/ - Included URLs:
cart/urls.py - Purpose: Manages the shopping cart, including adding, removing, and adjusting items.
- Path:
-
Checkout
- Path:
/checkout/ - Included URLs:
checkout/urls.py - Purpose: Manages the checkout process, including payments and order confirmations.
- Path:
-
Profiles
- Path:
/profile/ - Included URLs:
profiles/urls.py - Purpose: Manages user profiles, including subscription status, order history, and profile updates.
- Path:
-
Maintenance
- Path:
/maintenance/ - Included URLs:
maintenance/urls.py - Purpose: Handles maintenance tickets for tools, including creating, editing, and completing tickets.
- Path:
-
Static Media
- Path: Serves media files during development using
static().
- Path: Serves media files during development using
-> Homepage App
- File:
homepage/urls.py - Path:
/ - View:
homepage.views.index - Purpose: Displays the homepage with an overview of the platform's features and a call-to-action for users to sign up or log in.
-> Products App
- File:
products/urls.py - Paths and Views:
/:products.views.all_products- Displays all products available for rent./<int:product_id>:products.views.product_detail- Displays details of a specific product./management/:products.views.management- Displays the product management page (manager-only)./add_tool/:products.views.add_tool- Allows managers to add a new tool./add_party_item/:products.views.add_party_item- Allows managers to add a new party item./edit_tool/<int:item_id>/:products.views.edit_tool- Allows managers to edit an existing tool./edit_party_item/<int:item_id>/:products.views.edit_party_item- Allows managers to edit an existing party item./delete_item/<int:item_id>/:products.views.delete_item- Allows managers to delete an item.
- Purpose: Manages product-related functionality for both users and managers.
-> Cart App
- File:
cart/urls.py - Paths and Views:
/:cart.views.view_cart- Displays the shopping cart./add/<item_id>/:cart.views.add_to_cart- Adds an item to the cart./adjust/<item_id>:cart.views.adjust_cart- Adjusts the quantity of an item in the cart./remove/<item_id>/:cart.views.remove_from_cart- Removes an item from the cart.
- Purpose: Handles the shopping cart functionality.
-> Checkout App
- File:
checkout/urls.py - Paths and Views:
/:checkout.views.checkout- Handles the checkout process./checkout_success/<order_number>:checkout.views.checkout_success- Displays the order confirmation page./subscription_checkout/:checkout.views.subscription_checkout- Handles subscription payments./subscription_checkout_success/<subscription_number>:checkout.views.subscription_checkout_success- Displays the subscription confirmation page./cache_checkout_data/:checkout.views.cache_checkout_data- Caches checkout data for Stripe./cache_subscription_checkout_data/:checkout.views.cache_subscription_checkout_data- Caches subscription checkout data for Stripe./wh/:checkout.webhooks.webhook- Handles Stripe webhooks.
- Purpose: Manages the checkout and payment processes, including integration with Stripe.
-> Profiles App
- File:
profiles/urls.py - Paths and Views:
/:profiles.views.profile- Displays the user's profile./order_history/<order_number>:profiles.views.order_history- Displays the user's order history./order_management/<order_number>:profiles.views.order_management- Allows managers to manage orders./verify_profile/<user_id>:profiles.views.verify_profile- Allows managers to verify user profiles.
- Purpose: Manages user profiles and order history.
-> Maintenance App
- File:
maintenance/urls.py - Paths and Views:
/:maintenance.views.maintenance- Displays the maintenance dashboard./create_ticket/<tool_id>/<order_id>:maintenance.views.create_ticket- Creates a maintenance ticket for a tool./create_new_ticket/:maintenance.views.create_new_ticket- Creates a new maintenance ticket./edit_ticket/<ticket_id>:maintenance.views.edit_ticket- Edits an existing maintenance ticket./complete_ticket/<ticket_id>:maintenance.views.complete_ticket- Marks a maintenance ticket as complete./view_ticket/<ticket_id>:maintenance.views.view_ticket- Displays the details of a maintenance ticket.
- Purpose: Handles the maintenance process for tools, including ticket creation and status updates.
Summary
The project uses a modular URL structure where each app has its own urls.py file to handle specific routes. The main community_toolshed/urls.py file includes these app-level URL configurations, ensuring a clean and organized routing system. This structure allows for easy scalability and maintainability, with clear separation of concerns between different functionalities such as products, cart, checkout, profiles, and maintenance.
using default bootstrap colors to ensure consistency
Making sure to use bootstrap classes to ensure that the website is accessible
All buttons have a hover effect to show that they are clickable
All inputs have a focus effect to show that they are selected
All text has a high contrast with the background to ensure readability
- User receives a confirmation message when they have successfully completed an action
- User receives an error message when they have failed to complete an action
- User revives an information message when they need to know something
- User has to be logged in to access certain pages
- User has to be verified to access certain pages
- User will be informed if they try to access a page they are not allowed to access
Deployment is done through Heruko
- Go to the website
- Sign up for an account
- confirm your email
- fill out the detail in your profile
- subscribe to the platform
- activate your profile
- browse the items available for rent
- add items to your cart
- checkout your cart
- pay for your cart
- view your order confirmation
- open the order page to view your order details and change status (for testing purposes)
Test Superuser Account:
- username:
- password:
- Go to the website
- Log into the superuser account
- go to management page
- add a new item
- edit an item
- view past orders
- view specific order details and change status
- go to maintenance page
- add a new maintenance ticket
- edit a maintenance ticket
- view all maintenance tickets
You can use these card numbers at the checkout to test stripe payment integration
| CARD NUMBER | SCENARIO | HOW TO TEST |
|---|---|---|
| 4242424242424242 | The card payment succeeds and doesn’t require authentication. | Fill out the credit card form using the credit card number with any expiration, CVC, and postal code. |
| 4000002500003155 | The card payment requires authentication. | Fill out the credit card form using the credit card number with any expiration, CVC, and postal code. |
| 4000000000009995 | The card is declined with a decline code like insufficient_funds. | Fill out the credit card form using the credit card number with any expiration, CVC, and postal code. |
| 6205500000000000004 | The UnionPay card has a variable length of 13-19 digits. | Fill out the credit card form using the credit card number with any expiration, CVC, and postal code. |
this information if from the stripe docs
Testing information can be found in the TESTING.md file
Due to time constraints, there are some features that were not implemented in this project that could be added in the future
- there is some redundancy in my tables that could be removed
- There is missing logic to control the availability of items during the rental period
- I managed to implement the maintenance system for tool, but did not have time to implement the cleaning system for the party items
- likewise the product management system is only complete for tools
- I wanted to create dining sets with the part items but did not have time to implement this
- add more in depth testing: the current testing is mainly manual testing, I would like to add more automated testing and also more in depth manual testing on the more complex features
- improve accessibility and screen reader support
- make improvements based on lighthouse audit
- Add a feature to allow users to request items that are not currently in the inventory
- Flesh out the rating system to allow users to rate items and leave reviews
- use the built in stripe subscription feature to manage the subscription payments
- adding a dark mode
- HTML/CSS/JS - Frontend and templates
- Bootstrap - CSS library
- Python, Django - Backend
- PostgreSQL - Database
- Heroku - Hosting
- Git/Github - Version Control
- django SummerNote - styling django admin panel
- django crispy forms - for handling and creating forms
- Dbdiagram.io - used to create database schema
- stripe - used to manage payments
- GraphvizOnline
- AWS S3 - used to store static files and media files
- Pexels used for royalty free images
- home page image by ClickerHappy: https://www.pexels.com/photo/lawn-mower-vehicle-on-grass-589/
- the code institute walkthrough project was used as a starting point for this project and the tutorial lessons where followed in order to create this project
- stripe docs
- css.glass - for glassmorphism effect
- Youtube tutorial by BugBytes for generating the ER diagrams for the django models
- RealFaviconGenerator - for generating the favicon
- Django Favicon Guide by Micheal Yin - for adding the favicon to the project
- W3C HTML Validator - for validating the HTML code
- W3C CSS Validator - for validating the CSS code