LTP Labs — Creation of a Simple Online Store

Build a simple e-commerce app in Remix that lets users view products, add them to a shopping cart, and review the cart.
The app should be responsive and follow frontend best practices for code quality and usability.

---

Building and Running

1) Build

npm run build

2) Start production server

npm start

App at http://localhost:3000

Scope & Checklist

Application Structure

• Create a Remix application with the following pages:
  • Homepage
  • Product detail
  • (Optional) Shopping Cart
• Use the provided Figma file as the foundation and reproduce it as faithfully as possible.

Homepage

• Display a list of products
• Fetch products (you may use the Dummy JSON API provided)
• Each product links to its detail page
• Allow sorting (e.g., title/price, asc/desc)
• Allow filtering by category
• Include pagination

Product Detail Page

• Fetch the selected product (Dummy JSON API allowed)
• Implement all elements from the Figma design (extra elements are welcome)
• “Add to cart” adds the product to the cart

(Optional) Shopping Cart

• Implement a cart page within the app layout
• Provide access to the cart from an icon in the header
• Display added products, quantities, and total
• Allow removing products from the cart

Design

• (Optional) Use Tailwind CSS for styling
• Ensure the app works well on mobile and desktop

Development Resources

• Figma
• Dummy JSON API

Key Notes

• Appropriately utilize Remix loader and action functions
• Follow the Remix routing structure
• Submit the project on a version control platform