Repository files navigation

A modern, full-featured blog built with Next.js, TypeScript, Prisma, PostgreSQL, and NextAuth.js for GitHub authentication.

• 📝 Write and publish blog posts with Markdown support
• 🔐 GitHub OAuth authentication
• 🎨 Clean, responsive design with Tailwind CSS
• 📊 View tracking for posts
• 🏷️ Categories and tags for organization
• 👤 Admin dashboard for managing posts
• 🚀 Optimized for Vercel deployment

• Node.js 18+ installed
• PostgreSQL database (local or cloud)
• GitHub OAuth App credentials

npm install

Create a.env file with the following variables:

# DatabaseDATABASE_URL="postgresql://username:password@localhost:5432/techblog?schema=public"# NextAuthNEXTAUTH_URL="http://localhost:3000"NEXTAUTH_SECRET="your-secret-key-here"# GitHub OAuthGITHUB_CLIENT_ID="your-github-client-id"GITHUB_CLIENT_SECRET="your-github-client-secret"

1. Go to GitHub Settings > Developer settings > OAuth Apps
2. Click "New OAuth App"
3. Fill in:
   • Application name: "Tech Blog"
   • Homepage URL: "http://localhost:3000" (or your production URL)
   • Authorization callback URL: "http://localhost:3000/api/auth/callback/github"
4. Copy the Client ID and Client Secret to your.env file

# Generate Prisma clientnpx prisma generate# Run migrationsnpx prisma migrate dev --name init# (Optional) Seed the databasenpx prisma db seed

npm run dev

Visithttp://localhost:3000 to see your blog!

git initgit add.git commit -m"Initial commit"git remote add origin your-github-repo-urlgit push -u origin main

1. Go tovercel.com
2. Click "New Project"
3. Import your GitHub repository
4. Configure environment variables:
   • Add all variables from your.env file
   • UpdateNEXTAUTH_URL to your production URL

You can use:

• Supabase (recommended)
• PlanetScale
• Neon
• Any PostgreSQL provider

Click "Deploy" and Vercel will build and deploy your blog!

1. Sign in with your GitHub account
2. Go to/admin
3. Click "New Post"
4. Write your post using Markdown
5. Add categories and tags
6. Publish!

• View all posts in the admin dashboard
• Edit existing posts
• Toggle between draft and published states
• Track view counts

tech-blog/├── src/│   ├── app/│   │   ├── api/          # API routes│   │   ├── admin/        # Admin pages│   │   ├── posts/        # Blog post pages│   │   └── layout.tsx    # Root layout│   ├── components/       # Reusable components│   ├── lib/             # Utilities│   ├── i18n/            # Internationalization│   └── types/           # TypeScript types├── messages/            # Translation files (i18n)├── prisma/│   └── schema.prisma    # Database schema├── docs/                # Project documentation└── public/              # Static assets

For detailed documentation, see thedocs/ directory:

• 🌍i18n Quick Start - Strongly typed translation system
• 💡Translation Examples - Code examples for i18n
• 🤖AI Features - AI-powered editor capabilities
• 🏗️Architecture Guide - Complete technical documentation

Feel free to open issues or submit pull requests! See ourcontributing guidelines for more details.

MIT