PokeSite is a single-page interactive web application. It allows users to browse, search, and view detailed information on the Pokemon. The app features a clean, responsive design and uses a state management system to provide a seamless user experience.
Browse Pokemon in a visually appealing grid.
Instant Search: Quickly filter Pokemon by name using a dynamic search bar.
Detailed Views: Click on any Pokemon to see its stats, types, and an image.
Favorites List: Save your favorite Pokemon, with data persisted locally in your browser.
Interactive Dashboard: A dedicated dashboard page with a chart visualizing Pokemon types.
Comment System: Add and delete comments for each Pokemon, with comments also persisted locally.
React - For building the user interface.
Tailwind CSS - A utility-first CSS framework for rapid and responsive styling.
recharts - A powerful React charting library for creating the data visualizations.
Context API - For global state management, making data like favorites and comments easily accessible throughout the application.
PokeAPI - The external API used to fetch all Pokemon data.
To get this project up and running on your local machine, follow these steps:
Clone the repository:
git clone https://github.com/manojkmfsi/Interactive-Dashboard-React.git
Navigate to the project directory:
cd Interactive-Dashboard-React
Install the dependencies:
npm install
Start the development server:
npm run dev
PokeAPI: The free and open-source Pokemon API.
recharts: For the excellent charting library.