GitHub stars GitHub_forks

A simple and clean React + TypeScript + Vite starter project, configured with essential tools and structured with best practices gained from 7+ years of frontend development experience.
This is a sample of the ReactJs project for starting easily and fast.

scripts/ # For Custom Scripts (Icon Generator, etc.)
public/ # Application files (PWA, Icons, Splash Screens, etc.)
src/
 ├── pages/ # Application pages (auth, landing, main, etc.)
 ├── layout/ # Layout components and containers
 ├── shared/ # Shared logic: helpers, constants, services, types, store
 ├── styles/ # Global styles (SCSS & Tailwind)
 └── __test__/ # Unit tests

The project includes complete configurations for ESLint, Prettier, Stylelint, Husky (pre-commit hooks), and CI/CD via GitHub Actions.

In this project we're using RTK Query for API request system and Redux Toolkit for API cache system and state management.

npm install

Create your local environment file by copying the example file:

cp .env.example .env

Then make sure to configure your Firebase settings required for push notifications inside .env.

If you're just testing the app and don't have Firebase set up, you can use dummy values for now.

docker build -t react-sample-app .
docker run -d -p 3000:80 react-sample-app

Visit: http://localhost:3000

docker-compose up --build

To stop and remove containers:

docker-compose down

Unit tests can be added and placed under the src/__test__ folder. You can use any preferred framework like Vitest or Jest.

This project is open-source and licensed under the MIT License.

You can use the AnimateCSS framework for applying animations by adding the class animate__animated and the desired animation class with the animate__ prefix:

<h1 class="animate__animated animate__bounce">An animated element</h1>

🔧 But there's more! This project includes a custom helper function for generating animation class names easily:

animator({ name: 'fadeIn', speed: 'faster' });

This will generate appropriate class names automatically.

You can import modules from the src folder using the @/ alias:

import { APP_ROUTES } from '@/shared/constants';

Here’s a list of useful scripts for development and maintenance: