momchiljambazov / pokedex

Pokemon explorer using PokéAPI, deployed at https://momchiljambazov.github.io/pokedex

Pokedex

This project lists Pokemon and allows you to explore details about each creature. You can also create your own Pokemon and select your favorite ones. Demo

Process and decisions

First steps after reading the requirements and the scope of the task:

• Explore other Pokedex websites, analyze project structure, strengths, weaknesses and areas for improvement
• Prepared high-level concept for key pages and features
• Read the PokeApi documentation and explore the schema, endpoins and contracts
• Decide on the packages and tools, consider pros & cons around implementational details features
• General way of work was to aproach the project as an evolutionary MVP, get things done as fast and as possible and iteratively improve the qualitiy for each feature/page

Tools

ReactQuery

ReactQuery is the tool of choice for the server-side data. Of the shelf it manages API cache, request loading state, network failures, and more. Simple and easy to use and configure, yet powerfull in terms of performance, UX optimization and reduction of the number of requests. Given that the API data is not expected to change (or at least not frequently).

Redux Toolkit

Custom Pokemon data required centralized store solution as most of the components needed to access the data. Redux was chosen to manage the client-side data as the industry standard. Performance, store immutability and past experience were the factors that prevailed in favor of Redux.

React Hook Form

Chosen for form control and validation features.

D3 for evolution tree generation

The evolution tree was considered as an important component to navigate the Pokedex. This is why we needed a realiable solution to visualize more complex data trees.

Known issues and limitations

The id generation does not check for id collision with other custom and api pokemon ids ID generation is not sequential and with existing implementation it's hard to predict previous/next values. In real world scenarios backend should orchestrate prev/next.

Local storage allows us to store up to 5MB of data. As we are storing all custom added Pokemons and their base64 encoded images, this storage can get exhausted quickly. The mocked add Pokemon feature should be considered as a rough POC.

TODOs and further improvements:

• add search, filtering and sorting to Pokemon lists
• remove inline styles and improve on sharing similar styles
• add error boundaries to critical components, improve error handling and error states
• add unit tests and improve on test coverage
• use aliases instead of relative paths in imports
• add precommit and integrate linting and test suite as part of the CI/CD pipeline
• fix dependency security vulnerabilities, possibly add Snyk

Running & Debugging the application for the first time

1. Clone repo:
   • git clone [email protected]:MomchilJambazov/pokedex.git
2. Install project dependencies:
   • cd pokedex
   • npm run install
3. Start the application:
   • npm run start

Available Scripts

Command	Description	Evironment File
npm run init	Installs project dependencies for the first time	N/A
npm run lint	Analyses JavaSript/TypeScript code	N/A
npm run lint:f	Try to fix JavaSript/TypeScript errors	N/A
npm run slint	Analyses CSS/SCSS styles	N/A
npm run slint:f	Try to fix CSS/SCSS errors	N/A
npm test	Executes Unit Tests outputting to out/coverage	.env.test
npm start	Runs the App in http://localhost:3000	.env.local
npm run build:l	Builds the App to out/build/local	.env.local
npm run build:d	Builds the App to out/build/development	.env.development
npm run build	Builds the App to out/build/production	.env.production

Supported Language Features

This project supports a superset of the latest JavaScript/TypeScript standard. In addition to ES6 syntax features, it also supports:

• Exponentiation Operator (ES2016)
• Async/await (ES2017)
• Object Rest/Spread Properties (ES2018)
• Dynamic import() (stage 4 proposal)
• Class Fields and Static Properties (part of stage 3 proposal)
• TSX and TypeScript

Constant enums and namespaces are not supported, you can learn about the constraints of using Babel with TypeScript here.

Code Quality & Performance

• ESLint 8.18.0 with Airbnb, TypeScript, React, React Hooks and Jest configuration
• Stylelint 14.9.1 to analyse CSS/SCSS files
• Jest 27.5.2 to test JavaScript/TypeScript files
• React Testing Library 13.3.0 to test components
• Web Vitals 2.1.4 to meassure performance

Built-in Settings

• .editorconfig settings to standardize charset, ending of lines and indentation
• .vscode settings with integrated Chrome Debugger, faster search results and auto-format on save
• Environment files for Local, Test, Development, QA, Staging and Production