Skip to content

Commit 39611d9

Browse files
author
RooCode
committed
docs: enhance quick start with cloud development options
- Add DevContainer, GitHub Codespaces, and Gitpod quick start options - Add badges for one-click setup - Reorganize quick start section to prioritize cloud development - Update instant developer experience section Signed-off-by: RooCode
1 parent 065ddea commit 39611d9

File tree

1 file changed

+148
-158
lines changed

1 file changed

+148
-158
lines changed

‎README.md‎

Lines changed: 148 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,177 @@
1-
# STARTER KIT
2-
3-
A modern web application starter kit built with `Next.js 15`, `TypeScript`, `Shadcn/UI`, `Prisma`, and `Supabase`. This project implements best practices and provides a comprehensive foundation for building production-ready applications.
4-
5-
## Features
6-
7-
### Core Features
8-
- **Next.js 15 App Router**
9-
- Server and client components
10-
- API routes
11-
- Optimized routing
12-
- SEO-friendly structure
13-
14-
- **Authentication System**
15-
- OAuth Social Media login with [Supabase](https://supabase.com/docs)
16-
- Protected routes
17-
- User session management
18-
- Role-based access control
19-
20-
- **Internationalization**
21-
- Multi-language support with [next-intl](https://next-intl-docs.vercel.app/)
22-
- Dynamic language switching
23-
- Route-based locale handling
24-
- Structured translation files
25-
26-
- **Theme System**
27-
- Light/dark mode toggle with [next-themes](https://github.com/pacocoursey/next-themes)
28-
- Persistent theme preferences
29-
- System theme detection
30-
- Customizable design tokens
31-
32-
### Development Features
33-
- **Code Quality**
34-
- TypeScript for type safety
35-
- ESLint for code linting
36-
- Prettier for code formatting
37-
- Conventional Commits
38-
- Husky pre-commit hooks
39-
- lint-staged for staged files
40-
41-
- **Database Integration**
42-
- Prisma ORM
43-
- Type-safe queries
44-
- Migration system
45-
- Connection pooling
46-
- Automated client generation
47-
48-
- **Development Environment**
49-
- Docker containerization
50-
- VS Code devcontainer support
51-
- Hot reloading
52-
- Development/Production parity
53-
54-
- **UI Components**
55-
- Shadcn/UI integration
56-
- Responsive design patterns
57-
- Accessible components
58-
- Customizable themes
59-
60-
## Quick Start
61-
62-
### Prerequisites
63-
- Node.js >= 20
64-
- PNPM >= 9
65-
- Docker (optional)
66-
67-
### Local Development
68-
69-
1. Clone the repository
70-
```bash
71-
git clone [email protected]:holedev/starter-kit.git
72-
cd starter-kit
73-
```
1+
# 🚀 Next.js Starter Kit
742

75-
2. Set up environment variables
76-
```bash
77-
cp .env.example .env
78-
```
3+
A Starter Kit for rapidly development with Next.js 15, TypeScript, and Shadcn UI. I built this project for developers who want to move fast without compromising on quality.
4+
5+
## ⚡️ Instant Developer Experience
6+
7+
- **Zero Config Setup**
8+
- One-click setup with DevContainer, GitHub Codespaces, or Gitpod
9+
- Turbopack for lightning-fast HMR
10+
- Pre-configured development environment
11+
12+
- **Developer-First Workflow**
13+
- Automatic code formatting and linting on save
14+
- Git hooks enforce code quality
15+
- Conventional commits with automatic validation
16+
- Swagger UI for API documentation
17+
18+
- **Rapid Development Features**
19+
- Hot module replacement with Turbopack
20+
- Type-safe API routes with built-in validation
21+
- Auto-generated Swagger docs for APIs
22+
- Automated API testing setup
23+
24+
## 🛠 Tech Stack
25+
26+
- **Frontend**: Next.js 15 with App Router
27+
- **UI**: Shadcn UI (Accessible, customizable components)
28+
- **Language**: TypeScript (Strict mode enabled)
29+
- **Database**: Prisma (Type-safe ORM)
30+
- **Auth**: Supabase (OAuth ready)
31+
- **API**: REST with Swagger documentation
32+
- **i18n**: next-intl (Type-safe translations)
33+
34+
## 🏃‍♂️ Quick Start
35+
36+
### 1. Cloud Development (Recommended)
37+
38+
Choose your preferred cloud development environment:
39+
40+
[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/holedev/starter-kit)
41+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=holedev/starter-kit)
42+
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/holedev/starter-kit)
43+
44+
This will:
45+
- Clone the repository
46+
- Set up the development environment
47+
- Install dependencies
48+
- Start the development server
49+
- Configure all tools and extensions
50+
51+
### 2. Local Development (Alternative)
52+
53+
If you prefer local development:
7954

80-
Required environment variables:
81-
```env
82-
NEXT_PUBLIC_SUPABASE_URL= # Supabase project URL
83-
NEXT_PUBLIC_SUPABASE_ANON_KEY= # Supabase anonymous key
84-
DATABASE_URL= # Primary database connection URL
85-
DIRECT_URL= # Direct database connection URL
55+
1. **Clone & Install**
56+
```bash
57+
git clone [email protected]:holedev/starter-kit.git
58+
cd starter-kit
59+
pnpm i
60+
```
61+
62+
2. **Set Environment**
63+
```bash
64+
cp .env.example .env
65+
```
66+
67+
3. **Start Coding**
68+
```bash
69+
pnpm dev
70+
```
71+
72+
### 3. View API Documentation
8673
```
74+
http://localhost:3000/api-docs
75+
```
76+
77+
## 💻 Developer Tools
8778

88-
3. Install dependencies
79+
### Command Center
8980
```bash
90-
pnpm i
81+
pnpm dev # Start dev server (Turbopack enabled)
82+
pnpm build # Production build
83+
pnpm start # Start production server
84+
pnpm format:fix # Fix code formatting
85+
pnpm lint:fix # Fix linting issues
9186
```
9287

93-
4. Start development server
88+
### Git Workflow
9489
```bash
95-
pnpm dev
90+
git checkout -b feature/my-feature # New feature branch
91+
git add . # Stage changes
92+
git commit # Commit (auto-formats + lints)
93+
git push origin feature/my-feature # Push to remote
9694
```
9795

98-
### Docker Development
96+
## 📁 Project Structure
9997

100-
1. Using Docker Compose
101-
```bash
102-
docker compose up
98+
```
99+
├── app/ # Next.js app directory
100+
│ ├── [locale]/ # i18n routes
101+
│ ├── api/ # API endpoints
102+
│ └── api-docs/ # Swagger UI
103+
├── components/ # React components
104+
│ ├── custom/ # Project components
105+
│ └── ui/ # Shadcn UI components
106+
└── configs/ # Configuration
107+
├── data/ # Sample data
108+
├── i18n/ # i18n config
109+
├── messages/ # Translation files
110+
├── prisma/ # Database schema
111+
├── supabase/ # Auth config
112+
└── swagger/ # API documentation
103113
```
104114

105-
2. Using VS Code Dev Containers
106-
- Open project in VS Code
107-
- Install "Remote - Containers" extension
108-
- Command Palette → "Remote-Containers: Reopen in Container"
115+
## 🚦 API Development
109116

110-
## Project Structure
117+
1. Create your API route in `app/api/`
118+
2. Add route schema in `configs/swagger/config.ts`
119+
3. Auto-generated docs at `/api-docs`
111120

112-
```
113-
app/ # Next.js app directory
114-
├── [locale]/ # Internationalization routes
115-
│ ├── (private)/ # Protected routes
116-
│ └── (public)/ # Public routes
117-
├── api/ # API routes
118-
└── auth/ # Authentication endpoints
119-
120-
components/ # React components
121-
├── custom/ # Project-specific components
122-
└── ui/ # Reusable UI components
123-
124-
configs/ # Configuration files
125-
├── i18n/ # Internationalization setup
126-
├── messages/ # Translation files
127-
├── prisma/ # Database configuration
128-
└── supabase/ # Supabase integration
121+
Example API route with Swagger docs:
122+
```typescript
123+
// app/api/animals/random/route.ts
124+
import { NextResponse } from "next/server";
125+
import { animals } from "@/configs/data/animals";
126+
127+
export async function GET() {
128+
const random = Math.floor(Math.random() * animals.length);
129+
return NextResponse.json(animals[random]);
130+
}
129131
```
130132

131-
## Development Workflow
133+
## 🎯 Best Practices
132134

133-
### Available Scripts
134-
```bash
135-
# Development
136-
pnpm dev # Start development server with Turbopack
137-
pnpm build # Build for production
138-
pnpm start # Start production server
139-
140-
# Code Quality
141-
pnpm lint # Run ESLint
142-
pnpm lint:fix # Fix ESLint issues
143-
pnpm format # Check Prettier formatting
144-
pnpm format:fix # Fix Prettier formatting
145-
146-
# Database
147-
pnpm postinstall # Generate Prisma client
148-
```
135+
- **Code Quality**
136+
- TypeScript strict mode
137+
- ESLint + Prettier integration
138+
- Pre-commit hooks
139+
- Conventional commits
149140

150-
### Git Workflow
151-
- Follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
152-
- Use feature branches
153-
- Ensure tests pass before committing
154-
- Keep PRs focused and small
141+
- **Performance**
142+
- Server Components by default
143+
- Automatic code splitting
144+
- Image optimization
145+
- Optimized builds
155146

156-
## Deployment
147+
- **Security**
148+
- Environment variables
149+
- Type-safe database queries
150+
- Protected API routes
151+
- Auth middleware
157152

158-
### Vercel Deployment
159-
One-click deployment to Vercel:
153+
## 🌐 Deployment
160154

161-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fholedev%2Fstarter-kit&env=NEXT_PUBLIC_SUPABASE_URL,NEXT_PUBLIC_SUPABASE_ANON_KEY,DATABASE_URL,DIRECT_URL)
155+
### Vercel (Recommended)
156+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fholedev%2Fstarter-kit)
162157

163-
### Docker Deployment
164-
The project includes a multi-stage Dockerfile optimized for production:
165-
- Minimal base image
166-
- Security hardening
167-
- Optimized build layers
168-
- Environment variable support
158+
### Docker
159+
```bash
160+
docker compose up
161+
```
169162

170-
## Contributing
163+
## 🤝 Contributing
171164

172-
1. Fork the repository
173-
2. Create a feature branch
174-
3. Commit changes following conventional commits
175-
4. Push to the branch
176-
5. Open a Pull Request
165+
1. Fork and clone
166+
2. Create feature branch (`git checkout -b feature/amazing-feature`)
167+
3. Commit changes (`git commit -m 'feat: add amazing feature'`)
168+
4. Push branch (`git push origin feature/amazing-feature`)
169+
5. Open Pull Request
177170

178-
## Security
171+
## 📝 License
179172

180-
- Keep dependencies updated
181-
- Never commit sensitive data
182-
- Use environment variables
183-
- Follow security best practices
173+
MIT License - fork, modify and use as you wish.
184174

185-
## Authors
175+
## 👨‍💻 Author
186176

187-
- [@holedev](https://www.github.com/holedev)
177+
[@holedev](https://www.github.com/holedev)

0 commit comments

Comments
 (0)