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

backend.mp4
Database schema & dummy data: here


- 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
To run this app locally you need
- Node.js (Version: >=18.x)
- Node Package Manager NPM - included in Node.js
- PostgreSQL (local or remote)
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 directorynpm 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
- 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.
- Tim (@timtbdev)
Licensed under the MIT license.