Project Starter

Project Starter

Get coding fast with ready-to-go project templates.

Quick Start Commands

Next.js (Recommended for Web Apps)

npx create-next-app@latest my-app
cd my-app
npm run dev

Say YES to:

• TypeScript (catches errors)
• ESLint (code quality)
• Tailwind CSS (easy styling)
• App Router (newer, better)
• src/ directory (cleaner)

Folder Structure:

my-app/
├── src/
│   ├── app/              # Pages and routes
│   │   ├── page.tsx      # Home page (/)
│   │   ├── layout.tsx    # Shared layout
│   │   ├── globals.css   # Global styles
│   │   └── api/          # Backend routes
│   ├── components/       # Reusable UI
│   └── lib/              # Utilities, configs
├── public/               # Static files
└── .env.local            # Environment variables

Add shadcn/ui (great components):

npx shadcn@latest init
npx shadcn@latest add button card input

React with Vite (Lighter Alternative)

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Add Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add to tailwind.config.js:

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

Add to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Node.js API (Backend)

mkdir my-api
cd my-api
npm init -y
npm install express cors dotenv

Create index.js:

import express from 'express';
import cors from 'cors';
import 'dotenv/config';

const app = express();
app.use(cors());
app.use(express.json());

app.get('/', (req, res) => {
  res.json({ message: 'Hello!' });
});

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'John' }]);
});

app.post('/api/users', (req, res) => {
  const { name } = req.body;
  res.json({ id: 2, name });
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Add to package.json:

{
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js"
  }
}

Python FastAPI

mkdir my-project
cd my-project
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install fastapi uvicorn python-dotenv

Create main.py:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
def read_root():
    return {"message": "Hello!"}

@app.get("/api/users")
def get_users():
    return [{"id": 1, "name": "John"}]

# Run with: uvicorn main:app --reload

Create requirements.txt:

fastapi
uvicorn
python-dotenv

Expo (React Native Mobile)

npx create-expo-app my-app
cd my-app
npx expo start

Scan QR code with Expo Go app on your phone.

Add navigation:

npx expo install expo-router react-native-screens react-native-safe-area-context

Essential First Steps (All Projects)

1. Initialize git

git init
git add .
git commit -m "initial commit"

2. Create .env.local (add to .gitignore)

API_KEY=your-secret-key
DATABASE_URL=your-db-url
NEXT_PUBLIC_APP_URL=http://localhost:3000

3. Install common packages

React/Next.js:

# State management
npm install zustand

# Data fetching
npm install @tanstack/react-query

# Forms
npm install react-hook-form zod @hookform/resolvers

# Icons
npm install lucide-react

Backend:

npm install express cors dotenv
npm install -D nodemon

Common Additions

Firebase:

npm install firebase

Supabase:

npm install @supabase/supabase-js

Authentication (NextAuth):

npm install next-auth

Database (Prisma):

npm install prisma @prisma/client
npx prisma init

Date handling:

npm install date-fns

Animation:

npm install framer-motion

Project Templates (Starter Kits)

Next.js + Supabase + Auth:

npx create-next-app -e with-supabase

T3 Stack (Next.js + tRPC + Prisma + Tailwind):

npm create t3-app@latest

Remix:

npx create-remix@latest

Which Stack to Choose?