├── #1 Fitness Equipment and Accessories.md ├── #2 Mechanical Keyboard Shop.md ├── #3 Campers Shop.md ├── #4 Sporting Goods.md ├── #5 Online Nursery Website.md ├── Project README Template.md └── README.md /#1 Fitness Equipment and Accessories.md: -------------------------------------------------------------------------------- 1 | # #1 Fitness Equipment and Accessories 2 | 3 | ## Overview 4 | 5 | We're developing a comprehensive e-commerce website for fitness equipment using React, Redux, Mongoose, and Express. This platform will offer a seamless shopping experience with features like product listings, detailed product pages, and a user-friendly cart system. Additionally, it will include robust product management capabilities for administrators and bonus features such as debounced search and page refresh warnings to enhance performance and user experience. Optional integration with Stripe will provide secure payment processing. This project aims to create a modern, efficient, and user-centric online store for fitness enthusiasts. 6 | 7 | 8 | ### Backend Requirements 9 | 10 | The backend should be built using Node.js, Express, and MongoDB. You can make a single-page server like you did in level 1, or optionally, you can use TypeScript along with a modular pattern to structure the codebase. 11 | 12 | 13 | 14 | ### Core Pages and Functionalities 15 | 16 | 1. **Homepage** 17 | 2. **Products Page** 18 | 3. **Product Management** 19 | 4. **Product Details Page** 20 | 5. **Cart Page** 21 | 6. **Checkout page** 22 | 7. **About Us Page** 23 | 24 | ### Detailed Requirements 25 | 26 | ### 1\. Homepage 27 | 28 | * **Header Section**: Includes the logo and site name. 29 | * **Navigation Links**: Links to other pages. 30 | * **Hero Section**: Visually appealing hero/branding section. 31 | * **Categories Section**: Displays product categories with images or icons. Clicking on a category redirects the user to the Products page, with the clicked category selected by default. 32 | * **Featured Products**: Displays a few products with a button to view the details page. There will be a button called explore more which will redirect the user to the products page. 33 | * **Benefits Section**: Highlights the benefits of using the products with images and text. 34 | * **Image Gallery**: Showcases images of healthy individuals who have used your products, displayed in a mosaic view (For reference: [https://ps.w.org/photo-gallery/assets/screenshot-5.png?rev=2039606](https://ps.w.org/photo-gallery/assets/screenshot-5.png?rev=2039606)). 35 | * **Footer**: Includes contact information, social media links, and other relevant links. 36 | 37 | ### 2\. Products Page 38 | 39 | * **Product Listings**: Displays all products with images, names, prices, and a button to view details. 40 | * **Searching and Filtering**: 41 | * Search bar to search for products by name. 42 | * Filters for categories and price ranges, allow multiple categories to be selected simultaneously. 43 | * **Category Filters**: Allow multiple categories to be selected simultaneously. If multiple categories are selected, products from all selected categories will be shown. For example, if the "Cardio" and "Strength" categories are selected, products from both categories will be displayed in the product listings. 44 | * Sorting options (ascending and descending by price). 45 | * "Clear Filter" button to reset all filters. 46 | 47 | ### 3\. Product Details Page 48 | 49 | * **Product Information**: Displays product name, price, stock quantity, description, images, and category. 50 | * **Add to Cart Button**: Allows adding the product to the cart. 51 | * **Note**: Duplicate products cannot be added to the cart. If a product that is already in the cart is added again, only the quantity for that product will increase, up to the stock count of that product. When the quantity reaches the stock count, the "Add to Cart" button for that product will be disabled. 52 | 53 | 54 | 55 | ### 4\. Cart Page 56 | 57 | * **Cart Items**: Lists products added to the cart with their quantities. 58 | * Controls to increase or decrease the quantity of each product (The quantity should not exceed the available stock). 59 | * Button to remove a product from the cart. Should prompt for confirmation before removing. 60 | * **Pricing Details**: Displays detailed total pricing below the product list, updating dynamically as product quantities change or products are removed. 61 | * **Proceed to checkout Button**: Allows the user to place an order. 62 | * If the product is in stock, this button will be activated. If the product is out of stock, the button will be deactivated. Clicking this button will take the user to the checkout page. 63 | 64 | ### **5\. Checkout Page** 65 | 66 | **User Details:** Here, you will collect user information such as name, email, phone number, and delivery address. 67 | 68 | **Payment Methods:** There will be two types of payment methods: 69 | 70 | 1. **Cash on Delivery:** By choosing this option and then clicking the "Place Order" button, the user will be directed to a success page, and the quantity will be deducted from the actual product stock. 71 | 2. **Stripe (optional):** By choosing this option and then clicking the "Place Order" button, the user will be redirected to the Stripe payment method. After a successful payment, the user will be directed to a success page, and the quantity will be deducted from the actual product stock. 72 | 73 | 74 | 75 | ### 6\. Product Management 76 | 77 | * **Product List Table**: Displays products in a table format with columns for product name, price, category, and actions. 78 | * **Action Buttons**: For updating and deleting products. 79 | * **Updating a Product**: Should allow modifying existing details. The fields should be prefilled with existing data. 80 | * **Deleting a Product**: Should prompt for confirmation before deletion. 81 | * **Button to Create a New Product**: Allows adding a new product. 82 | * **Adding a Product**: Should include fields for name, price, description, images (you can use ImgBB for image upload or allow direct link entry), category, and stock. 83 | * **Note**: All update, delete, and create actions should reflect in real-time, implementing an optimistic update of the UI. 84 | 85 | 86 | 87 | ### 7\. About Us Page 88 | 89 | * **Company Overview**: Briefly describe the company's history, mission, and vision. 90 | * **Team Introduction**: Introduce the key members of the team with their roles and brief bios. 91 | * **Customer Testimonials**: Include a few testimonials from satisfied customers. 92 | * **Contact Information**: Provide detailed contact information and encourage users to reach out with questions or feedback. 93 | 94 | _Note: Try to make the About Us page as attractive and creative as possible by using some basic animations and fancy gradients._ 95 | 96 | 97 | 98 | ### 8\. UI/UX 99 | 100 | * **UI/UX Quality**: The user interface should be reasonably good, with wisely chosen colour combinations. The user experience should be smooth and intuitive. Consider using UI/UX design principles to enhance the overall aesthetics and usability of the site. There will be a dedicated mark allocated for UI/UX quality. 101 | * **Responsiveness**: The entire website must be responsive for both mobile and desktop devices. 102 | 103 | ### Bonus Features 104 | 105 | * **Debounce API Calls**: Implement debouncing for the search functionality to reduce the number of API calls. 106 | * **Page Refresh Warning**: Show a warning message when refreshing the page if the cart is not empty, to prevent loss of cart data. 107 | 108 | ### Optional Features 109 | 110 | * **Integrate Stripe Payment**: For processing payments. 111 | * **Implement Pagination**: In the Products page, with a custom implementation. 112 | 113 | _Note: We highly recommend implementing these optional features, as they will make your project stand out._ 114 | 115 | ### 116 | 117 | 118 | 119 | ## References for Idea Generation 120 | 121 | Here are some websites to inspire ideas for your project. These references are only for idea generation and should not be copied directly: 122 | 123 | - [https://shop.lifefitness.com/](https://shop.lifefitness.com/) 124 | - [https://mightyfitness.shop/](https://mightyfitness.shop/) 125 | - [https://www.fitnessavenue.ca/](https://www.fitnessavenue.ca/) 126 | - [https://www.northernfitness.ca/](https://www.northernfitness.ca/) 127 | 128 | > Note: The references are only for idea generation. Do not copy the design from these sources. 129 | -------------------------------------------------------------------------------- /#2 Mechanical Keyboard Shop.md: -------------------------------------------------------------------------------- 1 | # #2 Mechanical Keyboard Shop 2 | 3 | ## **Overview:** 4 | 5 | We're developing an e-commerce website exclusively for mechanical keyboards using React, Redux, Mongoose, and Express. Our site will feature easy product browsing, detailed product pages, and a smooth cart system. Administrators will have powerful tools for managing products, and users will enjoy features like fast search, page refresh warnings, and filtering. Optional integration with Stripe ensures secure payments. Our goal is to create a modern and user-friendly online store for mechanical keyboard enthusiasts. 6 | 7 | 8 | 9 | Please develop this comprehensive e-commerce website with the following core pages and functionalities: 10 | 11 | * Homepage 12 | * Products Page 13 | * Product Details Page 14 | * Cart Page 15 | * Checkout Page 16 | * Product Management/Dashboard Page 17 | * About Us Page 18 | * Contact Us Page 19 | 20 | ### Technology Stack 21 | 22 | The project will be built using the following technologies: 23 | 24 | **Frontend**: React with Vite, TypeScript, Redux, RTK Query. 25 | 26 | **Backend:** TypeScript, Node, Express, MongoDB, Mongoose, Zod. 27 | 28 | 29 | 30 | ### Backend Requirements 31 | 32 | The backend should be built using Node.js, Express, and MongoDB. You can make a single-page server like you did in level 1, or optionally, you can use TypeScript along with a modular pattern to structure the codebase. 33 | 34 | 35 | 36 | ### Detailed Requirements 37 | 38 | #### 1\. Homepage / Landing Page 39 | 40 | * **Header Section** / **Navbar :** 41 | * Display the logo or the website name at the top left of the navbar. 42 | * Provide navigation links to the following _navbar items:_ 43 | * Home 44 | * Products 45 | * About Us 46 | * Contact Us 47 | * Product Management/Dashboard. 48 | * Include a **Cart Icon** at the right most part of the navbar, that shows the number of items currently in the cart. 49 | 50 | > All the navbar items including the website logo / website name, cart icon must be clickable and should redirect to their corresponding pages. You can also handle the active link. 51 | 52 | * **Hero Section:** 53 | * A large, visually appealing section at the top of the page (below the navbar) showcasing the brand and products to attract visitors' attention. 54 | * **Service Advertisement:** 55 | * A section advertising the benefits and services offered by the store. Example : Free Shipping, Lowest Delivery Charge, 24/7 Support etc. (For reference: [https://prnt.sc/Noo5bJlk\_QDc](https://prnt.sc/Noo5bJlk_QDc)) 56 | 57 | 58 | 59 | * **Featured Products:** 60 | * Show **6 featured products card** with a button that takes the user to the product details page. 61 | 62 | > Always show the latest 6 created products from your database. hints: You can use the sort method in this case. 63 | > 64 | > * The featured products must have the following properties on the card: 65 | > * Image 66 | > * Title / Name 67 | > * Brand 68 | > * Available Quantity 69 | > * Price 70 | > * Rating (In Stars) 71 | > * See Details Button 72 | > * **See More Button,** that will take the user to **Products Page,** showing all the products. The button should be at the bottom of this section. 73 | 74 | 75 | 76 | * **Top Featured Brands:** 77 | * Display logo and title of popular keyboard brands. 78 | 79 | > You can use static / dynamic json data for this section. 80 | 81 | 82 | 83 | * **Customer Reviews:** 84 | * A section displaying testimonials and reviews from customers, with accompanying images. 85 | * Carousel can be used to show the reviews. 86 | 87 | > You can use static / dynamic json data for this section. 88 | 89 | 90 | 91 | * **Extra Sections:** 92 | * Two additional sections relevant to mechanical keyboards, such as: 93 | * "Why Choose Mechanical Keyboards?" 94 | * "Customizable Options" 95 | * **Footer:** 96 | * Include contact information, social media links, and other relevant links at the bottom of the page. The links must be clickable and should redirect to their corresponding pages 97 | * Footer design should be standard. 98 | 99 | #### 2\. Products Page : 100 | 101 | * Display all products in card view. Each product card should show : 102 | - Image 103 | * Title / Name 104 | * Brand 105 | * Available Quantity 106 | * Price 107 | * Rating (In Stars) 108 | * Show Details Button 109 | * **Searching and Filtering:** 110 | * A search bar to allow users to search for products by name, brand. 111 | * Filters for product price range. 112 | * Options to sort products by price (low to high and high to low). 113 | * A clear filter button to reset all applied filters. 114 | 115 | #### 3\. Product Details Page 116 | 117 | * **Product Information:** 118 | * Show the following properties: 119 | * Image 120 | * Title / Name 121 | * Brand 122 | * Available Quantity 123 | * Price 124 | * Rating (In Stars) 125 | * Description 126 | * Add To Cart Button 127 | * Shopping Cart 128 | * **Add to Cart**: Users can add products to their cart by clicking an "Add to Cart" button. If a product is out of stock, it cannot be added to the cart. 129 | * **Quantity Management**: When adding a product to the cart, the quantity in the cart icon will increase. Duplicate products are not added; instead, the quantity of the existing product is increased. Users cannot add more products than the available quantity in stock 130 | 131 | #### 4\. Cart Page 132 | 133 | * **Cart Items:** 134 | * List all products that have been added to the cart, along with their quantities. 135 | * Include controls to increase or decrease the quantity of each product. 136 | * Provide a button to remove a product from the cart. 137 | * **Pricing Details:** 138 | * Show the detailed total pricing below the product list. 139 | * Update the total price dynamically as products are added, removed, or quantities are changed. 140 | * **Proceed To Checkout Button**: Allows the user to place an order. 141 | * If the product is in stock, this button will be activated. If the product is out of stock, the button will be deactivated. Clicking this button will take the user to the checkout page. 142 | 143 | 144 | 145 | #### **5\. Checkout Page** 146 | 147 | * **User Details:** Here, you will collect user information such as name, email, phone number, and delivery address. 148 | * **Payment Methods:** There will be two types of payment methods: 149 | 1. **Cash on Delivery:** By choosing this option and then clicking the "Place Order" button, the user will be directed to a success page, and the quantity will be deducted from the actual product stock. 150 | 2. **Stripe (optional):** By choosing this option and then clicking the "Place Order" button, the user will be redirected to the Stripe payment method. After a successful payment, the user will be directed to a success page, and the quantity will be deducted from the actual product stock. 151 | 152 | 153 | 154 | #### 6\. Product Management/Dashboard Page 155 | 156 | * **Product List Table:** 157 | * Display products in a table format. The table should include columns for the product name, price, brand, and actions. 158 | * **Action Buttons:** 159 | * Include buttons for updating and deleting products. 160 | * Updating a product should open a form in a modal allowing the user to modify existing details. 161 | * Deleting a product should open a confirmation modal, asking the user for confirmation before removal. 162 | * **Adding a Product:** 163 | * Include a button to create the new product. 164 | * Provide a form to add new products with fields for name, price, description, available quantity, rating, image (you can use ImgBB for image upload or allow direct link entry), and brand. 165 | 166 | > All update, delete, and create actions should reflect in real-time, implementing an optimistic update of the UI. 167 | 168 | #### 7\. About Us Page 169 | 170 | - Try to make the About Us page as attractive and creative as possible by using some basic animations and fancy gradients. 171 | 172 | #### 8\. Contact Us Page 173 | 174 | - Provide detailed contact information and encourage users to reach out with questions or feedback. 175 | * Try to make the page as attractive by using some basic animations. 176 | 177 | #### 9\. UI/UX 178 | 179 | * **UI/UX Quality**: The user interface should be reasonably good, with wisely chosen color combinations. The user experience should be smooth and intuitive. Consider using UI/UX design principles to enhance the overall aesthetics and usability of the site. There will be a dedicated mark allocated for UI/UX quality. 180 | * **Responsiveness**: The entire website must be responsive for both mobile and desktop devices. 181 | 182 | 183 | 184 | ### Bonus Features 185 | 186 | * **Debounce API Calls:** 187 | * Implement debouncing for the search functionality to reduce the number of API calls and improve performance. 188 | * **Page Refresh Warning:** 189 | * Show a warning message when the user attempts to refresh the page if the cart is not empty, to prevent the loss of cart data. 190 | * **Animations**: 191 | * Try to use micro-animations on your website 192 | 193 | ### Optional Features 194 | 195 | * **Integrate Stripe Payment**: For processing payments. 196 | * **Implement Pagination**: In the Products page, with a custom implementation. 197 | 198 | _Note: We highly recommend implementing these optional features, as they will make your project stand out._ 199 | 200 | 201 | 202 | ### References for Idea Generation 203 | 204 | Here are some websites to inspire ideas for your project. These references are only for idea generation and should not be copied directly: 205 | 206 | - [https://mechanicalkeyboards.com/](https://mechanicalkeyboards.com/) 207 | - [https://kbdfans.com/](https://kbdfans.com/) 208 | - [https://keygem.com/](https://keygem.com/) 209 | - [https://keebsforall.com/](https://keebsforall.com/) 210 | - [https://kono.store/](https://kono.store/) 211 | 212 | > Note: The references are only for idea generation. Do not copy the design from these sources. -------------------------------------------------------------------------------- /#3 Campers Shop.md: -------------------------------------------------------------------------------- 1 | # #3 Campers Shop 2 | 3 | # Project Overview 4 | 5 | Campers Shop is an e-commerce website dedicated to providing all the necessary and fun items for camping enthusiasts. The design should be user-friendly and visually appealing, taking inspiration from sites like [Adventure Shop](https://adventureshop.mt/) , [Camping Shop](https://www.decathlon.co.uk/sports/camping), [The Camperco Shop](https://thecampercoshop.com/) (do not copy-paste, just use it for brainstorming). 6 | 7 | ## Core Pages and Functionalities 8 | 9 | Develop a comprehensive e-commerce website with the following core pages and functionalities: 10 | 11 | * Homepage 12 | * Products Page 13 | * Product Details Page 14 | * Product Management 15 | * Cart Page 16 | * About Us Page 17 | 18 | ## Detailed Requirements 19 | 20 | ### 1\. Homepage 21 | 22 | * **Header:** Include logo and site name. 23 | * **Navbar:** Navigation links to other pages such as About Us, Products Page, and other necessary links. Include a cart icon, wishlist icon, or other essential icons or links. 24 | * **Hero Section:** Create a visually appealing section to captivate visitors. 25 | * **Best Selling/Recommended Products Section:** Highlight products you want to introduce to the market. add a view more button under this section, that will navigate to the products page. 26 | * **Categories Section:** Display product categories with images or icons. 27 | * **Featured Products:** Show a few highlighted products with a button to view the details page. 28 | * **Unique Section:** Add a distinctive section, such as video blogs, testimonials, or featuring tour groups. 29 | * **FAQ Section:** Include frequently asked questions about products, shipping, or other important thing. 30 | * **Footer:** Include contact information, social media links, and other relevant links. 31 | 32 | ### 2\. Products Page 33 | 34 | * **Product Listings:** Display all products in a grid or list view. 35 | * **Product Details Button:** Redirect to the Product Details page upon clicking. 36 | * **Searching and Filtering:** 37 | * Search bar for searching products by name or description. 38 | * Filters for categories and price range. 39 | * Sorting options (ascending and descending by price). 40 | * Clear button to reset all filters. 41 | 42 | ### 3\. Product Details Page 43 | 44 | * **Product Information:** Display product name, price, stock-quantity, description, category, ratings, and images. 45 | * **Add to Cart Button:** Allow users to add the product to the cart. 46 | * **Note:** Duplicate products cannot be added to the cart. If a product is already in the cart, only its quantity will increase, up to the available stock. If the quantity reaches the stock limit or the product is out of stock, the "Add to Cart" button for that product will be disabled. 47 | 48 | ### 4\. Product Management 49 | 50 | * **Product List Table:** Display products in a table format with columns for product image, name, price, category, and actions. 51 | * **Actions:** 52 | * Button to create a new product. 53 | * Allow modification of existing details for updating a product. 54 | * Allow to Delete products, add Prompt confirmation for deleting a product. 55 | 56 | ### 5\. Cart Page 57 | 58 | * **Cart Items:** List products added to the cart with their quantities. 59 | * **Quantity Controls:** Increase or decrease the quantity of each product. 60 | * **Minimum Quantity:** 1 61 | * **Maximum Quantity:** Limited by the available stock of the product. 62 | * **Remove Product Button:** Allow users to remove a product from the cart. Should prompt for confirmation before removing. 63 | * **Pricing Details:** Display detailed total pricing below the product list. Update dynamically when a product is added, removed, or when the quantity is increased or decreased. 64 | * **Place Order Button:** Allow the user to place an order. 65 | * If the product is in stock, this button will be activated. If the product is out of stock, the button will be deactivated. Clicking this button will take the user to the checkout page. 66 | 67 | ### **6\. Checkout Page** 68 | 69 | **User Details:** Collect user information, including name, email, phone number, and delivery address, through a form. 70 | 71 | **Payment Methods:** 72 | 73 | * **Cash on Delivery:** Selecting this option and clicking the "Place Order" button will redirect the user to a success page, and the product quantity will be deducted from the stock. 74 | * **Stripe (optional):** Selecting this option and clicking the "Place Order" button will redirect the user to the Stripe payment page. After a successful payment, the user will be directed to a success page, and the product quantity will be deducted from the stock. 75 | 76 | ### 7\. About Us Page 77 | 78 | * **Contact Information:** Display phone number, email address, and physical address. 79 | * **Map:** Embed a Google Map showing the location of the shop. 80 | * **Social Media Links:** Include icons linking to social media pages. 81 | * **Mission Statement:** Share the mission and values of the company. 82 | * **Team Members:** Introduce key team members with photos and brief bios. 83 | 84 | ### 8\. UI/UX Enhancements 85 | 86 | * **Responsive Design:** Ensure the website is fully responsive and optimized for all devices (desktops, tablets, smartphones). 87 | * **State Management:** Use Redux for state management to ensure a consistent and scalable application state across the website. 88 | * **Fast Loading Times:** Optimize images and use efficient code to ensure fast loading times. 89 | * **Intuitive Navigation:** Design a clear and easy-to-use navigation system. 90 | * **Consistent Design Language:** Maintain consistent colors, fonts, and styles across all pages. 91 | * **Accessibility (optional):** Ensure the website meets accessibility standards (e.g., WCAG 2.1) for users with disabilities. 92 | * **Interactive Elements:** Use animations and interactive elements sparingly to enhance the user experience without overwhelming the user. 93 | 94 | ### Bonus Features 95 | 96 | * **Image Gallery:** Showcase images of products page. Implement a magnifier effect on product images (example: [W3Schools Image Magnifier](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass)). 97 | * **Page Refresh Warning:** Show a warning message when refreshing the page if the cart is not empty, to prevent loss of cart data. 98 | 99 | ### Optional Features 100 | 101 | * **Stripe Integration:** Implement a payment gateway. 102 | * **Random Featured Product:** Display 3 products by default and fetch random data every 10 seconds using RTK Query. 103 | 104 | ## Technical Specifications 105 | 106 | * **Frontend:** Use a modern JavaScript framework React, Redux, etc. 107 | * **Backend:** Implement necessary CRUD operations for managing products with node, and express. 108 | -------------------------------------------------------------------------------- /#4 Sporting Goods.md: -------------------------------------------------------------------------------- 1 | # #4 Sporting Goods 2 | 3 | Suppose, you are building a comprehensive e-commerce website for your sporting goods business, offering a wide range of equipment and accessories for various sports. **On this platform, there will be a single user role that can handle both customer and admin tasks.** 4 | 5 | 6 | 7 | This website will have the following core pages: 8 | 9 | * **Homepage** 10 | * **About Us Page** 11 | * **All Products Page** 12 | * **Manage Products Page** 13 | * **Single Product Page** 14 | * **Cart Page** 15 | * **Checkout Page** 16 | 17 | 18 | 19 | * * * 20 | 21 | ### Main Requirements 22 | 23 | 24 | 25 | ### **1\. Navbar & Footer** 26 | 27 | * A navbar with logo and necessary menu items **(e.g. All Products, Manage Products, Cart, About Us)** 28 | * A meaningful footer. Must contain social media icons and the websites' page links 29 | 30 | 31 | 32 | ### 2. **Homepage** 33 | 34 | * **Hero Section** - Must use a carousel with discount information 35 | * **Featured section** - This section will feature latest products in card view. Each card will have product name, category, stock quantity, brand, rating using a third party package [react-rating](https://www.npmjs.com/package/react-rating), product description, price, image and View Details button. On clicking View Details, the user will be redirected to the Single Product page. 36 | * **Category** \- A section will display the categories of sporting goods. If a user clicks on a category, they will be redirected to the 'All Products' page, showing only the products based on that category. 37 | * **Contact Us Section -** This section will have a form with relevant fields. 38 | 39 | 40 | 41 | **Note:** 42 | 43 | **`[optional]`** You can use [EmailJS](https://www.emailjs.com/) or **NodeMailer** to make the contact form functional. 44 | 45 | 46 | 47 | ### 3\. **About Us** 48 | 49 | * Information about the company 50 | * Mission and vision statements 51 | * Contact information 52 | * Our Team Section 53 | * Our Store Location Information 54 | 55 | 56 | 57 | ### 4\. **All Products** 58 | 59 | * Display all available products. 60 | * Search functionality for users to find specific products based on **name** 61 | * Filter functionality for users to find specific products based on **sport category, price, brand, rating** etc. 62 | * Sorting options (ascending and descending by price). 63 | * "Clear filter" button to reset all filters. 64 | 65 | 66 | 67 | **Note:** Make sure each card has relevant information 68 | 69 | 70 | 71 | ### 5\. **Single Product** 72 | 73 | * Detailed view of a single product. 74 | * Includes **product name, description, category, brand, stock quantity**, **rating using a third party package** [**react-rating**](https://www.npmjs.com/package/react-rating)**, product description, price, image** and **Add To Cart button**. 75 | * You can use [react-photo-view](https://github.com/MinJieLiu/react-photo-view) package to view the image of each product **\[optional\]** 76 | * **Add to Cart Button:** Allows adding the product to the cart. 77 | 78 | **Note** 79 | 80 | * Duplicate products cannot be added to the cart. If a product that is already in the cart is added again, only the quantity for that product will increase, up to the stock count of that product. When the quantity reaches the stock count, the "Add to Cart" button for that product will be disabled. 81 | * Give relevant information and ensure that the design is visually appealing and user-friendly. 82 | 83 | 84 | 85 | ### 6\. **Cart Page** 86 | 87 | * Can be a page or a modal 88 | * View all products added to the cart. 89 | * Implement functionalities to increase/decrease quantity and to remove items from the cart for each products. 90 | * A section that will show the total price including 15% vat for the overall purchase. 91 | * **Proceed to checkout Button:** Allows the user to place an order. 92 | * If the product is in stock, this button will be activated. If the product is out of stock, the button will be deactivated. Clicking this button will take the user to the checkout page. 93 | 94 | 95 | 96 | ### **7\. Checkout Page** 97 | 98 | 99 | 100 | **User Details:** Here, you will collect user information such as name, email, phone number, and delivery address. 101 | 102 | 103 | 104 | **Payment Methods:** There will be two types of payment methods: 105 | 106 | 1. **Cash on Delivery:** By choosing this option and then clicking the "Place Order" button, the user will be directed to a success page with **Go To Home** link and the quantity will be deducted from the actual product stock. 107 | 2. **Stripe (optional):** By choosing this option and then clicking the "Place Order" button, the user will be redirected to the Stripe payment method. After a successful payment, the user will be directed to a success page, and the quantity will be deducted from the actual product stock. 108 | 109 | 110 | 111 | #### 8\. Manage Products 112 | 113 | * User can add a product, delete a product and update a product using RTK Query. 114 | * Make sure while updating the product the user will not have to update every field of the form. The fields should be prefilled with existing data so that the user can update a particular field only. 115 | 116 | 117 | 118 | **Note** 119 | 120 | * Make sure to inform the users with the help of modal/toast after every delete, update and create 121 | * You must show changes on the UI after every actions 122 | * Make sure to make the interface visually appealing and user friendly 123 | 124 | 125 | 126 | ### 9\. Backend 127 | 128 | * You must integrate the backend. You can either use the single-page backend you learned in Level 1 or the backend you learned in the NoSQL track. 129 | 130 | 131 | 132 | ### 10\. Design Requirements 133 | 134 | 135 | 136 | * The design will carry significant marks, emphasizing user experience and visual appeal. 137 | * Responsive design to ensure compatibility across different devices (desktop, tablet, mobile). 138 | * Consistent color scheme and branding related to sports. 139 | 140 | 141 | 142 | ### Bonus Requirements 143 | 144 | 1. Using RTK Query Polling to show latest products after every 30s 145 | 2. Implement animations using any other libraries on the homepage. 146 | 3. A detailed overview of your projects in your readme file and significant amount of meaningful commits 147 | 148 | 149 | 150 | ### Optional Features 151 | 152 | * **Integrate Stripe Payment**: For processing payments. 153 | * **Implement Pagination**: Implement pagination in the All Products page. 154 | 155 | 156 | 157 | _Note: We highly recommend implementing these optional features, as they will make your project stand out._ 158 | 159 | 160 | 161 | * * * 162 | 163 | 164 | 165 | ### **References for Idea Generation** 166 | 167 | 168 | 169 | * [Badger](https://www.bsgsports.com/) 170 | * [Spartax](https://websitedemos.net/sports-wear-store-04/?customize=template) 171 | * [Sport Store](https://ordasoft.com/demo.php?view=pc&t=Sport%20store) 172 | * [MKS](https://mkscricket.com/) 173 | 174 | 175 | 176 | Note: The references are only for idea generation. Do not copy the design from these sources. 177 | -------------------------------------------------------------------------------- /#5 Online Nursery Website.md: -------------------------------------------------------------------------------- 1 | # #5 Online Nursery Website 🌱 2 | 3 | ## Project Overview 🌱 4 | 5 | Develop an online nursery website using React, Redux, Node.js, and Express.js. The website will allow users to browse, filter, and search for products, add products to their cart, and make online payments via Stripe.js. Additionally, there will be a product and category management section for CRUD operations. 6 | 7 | ## 🌟Features 8 | 9 | ### 1\. Public Routes 🚀 10 | 11 | All routes on the website are accessible without authentication. 12 | 13 | ### 2\. Product and Category Management 🛠️ 14 | 15 | * **Product List Table:** 16 | * Display products in a table format. The table should include columns for the image, title, price, category, and actions. 17 | * **Action Buttons:** 18 | * Include buttons for updating and deleting products. 19 | * Updating a product should open a form in a modal allowing the user to modify existing details. 20 | * Deleting a product should open a confirmation modal, asking the user for confirmation before removal. 21 | * **Adding a Product:** 22 | * Include a button to create the new product. 23 | * Provide a form to add new products with fields for category, title, price, quantity, description, rating, image (you can use ImgBB for image upload or allow direct link entry). 24 | 25 | > All update, delete, and create actions should reflect in real-time, implementing an optimistic update of the UI. 26 | ### 3\. Product Browsing 🌿 27 | 28 | - **Filtering, Pagination, Sorting, and Searching**: Users can efficiently browse through our product offerings with advanced filtering, pagination for easy navigation across multiple pages of products, sorting options to arrange products by relevance, price, name, etc and robust searching capabilities to quickly find specific items. 29 | - **Product Details**: Users can view detailed information about a product. 30 | 31 | ### 4\. Shopping Cart 🛒 32 | 33 | - **Add to Cart**: Users can add products to their cart by clicking an "Add to Cart" button. If a product is out of stock, it cannot be added to the cart. 34 | - **Quantity Management**: Duplicate products are not added; instead, the quantity of the existing product is increased. Users cannot add more products than the available quantity in stock 35 | - **Proceed to Checkout**: Users can proceed to the checkout page from the cart section. 36 | 37 | ### 5\. Checkout and Payment 💳 38 | 39 | - **Order Creation**: Orders are created in the database with customer details including name, phone number, address, and other required information collected from a form filled out before proceeding to the payment page. If any selected product is out of stock, the order creation process will be prevented. Upon order creation, the system automatically decreases the quantity of each product in the order from available stock levels. 40 | - **Payment Options** 41 | - **Stripe Integration**: Users can make online payments securely using Stripe.js. (Optional) 42 | - **Cash on Delivery (COD)**: Alternatively, customers can choose to pay in cash upon delivery of their order. 43 | 44 | 45 | 46 | ## 📋Landing Page Components 47 | 48 | - **Navbar**: Navigation bar with links to various sections and pages. 49 | - **Hero Section**: Highlighting the main features or promotions. 50 | - **Product Search, Filter, and Pagination**: Options for users to refine their product search. 51 | - **Category Section**: Display different product categories. 52 | - **Product List**: Display products in card format with image, title, price, rating, and an "Add to Cart" button. 53 | - **Product Details**: Clicking on a product card navigates to the product details page with comprehensive information including image, title, description, price, rating, Category and an "Add to Cart" button. 54 | - **Image Gallery**: Showcases images of the products, displayed in a mosaic view (For reference: [https://ps.w.org/photo-gallery/assets/screenshot-5.png?rev=2039606](https://ps.w.org/photo-gallery/assets/screenshot-5.png?rev=2039606) , [https://assets.hongkiat.com/uploads/free-responsive-image-gallery/8-bootstrap-gallery.jpeg](https://assets.hongkiat.com/uploads/free-responsive-image-gallery/8-bootstrap-gallery.jpeg)). 55 | - **Footer**: Additional links and information. 56 | 57 | ## 📑Page List 58 | 59 | - **Landing Page**: Main page with product search, filtering, pagination, category section, and product list. 60 | - **Products Page**: Dedicated page with product pagination, filtering, and searching. 61 | - **Product Details Page**: Detailed information about a specific product. 62 | - **Checkout/Cart Page**: Displays products added to the cart and allows users to proceed to checkout. 63 | - **Payment Page**: Page for handling payments through Stripe.js. 64 | - **Product and Category Management Page**: Interface for managing products and categories. 65 | 66 | ## 🗂️State Management 67 | 68 | - **Redux**: Use Redux to manage the state for products, categories, cart, and other actions. 69 | - **Actions and Reducers**: Create actions and reducers for managing state changes. 70 | 71 | ## 🎨UI/UX 72 | 73 | - **Quality**: The user interface should be reasonably good, with wisely chosen color combinations. The user experience should be smooth and intuitive. Use UI/UX design principles to enhance the overall aesthetics and usability of the site. 74 | - **Marks Allocation**: There will be a dedicated mark allocated for UI/UX quality. 75 | 76 | ## 🎁Bonus Features 77 | 78 | - **Debounce API Calls**: Implement debouncing for the search functionality to reduce the number of API calls. 79 | - **Page Refresh Warning**: Show a warning message when refreshing the page if the cart is not empty, to prevent loss of cart data. 80 | 81 | ## ⭐Optional Features 82 | 83 | These features are recommended to enhance the project but do not have dedicated marks. 84 | 85 | - **Integrate Stripe Payment**: For processing payments. 86 | - **Implement Pagination**: In the Products page, with a custom implementation. 87 | 88 | ## 🌐References for Idea Generation 89 | 90 | Here are some websites to inspire ideas for your project. These references are only for idea generation and should not be copied directly: 91 | 92 | - [Treevaly](https://treevaly.com/) 93 | - [Nursery Plants BD](https://nurseryplantsbd.com/) 94 | - [Trees Direct](https://treesdirect.co.uk/) 95 | - [Garden Goods Direct](https://gardengoodsdirect.com/) 96 | - [The Tree Center](https://www.thetreecenter.com/) 97 | 98 | > Note: The references are only for idea generation. Do not copy the design from these sources. 99 | -------------------------------------------------------------------------------- /Project README Template.md: -------------------------------------------------------------------------------- 1 | 2 |
3 |

Comprehensive Project README Template

4 |
5 | 6 | --- 7 | 8 | # Project Name 9 | 10 | ## Introduction 11 | 12 | Brief introduction or tagline about the project. 13 | 14 | ## Project Description 15 | 16 | Detailed description of the project, including its purpose and goals. 17 | 18 | ## Features 19 | 20 | - List of key features or functionalities. 21 | - Bullet points are helpful for clarity. 22 | 23 | ## Technology Stack 24 | 25 | - List of technologies, frameworks, and tools used in the project. 26 | - Example: React, Redux, Node.js, MongoDB, etc. 27 | 28 | ## Installation Guideline 29 | 30 | Instructions on how to install, configure, and get the project running locally. 31 | 32 | ### Prerequisites 33 | 34 | - List any software or dependencies that need to be installed beforehand (if any). 35 | 36 | ### Installation Steps 37 | 38 | 1. Step-by-step instructions on how to install the project. 39 | 2. Provide code examples or commands for clarity. 40 | 41 | ### Configuration 42 | 43 | 1. Create a `.env` file in the root directory of the project. 44 | 2. Add necessary configuration variables in the `.env` file. 45 | Example: 46 | ```bash 47 | PORT=3000 48 | DB_URL=your_db_connection_uri 49 | API_KEY=your_api_key_here 50 | ``` 51 | 3. Explain any specific configuration requirements or variables used in your project. 52 | 53 | ## Usage 54 | 55 | Instructions or examples for using the project. Include screenshots or code snippets if applicable. 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Assignment-4](https://i.ibb.co/1RJYL39/assignment-4.png) 2 | 3 | Welcome to Assignment 4, where you will have the opportunity to showcase your skills in web development by building a dynamic web application. This assignment will require you to integrate various technologies, including React, Redux, Node.js, Express.js, Mongoose, and TypeScript, to create a comprehensive and functional project. 4 | 5 | 6 | ## 🛠️ Technology You Can Use 7 | 8 | - **Frontend Development:** 9 | - React ⚛️ 10 | - Redux 🌀 11 | 12 | - **Backend Development:** 13 | - Node.js 🟢 14 | - Express.js 🌐 15 | - Mongoose 🍃 16 | - TypeScript 📘 17 | 18 | - **Package Management:** 19 | - Any npm packages that are required for your project 📦 20 | 21 | - **Additional Technologies:** 22 | - Feel free to incorporate any additional technologies that you deem necessary for your project 🧩 23 | 24 | --- 25 | 26 | ## 📝 **Instructions:** 27 | 28 | - **Follow Assignment Requirements**: Ensure that your project meets all the specified requirements and features outlined in the assignment description ✅. **You can use any coding pattern in the backend.** 29 | - **Plagiarism Not Allowed**: Your submission must be your own work. Plagiarism will result in a score of 0 🚫. 30 | - **Meaningful Variable Names**: Use clear and descriptive variable names to improve code readability 📝. 31 | - **Code Commenting**: Add comments to explain the purpose of your code sections and important logic. This will help others (and yourself) understand your code better 💬. 32 | - **User Experience and Interface**: Prioritize a better user experience (UX) and user interface (UI). Make your application intuitive, easy to use, and visually appealing 🌟. **The UI/UX section is worth 7 marks.** 33 | - **Consistent Code Style**: Maintain a consistent coding style throughout the project. Follow best practices and coding standards for the technologies you are using 📏. 34 | - **Error Handling**: Implement proper error handling for both frontend and backend to ensure a smooth user experience 🚀. 35 | - **Responsive Design**: Ensure that your application is responsive and works well on different screen sizes and devices 📱💻. 36 | - **Documentation**: Ensure thorough documentation is available. This should encompass detailed instructions for project setup and execution, alongside pertinent details 📚. **For a structured guide, refer to the [project README file template](./Project%20README%20Template.md) . You have to follow the template**. 37 | - **Version Control**: Use version control (e.g., Git) effectively. Commit your changes regularly with meaningful commit messages 💾. 38 | - **Deployment**: Ensure that your application is deployed and accessible via the provided live deployment links. Test the deployment to ensure it works as expected 🌍. 39 | 40 | --- 41 | 42 | ## 📤 **Submission Guidelines:** 43 | 44 | - Submit a well-documented codebase with clear comments 🖋️. 45 | - Make sure to add a README file that explains how to set up and use the application. In the README, include details like the project name, live URL, features, technology used, and other important information. Try to make it look professional by doing some research and making it appealing 📄. 46 | 47 | ## 📤 What You Need to Provide: 48 | 49 | 1. Live Deployment Link (Server and Client) 🌐 50 | 51 | 2. GitHub Repository Links (Server and Client) 📂 52 | 53 | 3. Project Overview Video (A brief video providing an overview of the project) 🎥 54 | 55 | 56 | ## 🔢 Assignment Number Based on the Last Digit of PH Student ID 57 | 58 | | Last Digit of PH Student ID | Assignment Number (Design No) | 59 | | --------------------------- | --------------------------------------------------------------------------------------------- | 60 | | 0, 1 | [SET-1: Fitness Equipment and Accessories](./#1%20Fitness%20Equipment%20and%20Accessories.md) | 61 | | 2, 3 | [SET-2: Mechanical Keyboard Shop](./#2%20Mechanical%20Keyboard%20Shop.md) | 62 | | 4, 5 | [SET-3: Campers Shop](./#3%20Campers%20Shop.md) | 63 | | 6, 7 | [SET-4: Sporting Goods](./#4%20Sporting%20Goods.md) | 64 | | 8, 9 | [SET-5: Online Nursery Website](./#5%20Online%20Nursery%20Website.md) | 65 | 66 | 67 | 68 | ### ⏰ **Deadline:** 69 | 70 | - 60 Marks: July 12, 2024, 11.59 PM ⏳ 71 | - 50 Marks: July 13, 2024, 11.59 PM ⌛ 72 | - After July 13, 30 Marks Deadline 📅 73 | 74 | ***Note: The deadlines are final and will not be extended.*** 75 | 76 | ## 🚫 **Important Note:** 77 | 78 | Plagiarism will not be tolerated. Ensure that the code you submit is your work. Any instances of plagiarism will result in 0 Marks ❌. 79 | 80 | --- 81 | 82 | By following these instructions, you'll be well-equipped to complete Assignment 4 successfully. Good luck! 🍀 --------------------------------------------------------------------------------