React.js Template

This repository is a React.js template that follows best React.js practices with the Shadcn UI library. It provides a solid foundation for building modern, scalable React applications with a comprehensive set of pre-configured tools and components.

✨ Features

• ⚡ Vite - Lightning-fast build tool and dev server
• 🎨 Shadcn UI - Beautiful, accessible component library built on Radix UI
• 🎯 React Router - Declarative routing for React applications
• 🔄 Redux Toolkit - Predictable state management with Redux Toolkit
• 📝 React Hook Form - Performant forms with easy validation
• ✅ Zod - TypeScript-first schema validation
• 🎨 Tailwind CSS - Utility-first CSS framework
• 🔐 Authentication - Pre-built authentication pages and hooks
• 📱 Responsive Design - Mobile-first approach with custom hooks
• 🛠️ ESLint & Prettier - Code quality and formatting tools
• 🎭 Dark Mode - Theme support with next-themes

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/codemitrayt/react-js-template
cd react-js-template

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:8888

📜 Available Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint errors automatically
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

📁 Project Structure

src/
├── apis/              # API configuration and endpoints
├── assets/            # Static assets (images, icons, etc.)
├── components/        # React components
│   ├── shared/        # Shared components (header, footer, etc.)
│   └── ui/            # Shadcn UI components
├── constants/         # Application constants
├── hooks/             # Custom React hooks
├── layouts/           # Layout components
├── lib/               # Utility functions and helpers
├── pages/             # Page components
│   ├── auth/          # Authentication pages
│   ├── home/          # Home page
│   └── not-found/     # 404 page
├── request/           # HTTP request configuration
├── store/             # Redux store and slices
├── app.jsx            # Main app component
├── main.jsx           # Application entry point
└── routes.jsx         # Route configuration

🎨 Shadcn UI Components

This template includes a comprehensive set of Shadcn UI components:

• Accordion, Alert, Alert Dialog, Avatar
• Badge, Breadcrumb, Button, Calendar
• Card, Carousel, Chart, Checkbox
• Dialog, Drawer, Dropdown Menu
• Form, Input, Label, Select
• Table, Tabs, Textarea, Tooltip
• And many more...

All components are fully customizable and follow accessibility best practices.

🔧 Key Technologies

• React 19 - Latest React with modern features
• Vite - Next-generation frontend tooling
• Tailwind CSS 4 - Utility-first CSS framework
• Redux Toolkit - State management
• React Router 7 - Routing library
• React Hook Form - Form handling
• Zod - Schema validation
• Radix UI - Unstyled, accessible component primitives

🏗️ Best Practices

This template follows React.js best practices including:

• ✅ Component composition and reusability
• ✅ Custom hooks for shared logic
• ✅ Proper state management with Redux Toolkit
• ✅ Form validation with React Hook Form + Zod
• ✅ Code splitting and lazy loading
• ✅ Consistent code formatting with Prettier
• ✅ ESLint rules for code quality
• ✅ Organized project structure
• ✅ Type-safe development patterns

📝 License

This project is open source and available under the MIT License.