This is a simple ReactJS project that fetches and displays data from a REST API.
- Vercel Live Link
- Git Clone
- First clone the Repo using
git clone https://github.com/Nibaron/learnathon_task_01.git
- install npm script using
npm install
- then
npm start
to start
Your app is ready to GO !
The project allows users to interact with data from the following APIs:
-
Basic Folder Structure: The project follows a
PokemonCard
component to show Cards. -
Data Fetching:
- The application fetches 30 Pokemon objects from PokeAPI using
Axios
. - Then Stores data inside
allPokemons
State.
- The application fetches 30 Pokemon objects from PokeAPI using
-
Show Data Results: Fetched data is displayed in the PokemonCard using Props Drilling of
Name
,Image
andTypes
. -
Error and Loading States: The UI displays
Loading Skeleton Component
while Loading fetched data and- displays
Error Skeleton Component
while Error fetching data.
-
Dropdown Filter: Users can filter
Pokemon Types
using a simple dropdown. if no value is set, allTypes of Pokemon is shown. -
CSS Styling: The components are styled using
Tailwind CSS
.