This is a Pokedex application built with a modern tech stack including Twin, Next.js, Styled Components, TypeScript, Tailwind CSS, JSON Web Token (JWT), React Hook Form, React Hot Toast for toast notifications. The app provides a user-friendly interface to explore Pokemon data, with features such as pagination, user authentication, and enhanced form handling.

• View a list of Pokemon with 10 items per page.
• User authentication with Next Auth.
• Responsive design using Twin for Tailwind CSS.
• Styled Components for efficient styling.
• Use of TypeScript for type safety.
• Enhanced form handling with React Hook Form.
• Toast notifications for user feedback using React Hot Toast.
• Pre-commit and pre-push hooks with Husky and lint-staged for automated testing.
• End-to-End (E2E) testing with Cypress.

• Node.js and npm installed.
• Basic understanding of JavaScript, React, and web development.

1. Clone the repository:

git clone https://github.com/3FE3LE/monoma-dex.git
cd monoma-dex

2. Install dependencies:

npm install

3. Create a .env.local file in the root directory with the following variables:

MONGODB_URI=mongodb+srv://MONOMA:[email protected]/?retryWrites=true&w=majority
MONGODB_NAME=pkmdex
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=monomadex
NEXT_PUBLIC_API_URL=https://pokeapi.co/api/v2/pokemon/

4. Start the development server:

npm run dev

To run unit tests, use the following command:

npm run test:e2e
nom run test:component

The project is set up with GitHub Actions to automatically run unit tests on every push. You can find the details in the .github/workflows/cypress.yml file.

• Next.js - A React framework for building server-rendered applications.
• Next Auth - Authentication for Next.js applications.
• TypeScript - A superset of JavaScript that adds static types.
• Twin - A utility for writing Tailwind CSS with styled-components syntax.
• Tailwind CSS - A utility-first CSS framework.
• Styled Components - CSS-in-JS library for styling React components.
• React Hot Toast - Toast notifications for React.
• React Hook Form - A library for managing form state and validation in React.
• Husky - Git hooks made easy.
• lint-staged - Run linters on git staged files.
• Cypress - JavaScript End to End Testing Framework.

|-- src
|   |-- app
|   |   |-- api
|   |   |   |-- [...nextauth]
|   |   |   |   |-- route
|   |   |   |-- sign-up
|   |   |   |   |-- route
|   |   |-- dashboard
|   |   |   |-- page.tsx
|   |   |-- profile
|   |   |   |-- page.tsx
|   |   |-- sign-in
|   |   |   |-- page.tsx
|   |   |-- sign-up
|   |   |   |-- page.tsx
|   |   |-- favicon.ico
|   |   |-- layout.tsx
|   |   |-- page.tsx
|   |-- components
|   |   |-- icons
|   |   |   |-- LeftArrow.tsx
|   |   |   |-- RightArrow.tsx
|   |   |   |-- ...
|   |   |   |-- index.ts
|   |   |-- UI
|   |   |   |-- Form.tsx
|   |   |   |-- Form.cy.tsx
|   |   |   |-- Grid.tsx
|   |   |   |-- Grid.cy.tsx
|   |   |   |-- ...
|   |   |   |-- index.ts
|   |-- services
|   |-- models
|   |-- mappers
|   |-- lib
|   |-- styles
|   |   |-- GlobalStyles.ts
|   |-- types
|   |   |-- index.ts
|   |-- utils
|   |   |-- index.ts
|   |-- middleware.ts
|   |-- ...
|-- ...
|-- .env.local
|-- README.md
|-- ...

Pull requests and feedback are welcome. For major changes, please open an issue first to discuss what you would like to change.

This project is licensed under the MIT License.

• OpenAI - For providing the amazing GPT-3.5 model that generated this README.
• The open-source community for the fantastic libraries and tools used in this project.