Pokédex

Pokédex built with React and PokéAPI, infinite scrolling of pokemon cards implemented using Intersection Observer API.

View Demo

Project Summary

• Pokemon Data from PokéAPI
• UI components with React.js
• State management using React's Context-API
• Styling with Sass
• Bundling with webpack
• Linting with ESLint
• Code formatting with Prettier

Development

Steps to run Pokédex in your local environment.

1. Clone the repository

   git clone https://github.com/shanpriyan/pokedex.git

2. Go to the project directory

   cd pokedex

3. Install the NPM packages

   npm i

4. Start the development server

   npm start

5. Development server will start at localhost:1998

Linting

This project is configured with ESLint for linting in .eslintrc.json. You can use npm run lint script to check for errors or warnings in the project.

Formatting

This project uses Prettier for formatting. You can use npm run prettify script to format all files in the project.

Bundling

This project uses webpack for bundling.

• Run npm run build script to generate a production build
• Run npm run build:dev script to generate a development build.
• Build will output to dist folder.

Bundle analyzer

• Run npm run analyze to analyze the production bundle of the application using webpack-bundle-analyzer

Babel

This project is configured with new runtime JSX transform. React doesn't need to be in scope while using JSX.

Demo

Live Demo - https://pokedex.shanpriyan.in/