Welcome to Mini Ecommerce Web App, a simple and modern e-commerce application built with Next.js, TypeScript, and Tailwind CSS. This project includes essential features like product listing, search & filtering, and a interactive shopping cart.
The UI is implemented based on the Belanja Ecommerce Web Design from Shayna Kit.
- User authentication using DummyJSON Auth API.
- Endpoint: https://dummyjson.com/docs/auth
- Users must log in before accessing products and the cart.
- Displays products in a responsive grid layout.
- Product information includes:
- Product Image
- Product Name
- Price
- Category
- Location
- Rating
- Supports pagination or infinite scroll to load more products.
- Product API: https://dummyjson.com/products?limit=10&skip=10
- Sidebar filters on the left side of the product page:
- Price
- Category
- Location
- Rating
- Filters can be combined, e.g.,
category + price. - Helps users find products based on multiple criteria.
- Search form at the top of the product page.
- Dynamically search products using API:
- Shows results in real-time as users type.
- Displays products added to the cart.
- Supports:
- Adding products to the cart
- Removing products from the cart
- Cart API:
- Get user cart: https://dummyjson.com/carts/user/1
- Add product to cart: https://dummyjson.com/carts/1
- Framework: Next.js
- Language: TypeScript
- Styling: Tailwind CSS
- Responsive: Mobile & desktop friendly
- API: DummyJSON
- Clone the repository:
git clone <repository-url>
cd HNI-Assessment-Mini-Ecommerce
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open the app in your browser:
http://localhost:3000
- This app uses DummyJSON API, so all data is dummy and intended for prototyping purposes.
- Infinite scroll loads products progressively based on the
skipparameter. - Filters and search can be combined for more precise results.
- Login Page
- Product Listing Page
- Filter Sidebar & Search Bar
- Cart Page
✨ Enjoy exploring the Mini Ecommerce Web App!