Frontend Engineer Assignment: Simple E-Commerce Site

Objective:

Develop a simple e-commerce application that allows users to browse products, add them to a cart, and
simulate a checkout process.

Key Features:

● Product Listing:
● Display a list of products. Each product should include a name, image, price, and a "Add
to Cart" button.
● Implement pagination or infinite scrolling to load more products.
● Product API Integration:
● Fetch product data from a mock e-commerce API like Fake Store API or any similar
service.
● Handle loading states and errors gracefully.
● https://fakestoreapi.com/docs - API
● Implementing cache and loader is a plus
● Shopping Cart:
● Allow users to add and remove products from the cart.
● Display a cart summary with the total items and total price.
● Implement a checkout button that leads to a simple checkout page.
● Checkout Simulation:
● Create a mock checkout form asking for name, address, and payment details (no real
payment processing).
● On submission, display a confirmation message with the order summary.
● HTML/CSS:
● Design a clean and responsive layout for the product listing, cart summary, and checkout
page.
● Ensure proper usage of HTML and CSS to create an attractive and user-friendly
interface.
● Git:
● Use Git for version control.
● Include a README file with clear instructions on how to set up and run the project.

Technical Requirements:

● Use HTML5, CSS3, JavaScript (ES6+) and React.

● NextJS usage will be preferred.
● Ensure compatibility with major browsers (Chrome, Firefox, Safari).
● Write clean, maintainable, and well-documented code.

Submission:

● Host the code on a GitHub repository.

● Deploy the application on a free hosting service like GitHub Pages, Netlify, or Vercel.
Evaluation Criteria:

● Functionality: All features are implemented and work as expected.

● Code Quality: Code is well-organized, clean, and follows best practices.
● Error Handling: Application handles loading, errors, and empty states gracefully.
● User Experience: The application is user-friendly and visually appealing.
● Documentation: Code is well-documented, and the README provides clear setup instructions.