A modern, production-ready Next.js starter template with TypeScript, Tailwind CSS 4, and developer-friendly tooling.
- ⚡ Next.js 15 - Latest App Router with React 19
- 🎨 Tailwind CSS 4 - Latest version with Lightning CSS
- 🔧 TypeScript - Full type safety
- 📦 Axios - HTTP client with interceptors and error handling
- 🎯 ESLint - Code linting and quality
- 💅 Prettier - Code formatting with import sorting
- 🐶 Husky - Git hooks for code quality
- 🎭 Custom Components - Reusable UI components and icons
- 📱 Responsive Design - Mobile-first approach
- 🔒 Type Safety - Full TypeScript support
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.0.3 | React framework |
| React | 19.0.0-rc.1 | UI library |
| TypeScript | 5.x | Type safety |
| Tailwind CSS | 4.0.0 | Styling |
| Axios | 1.10.0 | HTTP client |
| ESLint | 8.x | Code linting |
| Prettier | 3.2.4 | Code formatting |
| Husky | 8.0.3 | Git hooks |
Before you begin, ensure you have the following installed:
- Node.js (v20 or higher) - Download here
- PNPM package manager - Installation guide
-
Clone the repository
git clone https://github.com/amigoscode/amigoscode-starter-web.git cd amigoscode-starter-web -
Install dependencies
pnpm install
-
Start the development server
pnpm dev
-
Open your browser Navigate to http://localhost:3000
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── src/
│ ├── components/ # Reusable components
│ ├── hooks/ # Custom React hooks
│ ├── services/ # API services
│ ├── icons/ # SVG icons
│ ├── fonts.ts # Font configuration
│ └── globals.css # Global styles
├── public/ # Static assets
├── docs/ # Documentation
└── config files # Various configuration files
| Script | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm prettier:format |
Format code with Prettier |
Create a .env.local file in the root directory:
# API Configuration
NEXT_PUBLIC_API_URL=https://your-api.com
# Add other environment variables as neededThe template uses Tailwind CSS 4 with custom configuration:
- Custom fonts (Inter, Montserrat)
- Custom animations and keyframes
- Responsive design utilities
Full TypeScript support with:
- Strict type checking
- Path aliases (
@/forsrc/) - Type-safe API calls
- Tailwind CSS 4 with Lightning CSS engine
- Custom animations and keyframes
- Responsive design patterns
- Dark mode ready
- Axios client with interceptors
- Type-safe API calls
- Error handling and logging
- Authentication support
- Reusable components (ProductCard, Orb, etc.)
- Icon system with SVG components
- Custom hooks for common patterns
- TypeScript interfaces
- ESLint configuration
- Prettier with import sorting
- Husky pre-commit hooks
- TypeScript strict mode
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feat/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feat/amazing-feature) - Open a Pull Request
- Feature:
feat/feature-name - Bug Fix:
fix/bug-description - Documentation:
docs/documentation-update - Refactor:
refactor/component-name
This project is licensed under the MIT License - see the LICENSE file for details.
- AmigosCode - For the amazing learning platform
- Next.js - For the incredible React framework
- Tailwind CSS - For the utility-first CSS framework
- Vercel - For the deployment platform
- Website: amigoscode.com
- GitHub Issues: Report a bug
- Discord: Join our community