This is a ecommerce website that uses data from DummyJSON API. This was built using React with TypeScript and TailwindCSS for styling and responsiveness.
This is a ecommerce store that displays products using the data from DummyJSON API which is great resource to showcase frontend development. I enjoy building the project as it really helped me to understand the importance of using Typescript and really understand the data that I am using in my project.
- Frontend: React, TypScript, TailwindCSS, Component Library: DaisyUI
- Backend: DummyJSON API, Custom Hooks, Type Definitions
- APIs: Dummy JSON API
- Version Control: Git, GitHub
- Product List: View a comprehensive list of products.
- Product Details: Access detailed information about each product, including biography, achievements, and historical significance.
- User Interface: Designed for ease of navigation with a user-friendly interface.
- Integration: Connected with Historical Figures API and Wiki API for accurate and up-to-date information.
-
Type Definition: Created TypeScript definitions (e.g., Products.d.ts) to ensure type safety and reduce errors when fetching and using data from APIs.
-
Custom Hooks: Developed custom hooks (e.g., useProduct) to handle data fetching and state management efficiently.
-
Responsiveness: Applied TailwindCSS for creating a responsive and visually appealing design.
To set up the project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/historical-figures.git cd historical-figures -
Install dependencies:
npm install
-
Start the development server:
npm start
- Open your browser and navigate to
http://localhost:3000. - Click on Explore or Shop to see all products
- Use the Category select to toggle between different types of products depending on
- You can add products to the cart and delete from the cart.
This project is licensed under the MIT License. See the LICENSE file for details.