https://github.com/codemitrayt/react-js-template
React.JS template follows best practices with Shadcn UI component library.
https://github.com/codemitrayt/react-js-template
Last synced: 2 days ago
JSON representation
React.JS template follows best practices with Shadcn UI component library.
- Host: GitHub
- URL: https://github.com/codemitrayt/react-js-template
- Owner: codemitrayt
- Created: 2025-11-12T03:03:06.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-03-12T15:16:19.000Z (3 months ago)
- Last Synced: 2026-03-12T21:27:31.605Z (3 months ago)
- Language: JavaScript
- Homepage: https://react-js-template-sandy.vercel.app
- Size: 672 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/codemitrayt/react-js-template
cd react-js-template
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
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.