React Template Demo

A simple demo for React template using Poké API

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Features
  • Color Reference
• Getting Started
  • Prerequisites
  • Run Locally
• Usage
• Roadmap
• Contributing
  • Code of Conduct
• FAQ
• License
• Contact
• Acknowledgements

🌟 About the Project

📷 Screenshots

Light mode

Dark mode

👾 Tech Stack

Client

• Javascript
• React.js
• React Router
• Redux Toolkit
• TanStack Query
• React Hook Form
• WindiCSS
• Mantine
• ESLint
• Prettier
• Vite
• Iconify

🎯 Features

• Demo React Router with routes:

  • / - Home page.
  • /contact - Contact page.
  • /auth/login - Login page.
  • /auth/register - Register page.

• Demo Redux Toolkit with Pokemon index "counter":

  • ⏫ - Increment index.
  • ⏬ - Decrement index.
  • 🔄 - Reset index.

• Demo TanStack Query with Poké API:

  • Prefetch data (10 Pokemon per page).
  • Search Pokemon.

• Demo React Hook Form with a fake login form.

• Demo React with two custom hooks:

  • useDebounce - Debounce user input in search bar.
  • useImageLoad - Watch image loading state and detect src changes.

• Demo pre-commit hooks with husky and lint-staged. And lint commit messages with commitlint.

• Override Mantine theme (fonts, colors,...) with WindiCSS.

• UI components using Mantine.

• Icons using Iconify.

• Styling using WindiCSS.

🎨 Color Reference

Color	Hex
Primary Color	#2563EB

🧰 Getting Started

‼️ Prerequisites

This project uses Yarn as package manager:

npm install --global yarn

🏃 Run Locally

Clone the project:

git clone https://github.com/DuckyMomo20012/react-template-demo.git

Go to the project directory:

cd react-template-demo

Install dependencies:

yarn

Start the server:

yarn dev

👀 Usage

The Poké API will provide 1154 pokemon.

Using buttons to increment, decrement, and reset the Pokemon index "counter", start from 0:

• ⏫ - Increment index.
• ⏬ - Decrement index.
• 🔄 - Reset index.

When searching for a Pokemon, the counter will skip to the id (NO. ) of the Pokemon, which may exceed the total number of Pokemon. When exceeding:

• ⏫ - Reset counter (skip to 0).
• ⏬ - Skip to Pokemon with index 1153.

---

Login page:

• You can log in with this fake account:

  • email: example@gmail.com.
  • password: 1234.

• It will just show a message when you log in successfully, and navigate back to Home page.

Register page:

• It will do nothing when you submit the form.

---

Folder architecture:

From my react-template Wiki, Folder Architecture page:

.
├── components
│   ├── elements
│   ├── layouts
│   └── modules
├── constants
├── context
├── hooks
├── pages
│   └── api
├── routes
├── store
│   └── slice
└── main.jsx

• elements: Basic building blocks.
• layouts: Wrap your pages with the default layout.
• modules: Modules are built from multiple elements.
• constants: Global constants.
• context: React Context providers.
• hooks: Custom hooks.
• pages: Your page routes (adopt from NextJS folder architecture).
• pages/api: Your APIs (adopt from NextJS folder architecture).
• routes: Global route for react-router.
• store: Store your Redux store.
• store/slice: Store your Redux slices.

🧭 Roadmap

• TypeScript support.
• Show more Pokemon details.
• Infinite scroll.

👋 Contributing

Contributions are always welcome!

📜 Code of Conduct

Please read the Code of Conduct.

❔ FAQ

• Is this project still maintained?

  • Yes, but I will only update UI, docs, or dependencies. New features won't be added frequently.

• Is this project fully typed?

  • No, but I will add TypeScript support in the future.

⚠️ License

Distributed under MIT license. See LICENSE for more information.

🤝 Contact

Duong Vinh - @duckymomo20012 - tienvinh.duong4@gmail.com

Project Link: https://github.com/DuckyMomo20012/react-template-demo.

💎 Acknowledgements

Here are useful resources and libraries that we have used in our projects:

• Awesome Readme Template: A detailed template to bootstrap your README file quickly.