In this project, I harnessed the capabilities of Next.js and seamlessly integrated the dummyJSON API (https://dummyjson.com/docs) to craft a dynamic web application that excels in the following functionalities:
- Implemented a robust login system within the application.
- Successfully retrieved and prominently displayed the user's email from the login response.
- Developed a comprehensive product listing feature, showcasing all available products.
- Implemented a user-friendly pagination mechanism, allowing seamless navigation through the list of products.
- Implemented an intuitive feature enabling users to access detailed information about a specific product.
- Ensured that the product details are presented in a clear and user-friendly manner.
- Established a seamless interface for users to explore and discover all available product categories.
- Implemented a streamlined process for users to view products within a selected category, enhancing the overall user journey.
- Leveraged the power of Chart.js to integrate an insightful pie chart.
- Visualized the distribution of products across different categories, providing users with a quick and engaging overview.
These functionalities collectively contribute to a well-rounded and user-centric web application, where users can seamlessly navigate, explore products, and gain valuable insights into product distribution.
Feel free to explore the application and experience these features firsthand!
- Framework: Next.js
- Styling: Tailwind CSS
- Data Source: dummyJSON API
- Charting Library: Chart.js
- Icons: React Icons
Access the deployed application here: https://dummyjson-assessment.vercel.app/
Clone the project repository or download the source code to your local machine.
Install the required dependencies by running:
npm install
# or
yarn install
# or
bun installStart the development server:
npm run dev
# or
yarn dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
- Upon launching the application, you will be directed to the login page.
- Refer to the dummyJSON documentation for valid login credentials: https://dummyjson.com/users.
- Example credentials: Username: atuny0 Password: 9uQFF1Lh
-
Successful login redirects you to the homepage, where links to the products, categories, and pie chart pages are available.
-
Utilize the icons at the top right corner for profile access and logout functionality.