Multi-User, Full-stack Blogging Applicaition

The all-in-one starter kit
for building multi-user, full-stack blogging applications.

Introduction · Demo · Guide · Contributing

Introduction

The Blogging application is a multi-user, full-stack Next.js app with Supabase support. Built with Next.js App Router, Supabase Auth and Supabase Database, Supabase Storage.

💻 Frontend

📹 Preview

https://github.com/timtbdev/Next.js-Blog-App/assets/25026241/c0488b1b-ff48-4871-849d-806f09c39322

🧰 Backend

📹 Preview

https://github.com/timtbdev/Next.js-Blog-App/assets/25026241/29c35c5f-ad67-4f5b-9943-0fd0d94448b8

💾 Database Schema

Database schema & dummy data: here

📊 Google Lighthouse performance statistics

📚 Tech Stacks

• App Router,
• Server Actions
• Server and Client Components
• Data Fetching, Insertion using Supabase-JS-Client
• API Routes and Middlewares
• Cookie based Authentication using Supabase Auth
• CMS using Supabase Database
• Metadata files
• Open Graph Image Generation using Vercel/Og
• Image Upload using Uppy and Supabase Storage
• Styled using Tailwind CSS
• UI Components using HeadlessUI, Radix-UI, Shadcn-UI
• WYSIWYG editor using Novel
• Loading, Error, NotFound, Empty pages
• Sending emails using NodeMailer and React Email, Gmail
• Forms using React-Hook-Forms
• Toasts using React-Hot-Toast
• Validations using Zod
• Icons using HeroIcons & Lucide-Icon
• Newsletter using ConvertKit
• Drawer using Vaul
• Written in TypeScript

⌨️ Code Quality

• TypeScript
• Prettier
• ESLint

📈 Miscellaneous

• Vercel Analytics

⚙️ Getting Started

Requirements

To run this app locally you need

• Node.js (Version: >=18.x)
• Node Package Manager NPM - included in Node.js
• PostgreSQL (local or remote)

Developer Quickstart

Want to get up and running quickly? Follow these steps:

• Clone the repository it to your local device.

  git clone https://github.com/timtbdev/Next.js-Blog-App.git
  

• Set up your Supabase Database and Auth wit with Social Logins

• Set up your ConverKit

• Set up your .env file using the recommendations in the .env.example file.

• Run npm installation in the root directory

  npm installation --legacy-peer-deps
  

• Run npm run dev in the root directory

• Want it even faster? Just use

  npm run d
  

That's it! You should now be able to access the app at http://localhost:3000

Admin dashboard will also be available on http://localhost:300/editor/posts

Contributing

• Start a discussion with a question, piece of feedback, or idea you want to share with me.
• Open an issue if you believe you've encountered a bug with the starter kit.

🙇 Author

• Tim (@timtbdev)

License

Licensed under the MIT license.