khaymanii/bluetech-project

This is Ecommerce product table built using Nextjs, Typescript and TailwindCSS for styling.

Ecommerce Product Table

This project is a frontend application that fetches product data from an API and displays it in a responsive table. The application is built using React,Nextjs, TypeScript, and Tailwind CSS.

Features

• Fetches product data from a public API.
• Displays the data in a responsive table.
• Handles loading states and errors.
• Uses React Context API for state management.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Next.js: A React framework for production.
• TypeScript: A typed superset of JavaScript.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.

Prerequisites

• Node.js (v12.0.0 or later)
• npm (v6.0.0 or later) or yarn (v1.22.0 or later)

Setup Instructions

1. Clone the repository:

git clone https://github.com/khaymanii/Bluetech-Project.git
cd bluetech-project

2. Install dependencies:

Using npm:

npm install

Using yarn:

yarn install

3. Run the development server:

Using npm:

npm run dev

Using yarn:

yarn dev

Open your browser and navigate to http://localhost:3000 to see the application in action.

API Endpoint

The application fetches product data from the following API endpoint:

http://3.88.1.181:8000/products/public/catalog?supplier=FragranceX&first=7&last=30&search=EAU%20SAUVAGE

Conclusion

This project demonstrates how to build a responsive e-commerce product table using modern web technologies like React, Next.js, TypeScript, and Tailwind CSS. By fetching data from an external API and displaying it in a well-structured table, we can provide users with a seamless and informative browsing experience.

If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.

I hope it serves as a useful example and a starting point for your own applications.

Happy coding!