The application is deployed and can be accessed at the following URL: https://mikeduarte.github.io/pokemon
Feel free to visit the deployment to see the live version of the app in action!
To get started with the project, follow these steps:
- Clone the repository:
git clone <repository_url> - Change into the project directory:
cd <project_directory> - Install the dependencies:
npm install - Run the development server:
npm run dev - Open your browser and navigate to
http://localhost:5173/pokemonto see the application.
The following npm scripts are available for the project:
dev: Starts the development server.build: Builds the production-ready application.serve: Serves the production build locally.lint: Runs ESLint to check for code style and errors.preview: Boots up a local static web server that serves the files from dist.test: Runs the unit tests using Vitest.test:e2e: Runs end-to-end tests in headless using Cypress (Please be sure that you run dev command first to start dev server).cypress: Opens Cypress (Use this to run the end-to-end tests manually in a browser).
This project uses Prettier, ESLint and Husky to maintain consistent code formatting and identify code errors and style issues before commits.
Self explanatory? Love this combination. It improves code quality, reduces errors, enhances developer productivity, and results in more maintainable and scalable projects.
React Query adds the ability to easily retrieve data from APIs and handle the different states of data fetching, such as loading, success, error. React Query also automatically caches fetched data with background updates, which helps with managing global and local application state. It supports pagination strategies and can handle infinite scrolling.
Material-UI v5 was used since it offers out-of-the-box accessibility and responsive design support. It also offers many components needed for the requirements of the project, such as Tabs, Text Inputs, Select Inputs, Information Cards, as well as the ability to customize theming.
This project uses MSW (Mock Service Worker) to mock API requests during unit testing. The mock handlers are defined in the src/testUtils/__mocks__ directory. The decision to use this was based off the fact that the project is heavily API driven.
Why Vite? Vite was chosen for its small size and build speed. With the announcement of Create React App no longer being supported, some of the alternatives are Next.js, Remix, Vite, etc. The decision to use Vite was made as a learning experience and to explore something new.