Reactify Dashboard is the administrative interface of an e-commerce project called Reactify. This dashboard is developed using React, Next.js, and TailwindCSS, and it incorporates the following key functionalities:
-
Platzi Fake Store API Integration: The website utilizes the Platzi Fake Store API to fetch product data.
-
Category Visualization using Chart.js: Gain insights into product categories' distribution through intuitive charts powered by Chart.js.
-
Pagination for Enhanced Data Management: Efficiently manage large datasets with a built-in pagination system that displays 10 results per page.
-
Product Search Functionality: The website includes a built-in product search feature that allows users to search for specific products by their names.
-
Product Management (Create, Edit, Delete): Seamlessly interact with the API to create, edit, and delete products within the
/productspage. -
Login Authentication with Token Handling: Securely authenticate users through js-cookie and axios, ensuring smooth token management for API communication.
To access the Dashboard, please log in with the following test account:
- Email:
maria@mail.com - Password:
12345
-
Platzi Fake Store API Integration: The website utilizes the Platzi Fake Store API to fetch product data. And because it's a test API, has some details to consider, one of them is that generates random images for products, instead of having own images for each product.
-
Category Visualization using Chart.js: The dashboard provides a clear visualization of product categories using Chart.js. This feature enhances the understanding of the distribution of products across various categories.
-
Pagination for Enhanced Data Management: To optimize the user experience, the dashboard features a pagination system that allows viewing only 10 results per page. This ensures efficient data management and navigation.
-
Product Search Functionality: The website includes a built-in product search feature that allows users to search for specific products by their names.
-
Product Management (Create, Edit, Delete): The dashboard empowers administrators with the ability to create, edit, and delete products through interactions with the API. These operations are seamlessly executed within the
/productspage. -
Login Authentication with Token Handling: Leveraging js-cookie and axios, the dashboard incorporates a secure login authentication mechanism. User tokens are managed efficiently, enabling smooth communication between the dashboard and the backend API.
To set up and run Reactify Dashboard locally, follow these steps:
- Clone the repository:
git clone [repository URL] - Navigate to the dashboard directory:
cd Reactify-Dashboard - Install the required dependencies:
npm install - Declare the env variables in
.envfile in the same level as this README.md, follow / copy the example in.env-examplefile - Start the development server:
npm run dev - Open your web browser and go to
http://localhost:3000to access the Reactify Dashboard.
- Platzi Fake Store API: Official Page of this API.
- Reactify: E-commerce Project mentioned above.
- Official React Documentation: Comprehensive resource for mastering React and its ecosystem.
- Next.js Documentation: Official documentation for Next.js, offering guidance on building server-rendered React applications.
- TailwindCSS Documentation: In-depth guide to TailwindCSS, a utility-first CSS framework.
- Chart.js Documentation: Documentation for Chart.js, a widely-used JavaScript charting library.
- Next.js Professional Course: Course where I learned how to develop this project and later on, gave it my style and improvements.
This project is licensed under the MIT License.
Lenoxo (Emanuel Padilla)
For inquiries, suggestions, or comments, feel free to reach out at emanuehl159@gmail.com.