⚔️ trhgatu-inf-nextjs-frontend-template

A modern, production-ready Next.js 14 template with TypeScript, TailwindCSS, ShadCN/UI, Redux Toolkit, and automated CI/CD pipeline.

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

✨ Features

🏗️ Architecture

Next.js 14 App Router
TypeScript for type safety
Modular folder structure
Feature-based organization

🎨 UI/Styling

TailwindCSS utility-first
ShadCN/UI components
Responsive design
Dark mode ready

⚡ State Management

Redux Toolkit setup
Async thunks configured
Type-safe hooks
Persistent state

🛠️ Developer Experience

ESLint + Prettier
Husky git hooks
GitHub Actions CI/CD
Hot reload

🧠 Tech Stack

Category	Technologies
Framework	Next.js 14 (App Router)
Language	TypeScript
Styling	TailwindCSS, ShadCN/UI
State Management	Redux Toolkit, RTK Query
HTTP Client	Axios
Validation	Zod
Testing	Jest, React Testing Library
Linting	ESLint, Prettier
CI/CD	GitHub Actions

📁 Project Structure

trhgatu-inf-nextjs-frontend-template/
├── 📁 src/
│   ├── 📁 app/                    # Next.js App Router
│   │   ├── 📄 layout.tsx          # Root layout
│   │   ├── 📄 page.tsx            # Home page
│   │   ├── 📄 loading.tsx         # Global loading UI
│   │   ├── 📄 not-found.tsx       # 404 page
│   │   └── 📁 (auth)/             # Auth route group
│   │       └── 📄 login/page.tsx  # Login page
│   ├── 📁 components/
│   │   ├── 📁 shared/             # Reusable components
│   │   │   ├── 📄 Navbar.tsx      # Navigation component
│   │   │   └── 📄 Footer.tsx      # Footer component
│   │   └── 📁 ui/                 # ShadCN UI components
│   ├── 📁 config/                 # Configuration files
│   │   └── 📄 site.ts             # Site configuration
│   ├── 📁 constants/              # Application constants
│   │   └── 📄 routes.ts           # Route definitions
│   ├── 📁 features/               # Feature modules
│   │   └── 📁 auth/               # Authentication feature
│   │       ├── 📄 hooks.ts        # Auth hooks
│   │       ├── 📄 services.ts     # Auth API services
│   │       └── 📄 schemas.ts      # Validation schemas
│   ├── 📁 lib/                    # Utility libraries
│   │   ├── 📄 axios.ts            # Axios configuration
│   │   └── 📄 utils.ts            # Helper functions
│   ├── 📁 store/                  # Redux store
│   │   ├── 📄 index.ts            # Store configuration
│   │   ├── 📄 provider.tsx        # Redux provider
│   │   └── 📁 slices/             # Redux slices
│   └── 📁 types/                  # TypeScript definitions
├── 📁 .github/workflows/          # GitHub Actions
│   └── 📄 ci.yml                  # CI/CD pipeline
├── 📄 next.config.ts              # Next.js configuration
├── 📄 tailwind.config.ts          # TailwindCSS configuration
├── 📄 tsconfig.json               # TypeScript configuration
└── 📄 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-nextjs-frontend-template.git
cd trhgatu-inf-nextjs-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:3000 to see your application.

🔐 Authentication Module

The template includes a complete authentication system:

Login Page: /login with form validation
Protected Routes: Automatic redirection for unauthenticated users
State Management: Redux-powered auth state
Type Safety: Full TypeScript support
Validation: Zod schema validation

Usage Example

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

function ProtectedComponent() {
  const { user, isAuthenticated, login, logout } = useAuth();
  
  if (!isAuthenticated) {
    return <div>Please login to continue</div>;
  }
  
  return <div>Welcome, {user?.name}!</div>;
}

🎨 UI Components

Built with ShadCN/UI for maximum flexibility:

# Add new components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add form

Custom Components

The components/shared/ directory contains application-specific components:

Navbar: Responsive navigation with auth integration
Footer: Site footer with links and branding
Layout: Page layout wrapper

🛠️ Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run start`	Start production server
`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

🧪 CI/CD Pipeline

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

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

✅ 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

next: ^14.0.0
react: ^18.0.0
typescript: ^5.0.0

Styling

tailwindcss: ^3.3.0
@tailwindcss/forms: ^0.5.0
class-variance-authority: ^0.7.0

State Management

@reduxjs/toolkit: ^1.9.0
react-redux: ^8.1.0

Validation & HTTP

zod: ^3.22.0
axios: ^1.5.0

Development

eslint: ^8.50.0
prettier: ^3.0.0
husky: ^8.0.0

🎯 Customization

Adding New Features

Create a new feature directory under src/features/
Add Redux slice in src/store/slices/
Create API services in the feature directory
Add routes to src/constants/routes.ts

Styling Customization

Colors: Edit tailwind.config.ts
Components: Modify ShadCN components in components/ui/
Global Styles: Update src/app/globals.css

Environment Configuration

Create .env.local for local development:

NEXT_PUBLIC_API_URL=http://localhost:8000/api
NEXT_PUBLIC_APP_NAME=My App
DATABASE_URL=your_database_url

🚀 Deployment

Vercel (Recommended)

npm i -g vercel
vercel --prod

Docker

docker build -t my-nextjs-app .
docker run -p 3000:3000 my-nextjs-app

Other Platforms

Netlify: Connect your GitHub repository
Railway: One-click deployment
AWS/GCP: Use provided Dockerfiles

🤝 Contributing

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

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

📝 License

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

💬 Support

📧 Email: trananhtu1112003@gmail.com
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

🙏 Acknowledgments

Next.js team for the amazing framework
Vercel for hosting and deployment platform
ShadCN for the beautiful UI components
TailwindCSS for the utility-first CSS framework

Built with ❤️ by Infinity (trhgatu)

"Code is how I reflect my soul."

⭐ Star this repo if you found it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
.github/workflows		.github/workflows
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

trhgatu/inf-nextjs-frontend-template

Folders and files

Latest commit

History

Repository files navigation