- Introduction
- Installation
- Usage
- API Endpoints
- Database Initialization
- Project Structure
- Testing
- Future Enhancements
This is the backend for the Bicycle Shop project. It provides APIs for managing parts, combinations, and customizations of bicycles. The backend is built using Node.js, Express, and Sequelize ORM for database interactions.
- Clone the repository:
git clone https://github.com/alferto82/bicycle-shop.git- Navigate to the backend directory:
cd bicycle-shop/backend- Install dependencies:
pnpm install- Start the backend server:
pnpm start- The server will start on
http://localhost:5000.
GET /parts: Retrieve all parts.POST /parts: Create a new part.PUT /parts/:id/out-of-stock: Mark a part as out of stock.DELETE /parts/:id: Delete a part.
GET /combinations: Retrieve all combinations.POST /combinations: Create a new combination.PUT /combinations/:id: Update a combination.DELETE /combinations/:id: Delete a combination.
POST /customization/validate: Validate a combination of parts and calculate the total price.POST /customization/validate-variations: Validate variations of parts and calculate the price adjustment.POST /customization/check-combinations: Check combinations of parts and return disabled options.
To initialize the database with sample data, run the following command:
pnpm run init-db
This will create the necessary tables and insert sample data for parts and combinations.
To run the tests, use the following command:
pnpm test
This will run the tests using Jest and output the results to the console.
In this project, we have designed a database that allows managing bicycle parts and their combinations, as well as price variations based on the presence of certain parts. Below are the database models we have created:
The Part model represents individual parts that can be used in bicycle configurations. Each part has the following attributes:
id: Unique identifier for the part.name: Name of the part.type: Type of the part (e.g., "wheel", "frame").category: Category of the part (e.g., "Bicycle").price: Price of the part.inStock: Indicates whether the part is in stock.
This model allows us to create parts of different types and categories, enabling the creation of objects for bicycles and, in the future, other objects like skis, roller skates, etc.
The Combination model allows enabling or disabling certain combinations of parts. Each combination has the following attributes:
id: Unique identifier for the combination.part1: ID of the first part in the combination.part2: ID of the second part in the combination.allowed: Indicates whether the combination of the two parts is allowed.
This model is useful for defining business rules that restrict certain combinations of parts that are not compatible with each other.
The PartVariation model allows defining price variations based on the presence of certain parts. Each variation has the following attributes:
id: Unique identifier for the variation.part1: ID of the first part.part2: ID of the second part.priceAdjustment: Price adjustment based on the condition that both parts are present.
This model allows us to dynamically adjust the total price of a bicycle configuration based on the selected parts.
With these models, we have created a flexible and extensible database that allows us to manage bicycle parts, define allowed combinations, and dynamically adjust prices based on the selected parts. This structure provides a solid foundation for expanding the project in the future and adding support for new types of products.
- Add More Testing: Increase test coverage to include unit tests, integration tests, and end-to-end tests to ensure the robustness of the application.
- Advanced Stock Management: Implement more advanced stock management features, such as tracking the number of items in stock and sending notifications or emails when stock is low.
- User Authentication: Add user authentication and authorization to secure the admin interface.
- Enhanced Customization: Allow more complex customization options and dependencies between parts.
- Discount and Promotion Management: Add features to manage discounts and promotions, allowing admins to create special offers and sales events.
- Customer Reviews and Ratings: Allow customers to leave reviews and ratings for parts and configurations, providing valuable feedback and enhancing the shopping experience.
- Order History and Tracking: Implement features for users to view their order history and track the status of their orders in real-time.
- Include deployment in docker": We could use docker to deploy this application. Using docker-compose could help us to deploy BE and FE simultaneously.
This is the frontend application for the Bicycle Shop project. It allows users to configure bicycles, view available parts, and manage their cart. The admin interface allows for managing stock and parts.
-
Clone the repository:
git clone https://github.com/yourusername/bicycle-shop.git
-
Navigate to the frontend directory:
cd bicycle-shop/frontend -
Install dependencies:
pnpm install
-
Start the development server:
pnpm dev
-
Open your browser and navigate to
http://localhost:3000.
We have used Vite as the build tool for this project. Vite offers several advantages:
- Fast Development Server: Vite provides a lightning-fast development server with Hot Module Replacement (HMR) for a smooth development experience.
- Optimized Build: Vite uses Rollup for optimized builds, resulting in smaller bundle sizes and faster load times.
- Modern JavaScript: Vite supports modern JavaScript features out of the box, allowing us to use the latest syntax and APIs.
- Easy Configuration: Vite's configuration is straightforward and easy to customize, making it simple to set up and extend.
By using Vite, we ensure a fast and efficient development process, as well as optimized builds for production.
We have used Redux for state management in this project. Redux offers several advantages:
- Predictable State: Redux makes the state of the application predictable by enforcing strict rules for how state changes can occur.
- Centralized State: Redux stores the entire state of the application in a single store, making it easier to manage and debug.
By using Redux, we ensure a scalable and maintainable state management solution for the application.
- Bicycle Configuration: Users can configure bicycles by selecting different parts.
- Cart Management: Users can add configured bicycles to their cart and view the total price.
- Admin Interface: Admins can manage parts and stock, including deleting parts, creating new parts (not finished) and marking parts as out of stock.
- Stock Management: Parts that are out of stock shows a message, and the "Add to Cart" button is disabled if any selected part is out of stock.
- Price Adjustments: The total price is dynamically adjusted based on selected parts and their variations.
- Add More Testing: Increase test coverage to include unit tests, integration tests, and end-to-end tests to ensure the robustness of the application.
- Mobile-Friendly Design: Improve the user interface to be more responsive and mobile-friendly, ensuring a seamless experience on all devices.
- Multi-Language Support: Add support for multiple languages to make the application accessible to a wider audience.
- Wishlist and Favorites: Add functionality for users to save parts and configurations to a wishlist or favorites list for future reference.
- Social Media Integration: Allow users to share their custom configurations on social media platforms, increasing engagement and visibility.
- Enhanced User Interface: Improve the overall user interface with better design and usability, making it easier for users to navigate and interact with the application.
- Real-Time Updates: Implement real-time updates for stock levels, price changes, and other dynamic data to provide users with the most up-to-date information.
- Personalized Recommendations: Add features to provide personalized recommendations based on user preferences and past interactions.
- Improved Error Handling: Enhance error handling to provide more informative and user-friendly error messages.
- Accessibility Improvements: Ensure the application is accessible to users with disabilities by following best practices for web accessibility.
- Include deployment in docker": We could use docker to deploy this application. Using docker-compose could help us to deploy BE and FE simultaneously.