SP23-BSE-B Lab Final Exam

Lab Exam: MERN Stack Web Technologies

Objective:
Students will enhance their eCommerce store by implementing a “Checkout” button for the shopping cart. This functionality will allow customers to place an order by providing their address. Additionally, the admin panel must display the orders in descending order of the order date.

Instructions

1. Setup and Requirements:
   • You will work on your existing eCommerce store project.
   • Ensure that the shopping cart functionality is already implemented.
   • If your project does not include a shopping cart, refer to the sample code demonstrated in class and integrate it into your store.
2. Task Description:
   • Add a “Checkout” button to the shopping cart page.
   • On clicking the “Checkout” button:
     • Display a form asking the customer to provide their delivery address (name, street, city, postal code, etc.).
     • Validate the input fields to ensure they are not empty.
   • Once the form is submitted, an order should be placed and stored in your database with the following details:
     • Order ID (Auto-generated).
     • Customer Information (name, address, etc.).
     • Order Items (products in the shopping cart).
     • Order Total (sum of all item prices).
     • Order Date and Time (current timestamp).
3. Admin Panel Requirements:
   • In the admin panel of your store, add functionality to display the list of orders.
   • The orders should be displayed in a table with the following columns:
     • Order ID
     • Customer Name
     • Address
     • Total Amount
     • Order Date and Time
   • Ensure that the orders are sorted in descending order of date (latest orders first).
4. Backend Requirements:
   • Create a new Order model/schema in MongoDB with the required fields (Order ID, customer info, items, total amount, order date).
   • Add an API endpoint to handle the creation of an order when the checkout form is submitted.
   • Add another API endpoint to retrieve all orders for the admin panel.
5. Frontend Requirements:
   • Update the shopping cart page to include the “Checkout” button and address form.
   • Update the admin panel to fetch and display the list of orders from the backend.

Evaluation Criteria

1. Functionality:
   • The “Checkout” button properly collects customer address details.
   • Orders are stored in the database with the correct structure.
   • Admin panel correctly fetches and displays orders in descending order of date.
2. Code Quality:
   • Clear, modular, and reusable code.
   • Proper comments and meaningful variable/function names.
3. UI/UX:
   • The address form and order display should be user-friendly.
   • Use appropriate error messages for validation issues.
4. Testing:
   • Submit at least two test cases:
     • One with valid data.
     • One with invalid/missing data for address fields.
5. Submission:
   • Push your updated project to your GitHub repository.
   • Share the repository link with me.

Extra Credit (Optional)

• Add order status management (e.g., Pending, Delivered).
• Allow customers to view their past orders in a “My Orders” section.
• Include payment integration (can be simulated).

Resources Provided

• Sample code for the shopping cart.
• Sample API endpoints for reference.
• MongoDB schema examples.

Good luck!