timtbdev / Next.js-Blog-App

✨ Multi-User, Full-stack blogging application built with Next.js and Supabase.

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

frontend.mp4

🧰 Backend

📹 Preview

backend.mp4

💾 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.