🎊 Welcome to your Test Task!

● Your task is to create a simple e-commerce website that allows users to view a list of products, add
products to their cart, and place orders.
● You will be using ReactJS for the frontend and NodeJS for the backend. The backend will provide
two APIs:
○ one to fetch product data and another to place orders.
○ There is no need for user authentication.

🚪Frontend Requirements
1. Product Listing Page
a. Create a page that displays a grid of products.
b. Each product card should include:
i. Product image.
ii. Product name.
iii. Product description.
iv. Product price.
v. An "Add to Cart" button (either with the text "Add to Cart" or a "+" icon).
2. Cart Page
a. Implement a cart page accessible via a "Cart" button in the header.
b. Display the products added to the cart with their names, prices, and a quantity field.
c. Calculate and display the total price of the items in the cart.
d. Include a form to collect user details:
i. First name (required).
ii. Last name (required).
iii. Address (required).
3. Order Placement
a. Implement a "Place Order" button on the cart page.
b. When the user clicks "Place Order," send a request to the backend to place the order.
c. Ensure that the backend validates that the first name, last name, and address are
provided before processing the order.
d. Display a success message upon successful order placement.

💪🏻 Backend Requirements
1. Product Data API
 a. Create an API endpoint to fetch a list of products.
b. Products should include at least the following attributes: name, image, description, and
price.
c. Store product data manually (e.g., in-memory array).
d. Place Order API
2. Create an API endpoint to place an order.
a. Validate that the first name, last name, and address are provided in the request.
b. After successful validation, simulate order placement (e.g., print order details to the
console).
c. Respond with a success message.

⚒️ Technical Stack
● Frontend: ReactJS
● Backend: NodeJS
● Styling: You are free to use any library or styling approach you prefer for the user interface.

🪬 Additional Guidelines
● Use proper project structure for both frontend and backend.
● Implement error handling on the frontend and display user-friendly error messages when
necessary.
● Write clean and maintainable code.
● You may use any additional libraries or frameworks you find suitable.
● Do not include node_modules in the zip.

📑 Marking Criteria
1. The task is working properly or not.
2. Proper Naming conventions are used or not.
3. Code is easy to read or not.
4. Reusable components are created or not.
5. Advanced concepts of react are used or not in the project.

🏌️And Now,
Good luck, and we look forward to seeing your implementation!