⚡ trhgatu-inf-vite-frontend-template

A lightning-fast, production-ready Vite 5 template with React 18, TypeScript, Redux Toolkit, admin-first architecture, and automated CI/CD pipeline.

🚀 Quick Start • 📖 Documentation • 🤝 Contributing • 💬 Support

✨ Features

⚡ Performance

Vite 5 lightning-fast HMR
React 18 concurrent features
Optimized build pipeline
Tree-shaking enabled

🏗️ Architecture

Admin-first design
Feature-based organization
Modular folder structure
Route protection system

🔐 Authentication

Complete auth flow
Protected routes
Auth state persistence
Form validation with Zod

🛠️ Developer Experience

TypeScript for type safety
ESLint + Prettier
GitHub Actions CI/CD
Hot module replacement

🧠 Tech Stack

Category	Technologies
Build Tool	Vite 5
Framework	React 18
Language	TypeScript
State Management	Redux Toolkit, RTK Query
HTTP Client	Axios
Validation	Zod
Routing	React Router DOM
Testing	Vitest, React Testing Library
Linting	ESLint, Prettier
CI/CD	GitHub Actions

📁 Project Structure

trhgatu-inf-vite-frontend-template/
├── 📁 src/
│   ├── 📁 features/               # Feature modules
│   │   ├── 📁 auth/               # Authentication feature
│   │   │   ├── 📄 hooks.ts        # Auth hooks
│   │   │   ├── 📄 services.ts     # Auth API services
│   │   │   ├── 📄 schemas.ts      # Validation schemas
│   │   │   └── 📄 types.ts        # Auth types
│   │   ├── 📁 dashboard/          # Dashboard feature
│   │   ├── 📁 users/              # User management
│   │   └── 📁 errors/             # Error handling
│   ├── 📁 layouts/                # Layout components
│   │   ├── 📄 AdminLayout.tsx     # Admin panel layout
│   │   └── 📄 AuthLayout.tsx      # Authentication layout
│   ├── 📁 routes/                 # Routing configuration
│   │   ├── 📄 AppRouter.tsx       # Main router
│   │   ├── 📄 ProtectedRoute.tsx  # Route protection
│   │   └── 📄 AuthGate.tsx        # Auth gate component
│   ├── 📁 components/             # Reusable components
│   │   ├── 📁 shared/             # Shared UI components
│   │   └── 📁 forms/              # Form components
│   ├── 📁 hooks/                  # Custom hooks
│   │   └── 📄 useAuth.ts          # Authentication hook
│   ├── 📁 services/               # API services
│   │   ├── 📄 api.ts              # Axios configuration
│   │   └── 📄 endpoints.ts        # API endpoints
│   ├── 📁 store/                  # Redux store
│   │   ├── 📄 index.ts            # Store configuration
│   │   ├── 📄 provider.tsx        # Redux provider
│   │   └── 📁 slices/             # Redux slices
│   │       ├── 📄 authSlice.ts    # Auth state slice
│   │       └── 📄 appSlice.ts     # App state slice
│   ├── 📁 types/                  # TypeScript definitions
│   │   ├── 📄 api.ts              # API types
│   │   └── 📄 common.ts           # Common types
│   ├── 📁 utils/                  # Utility functions
│   │   └── 📄 helpers.ts          # Helper functions
│   ├── 📄 App.tsx                 # Main App component
│   └── 📄 main.tsx                # Application entry point
├── 📁 .github/workflows/          # GitHub Actions
│   └── 📄 ci.yml                  # CI/CD pipeline
├── 📄 vite.config.ts              # Vite configuration
├── 📄 tsconfig.json               # TypeScript configuration
├── 📄 .eslintrc.json              # ESLint configuration
├── 📄 .prettierrc                 # Prettier configuration
├── 📄 .env.example                # Environment variables template
└── 📄 package.json                # Dependencies & scripts

🚀 Quick Start

Prerequisites

Make sure you have the following installed:

Node.js 18+
npm, yarn, or pnpm

Installation

Clone the repository

git clone https://github.com/trhgatu/trhgatu-inf-vite-frontend-template.git
cd trhgatu-inf-vite-frontend-template

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Set up environment variables

cp .env.example .env.local
# Edit .env.local with your configuration

Run the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser

Navigate to http://localhost:5173 to see your application.

🔐 Authentication System

The template includes a comprehensive authentication system designed for admin panels:

Admin Login: /admin/login with form validation
Route Protection: ProtectedRoute and AuthGate components
State Persistence: Auth state survives page refreshes
Type Safety: Full TypeScript support
Validation: Zod schema validation

Usage Example

import { useAuth } from '@/hooks/useAuth';

function AdminDashboard() {
  const { user, isAuthenticated, login, logout } = useAuth();
  
  if (!isAuthenticated) {
    return <div>Redirecting to login...</div>;
  }
  
  return (
    <div>
      <h1>Welcome to Admin Panel, {user?.name}!</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Auth Flow

// Login process
const handleLogin = async (credentials: LoginCredentials) => {
  try {
    const response = await authService.login(credentials);
    dispatch(setAuth(response.data));
    navigate('/admin/dashboard');
  } catch (error) {
    // Handle error
  }
};

🏗️ Architecture Overview

Feature-Based Organization

Each feature is self-contained with its own:

Components: Feature-specific UI components
Hooks: Custom hooks for business logic
Services: API calls and data fetching
Types: TypeScript interfaces
Schemas: Validation schemas

Layout System

AdminLayout: Main admin panel layout with sidebar navigation
AuthLayout: Clean layout for login/register pages
Responsive: Mobile-first design approach

⚡ Performance Optimizations

Vite 5 Features

Lightning Fast HMR: Sub-second hot module replacement
Optimized Build: Tree-shaking and code splitting
ES Modules: Native ESM support
Plugin Ecosystem: Rich plugin ecosystem

React 18 Features

Concurrent Features: Improved user experience
Automatic Batching: Better performance
Suspense: Better loading states

🛠️ Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run lint`	Run ESLint
`npm run lint:fix`	Fix ESLint issues
`npm run format`	Format code with Prettier
`npm run type-check`	Run TypeScript compiler
`npm run test`	Run tests with Vitest

🧪 CI/CD Pipeline

Automated workflow with GitHub Actions (.github/workflows/ci.yml):

✅ Code Quality Checks
  ├── ESLint validation
  ├── Prettier formatting
  ├── TypeScript compilation
  └── Unit tests with Vitest

✅ Build & Deploy
  ├── Production build
  ├── Build artifact caching
  └── Deployment (when configured)

The pipeline runs on:

Push to main branch
Pull requests to main
Manual workflow dispatch

📦 Key Dependencies

Core

vite: ^5.0.0
react: ^18.0.0
react-dom: ^18.0.0
typescript: ^5.0.0

Routing & State

react-router-dom: ^6.8.0
@reduxjs/toolkit: ^1.9.0
react-redux: ^8.1.0

Validation & HTTP

zod: ^3.22.0
axios: ^1.5.0

Development & Testing

vitest: ^0.34.0
@testing-library/react: ^13.4.0
eslint: ^8.50.0
prettier: ^3.0.0

🎯 Customization

Adding New Features

Create Feature Directory

mkdir src/features/my-feature
cd src/features/my-feature

Add Feature Files

my-feature/
├── components/
├── hooks/
├── services/
├── types.ts
└── index.ts

Create Redux Slice

// src/store/slices/myFeatureSlice.ts
import { createSlice } from '@reduxjs/toolkit';

export const myFeatureSlice = createSlice({
  name: 'myFeature',
  initialState: {},
  reducers: {}
});

Environment Configuration

Create .env.local for local development:

VITE_API_URL=http://localhost:8000/api
VITE_APP_NAME=Admin Panel
VITE_APP_VERSION=1.0.0

Styling Customization

The template uses CSS modules and styled-components patterns:

// Component styling
const StyledButton = styled.button`
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
`;

🚀 Deployment

Vercel (Recommended)

npm i -g vercel
vercel --prod

Netlify

npm run build
# Upload dist/ folder to Netlify

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 5173
CMD ["npm", "run", "preview"]

Other Platforms

Railway: One-click deployment
AWS S3: Static hosting with CloudFront
GitHub Pages: Free static hosting

🧪 Testing Strategy

Unit Testing with Vitest

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { LoginForm } from './LoginForm';

describe('LoginForm', () => {
  it('renders login form correctly', () => {
    render(<LoginForm />);
    expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
  });
});

Integration Testing

import { renderWithProviders } from '@/utils/test-utils';
import { AuthProvider } from '@/features/auth';

describe('Auth Integration', () => {
  it('handles login flow correctly', async () => {
    // Test implementation
  });
});

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Workflow

Fork the repository
Create your feature branch
```
git checkout -b feature/amazing-feature
```

Commit your changes

git commit -m 'Add some amazing feature'

Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Code Standards

Follow TypeScript best practices
Write meaningful commit messages
Add tests for new features
Update documentation when needed

📚 Learning Resources

Vite Resources

React & TypeScript

State Management

🐛 Troubleshooting

Common Issues

Port already in use

# Kill process on port 5173
npx kill-port 5173

Module resolution errors

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Build failures

# Check TypeScript errors
npm run type-check

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

💬 Support

📧 Email: trhgatu@example.com
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions
📖 Wiki: Project Wiki

🙏 Acknowledgments

Vite team for the blazing fast build tool
React team for the amazing framework
Redux Toolkit for simplified state management
TypeScript for making JavaScript better

Built with ⚡ by Infinity (trhgatu)

"Every layout, every route, every pixel – a reflection of the warrior within."

⭐ Star this repo if you found it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.github/workflows		.github/workflows
src		src
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

trhgatu/inf-vite-frontend-template

Folders and files

Latest commit

History

Repository files navigation