React Boilerplate Application

Welcome to the React Boilerplate! This project serves as a starting point for building modern React applications. It incorporates essential tools and best practices for efficient development, ensuring a scalable and maintainable application structure.

Features

• ⚡ React 18: The latest version of React for building interactive UIs.
• 🔥 Type checking TypeScript
• ✅ Strict Mode for TypeScript and React 18
• 🔃 Data fetching with React Query TanStack
• 🐻 State management with Zustand: A small, fast, and scalable bearbones state management solution
• 📏 ESLint: Linting tool for maintaining code quality and consistency.
• 🏭 Build tool Vite: blazing fast frontend build tool powering the next generation of web applications.
• 🎨 CSS & LESS Support: Write modular and scalable styles.
• 🔒 Environment Configuration: Separate settings for development and production.
• 🌐 Multi-language (i18n) with react-i18next
• ⌨️ Form with React Hook Form
• 🔴 Validation library with Yup
• 💖 Code Formatter with Prettier

Getting started

Follow these steps to set up and run the project locally:

Prerequisites Ensure you have the following installed:

Node.js: v16 or newer npm or yarn: Latest version

Run the following command to create your app:

npx react-boilerplate-application my-app
cd my-app
npm run dev

Then, you can run the project locally in development mode with live reload by executing:

npm run dev

Open http://localhost:5001 with your favorite browser to see your project.

Project structure

.
react-boilerplate-demo/
├── src/
│   ├── assets/         # Static assets (images, fonts, etc.)
│   ├── components/     # Reusable React components
│   ├── config/         # Global and component-specific styles
│   ├── hooks/          # Global and reuseable hooks
│   ├── locales/        # Locales folder (i18n messages)
│   ├── models/         # Type definitions
│   ├── pages/          # Page-level components
│   ├── routes/         # Global and component-specific styles
│   ├── styles/         # Styles folder
│   ├── utils/          # Utilities folder
│   ├── App.tsx         # Main application component
│   └── main.ts         # Entry point
├── public/             # Public assets and HTML template
├── .eslint.config.js   # ESLint configuration
├── .prettierrc         # Prettier configuration
├── package.json        # Project metadata and scripts
└── vite.config.ts      # Vite config file
└── README.md           # Project documentation

UPDATING.....