Selling merchandise in the modern era requires digital solutions. For this project, you'll be tasked with designing and constructing an online student store for the College of CodePath. The web app consists of a frontend user interface for potential customers to browse available goods and a backend API to handle data management. The API will be built with Node and Express, and the UI will be built with React.
Check out our deployed Student Store for reference! Explore the exemplar by trying the following tasks:
- Click on the different categories (clothing, food, etc.) to filter the list of products.
- Search for an existing product.
- Search for a product that doesn't exist.
- Add several products to the shopping cart.
- Checkout and view the final receipt.
- The website displays header, banner, search, product grid, about, contact, and footer section.
- The website displays the products at the GET /store endpoint on initial page load.
- Users can click on a category (clothing, food, etc.) to filter the product grid by type.
- Users can search for products.
- User can click on a product in the grid to navigate to a new page containing additional product details.
- Users can click to expand the shopping cart in the left navigation.
- Users can click the '+' button on a product cart to increment that product in the shopping cart.
- Users can click the '-' button on a product cart to decrement that product in the shopping cart.
- The shopping cart displays a table of products, quantities, subtotal, tax, and total.
- Added advanced CSS (floating giant codepath image)
- Make categories appear and dissapear when clicking hamburger button
- Added NotFound component that renders page when product does not exist.
- User can click to expand the shopping cart in the left navigation.
- Users can click the '+' button on a product cart to increment that product in the shopping cart.
- Users can click the '-' button on a product cart to decrement that product in the shopping cart. If the count is zero, the product should be removed from the cart.
- The shopping cart displays a table of products, quantities, subtotal, tax, and total.
- Users can checkout, and receive a receipt confirming their purchase.
- Create an endpoint for fetching all orders in the database and an endpoint for serving an individual order based on its ID.
- Build a page in the UI that displays the list of all past orders. The user should be able to click on any individual order to take them to a more detailed page of the transaction.
- Allow users to use an input to filter orders by the email of the person who placed the order.
- Added onchange event when typing email and name of person in the checkoutform. It changes the name and email while typing.
- CSS animation (floating logo)
FTL CodePath Student Store - Alejandro Irizarry - Watch Video
Student Store - 23 June 2023 - Watch Video
