Skip to content

πŸ“œ Full-stack blogging platform with wildcard domains. e.g. you.frostcore.tech + user interactions + SSR & SSG

License

Notifications You must be signed in to change notification settings

AbidAlWassie/next-blog

Repository files navigation

πŸš€ Next Blog - Multi-Tenant Blogging Platform

A modern, full-stack blogging platform built with Next.js, Prisma, PostgreSQL, and TypeScript. This platform allows users to create and manage multiple blogs, each with its own custom subdomain (e.g., mysite.frostcore.tech). Perfect for developers, content creators, and businesses looking to manage multiple blogs under one roof.


πŸ”₯ Techstack

TailwindCSS


✨ Features

🏒 Multi-Tenant Architecture

  • Create and manage multiple blogs under one account.
  • Each blog gets a unique subdomain (e.g., mysite.frostcore.tech).
  • Isolated content and settings for each blog.

πŸ” Authentication & Authorization

  • Secure authentication with NextAuth.js.
  • Supports email/password, Google, and GitHub login.
  • Role-based access control for managing blogs and posts.

πŸ“ Blog Management

  • Create, edit, and publish blog posts with a rich text editor.
  • Save drafts and schedule posts for later.
  • Manage multiple blogs from a single dashboard.

🎨 Modern UI/UX

  • Built with Tailwind CSS and shadcn/ui for a sleek, responsive design.
  • Dark/Light mode support.
  • Customizable themes and components.

πŸ› οΈ Technical Features

  • Next.js for server-side rendering and API routes.
  • Prisma for database management and migrations.
  • PostgreSQL as the primary database.
  • TypeScript for type-safe development.
  • Turbopack for faster builds and development.

πŸš€ Quick Start

Prerequisites

  • Node.js 18+
  • PostgreSQL (running locally or remotely)
  • pnpm (recommended package manager)

Installation

  1. Fork & Clone the repository:

    git clone https://github.com/your-username/next-blog.git
    cd next-blog
  2. Install dependencies:

    pnpm install
  3. Set up your environment variables: Create a .env file in the root directory and add the following:

    DATABASE_URL="postgresql://username:password@localhost:5432/your_database_name?schema=public"
    GOOGLE_CLIENT_ID="your_google_client_id"
    GOOGLE_CLIENT_SECRET="your_google_client_secret"
    GITHUB_CLIENT_ID="your_github_client_id"
    GITHUB_CLIENT_SECRET="your_github_client_secret"
    NEXTAUTH_URL="http://localhost:3000" or "your_domain.com" for production
    NEXTAUTH_SECRET="run: npx auth secret or run: openssl rand -base64 32"
    
    RESEND_API_KEY="your_resend_api_key"
    # EMAIL_SERVER_PASSWORD="your_resend_api_key" same as RESEND_API_KEY
    EMAIL_SERVER_USER=resend
    EMAIL_SERVER_HOST=smtp.resend.com
    EMAIL_SERVER_PORT=465
    EMAIL_FROM=[email protected]
    
    BASE_DOMAIN="localhost:3000" # for development
    # BASE_DOMAIN="your_domain.com" # for production
    PROTOCOL="http://" # for development
    # PROTOCOL="https://" # for production
  4. Run database migrations:

    pnpm prisma migrate dev --name init
  5. Seed the database (optional):

    pnpm seed
  6. Start the development server:

    pnpm dev
  7. Open your browser and navigate to http://localhost:3000.


πŸ› οΈ Scripts

  • pnpm dev: Start the development server with Turbopack.
  • pnpm build: Generate Prisma client and build the project.
  • pnpm start: Start the production server.
  • pnpm lint: Run ESLint to check for code issues.
  • pnpm prisma studio: Open Prisma Studio to visualize and edit the database.
  • pnpm prisma generate: Generate the Prisma client.
  • pnpm prisma db push: Push the Prisma schema state to the database.

🧩 Tech Stack

  • Frontend: Next.js, React, Tailwind CSS, shadcn/ui
  • Backend: Next.js API Routes, Server Actions
  • Database & Authentication: PrismaORM, PostgreSQL, NextAuth
  • Utilities: Zod (validation), UUID (unique IDs), Resend (email)

πŸ“‚ Project Structure

next-blog/
β”œβ”€β”€ app/                  # Next.js app router
β”‚   └── ...
β”œβ”€β”€ components/           # Reusable UI components
β”œβ”€β”€ components.json       # Components configuration
β”œβ”€β”€ lib/                  # Utility functions
β”œβ”€β”€ middleware.ts         # Middleware configuration
β”œβ”€β”€ prisma/               # Prisma schema and migrations
β”œβ”€β”€ public/               # Static assets
β”œβ”€β”€ README.md             # Project README file
β”œβ”€β”€ styles/               # Global styles
β”‚   └── ...
β”œβ”€β”€ .env                  # Environment variables
β”œβ”€β”€ .env.example          # Example env
β”œβ”€β”€ .gitignore            # Git ignore file
β”œβ”€β”€ next.config.ts        # Next.js configuration
β”œβ”€β”€ next-env.d.ts         # Next.js environment types
β”œβ”€β”€ tsconfig.json         # TypeScript configuration
β”œβ”€β”€ eslint.config.mjs     # ESLint configuration
β”œβ”€β”€ postcss.config.mjs    # PostCSS configuration
β”œβ”€β”€ package.json          # Project dependencies
β”œβ”€β”€ pnpm-lock.yaml        # pnpm lock file

🀝 Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature).
  3. Commit your changes (git commit -m 'Add some feature').
  4. Push to the branch (git push origin feature/your-feature).
  5. Open a pull request.

πŸ“„ License

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


Keep blogging! πŸŽ‰

Releases

No releases published

Packages

No packages published