Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/timtbdev/next.js-blog-app
✨ Multi-User, Full-stack blogging application built with Next.js and Supabase.
https://github.com/timtbdev/next.js-blog-app
client-components convertkit cookie-based-login headlessui nextjs nodemailer novel react-email react-hook-form react-hot-toast server-actions server-components shadcn-ui supabase-auth supabase-db supabase-js tailwindcss tanstack-table tiptap zod
Last synced: 1 day ago
JSON representation
✨ Multi-User, Full-stack blogging application built with Next.js and Supabase.
- Host: GitHub
- URL: https://github.com/timtbdev/next.js-blog-app
- Owner: timtbdev
- Created: 2023-07-09T14:28:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-10T08:21:25.000Z (9 months ago)
- Last Synced: 2025-01-20T00:08:33.637Z (1 day ago)
- Topics: client-components, convertkit, cookie-based-login, headlessui, nextjs, nodemailer, novel, react-email, react-hook-form, react-hot-toast, server-actions, server-components, shadcn-ui, supabase-auth, supabase-db, supabase-js, tailwindcss, tanstack-table, tiptap, zod
- Language: TypeScript
- Homepage: https://ink.mn
- Size: 2.8 MB
- Stars: 351
- Watchers: 8
- Forks: 62
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://ub.cafe) is a multi-user, full-stack Next.js app with Supabase support. Built with [Next.js App Router](https://nextjs.org/docs/app), [Supabase Auth](https://supabase.com/docs/guides/auth) and [Supabase Database](https://supabase.com/docs/guides/database), [Supabase Storage](https://supabase.com/docs/guides/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](./database_schema/)
## 📊 Google Lighthouse performance statistics
## 📚 Tech Stacks
- App Router,
- Server Actions
- Server and Client Components
- Data Fetching, Insertion using [Supabase-JS-Client](https://supabase.com/docs/reference/javascript/introduction)
- API Routes and Middlewares
- Cookie based Authentication using [Supabase Auth](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- CMS using [Supabase Database](https://supabase.com/docs/guides/database)
- Metadata files
- Open Graph Image Generation using [Vercel/Og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)
- Image Upload using [Uppy](https://uppy.io) and [Supabase Storage](https://supabase.com/docs/guides/storage/uploads)
- Styled using [Tailwind CSS](https://tailwindcss.com/)
- UI Components using [HeadlessUI](https://headlessui.com), [Radix-UI](https://radix-ui.com), [Shadcn-UI](https://ui.shadcn.com/)
- WYSIWYG editor using [Novel](https://novel.sh/)
- Loading, Error, NotFound, Empty pages
- Sending emails using [NodeMailer](https://nodemailer.com) and [React Email](https://https://react.email/), [Gmail](https://gmail.com)
- Forms using [React-Hook-Forms](https://www.react-hook-form.com/)
- Toasts using [React-Hot-Toast](https://react-hot-toast.com/)
- Validations using [Zod](https://zod.dev)
- Icons using [HeroIcons](https://heroicons.com/) & [Lucide-Icon](https://lucide.dev/icons/)
- Newsletter using [ConvertKit](https://convertkit.com/)
- Drawer using [Vaul](https://vaul.emilkowal.ski/)
- Written in [TypeScript](https://www.typescriptlang.org/)
## ⌨️ Code Quality
- [TypeScript](https://www.typescriptlang.org/)
- [Prettier](https://prettier.io/)
- [ESLint](https://eslint.org/)
## 📈 Miscellaneous
- [Vercel Analytics](https://vercel.com/analytics)
# ⚙️ Getting Started
## Requirements
To run this app locally you need
- [Node.js (Version: >=18.x)](https://nodejs.org/en/download/)
- Node Package Manager NPM - included in Node.js
- [PostgreSQL (local or remote)](https://www.postgresql.org/download/)
## Developer Quickstart
Want to get up and running quickly? Follow these steps:
- [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
```sh
git clone https://github.com/timtbdev/Next.js-Blog-App.git
```
- Set up your [Supabase Database](https://supabase.com/docs/guides/database) and Auth wit with [Social Logins](https://supabase.com/docs/guides/auth/social-login)
- Set up your [ConverKit](https://ihatetomatoes-nextjs-101.vercel.app/post/convertkit-api-variables)
- Set up your `.env` file using the recommendations in the `.env.example` file.
- Run `npm installation` in the root directory
```sh
npm installation --legacy-peer-deps
```
- Run `npm run dev` in the root directory
- Want it even faster? Just use
```sh
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](https://timtb.dev/contact) with a question, piece of feedback, or idea you want to share with me.
- [Open an issue](https://github.com/timtbdev/Next.js-Blog-App/issues) if you believe you've encountered a bug with the starter kit.
## 🙇 Author
- Tim ([@timtbdev](https://twitter.com/timtbdev))
## License
Licensed under the [MIT license](https://github.com/shadcn/taxonomy/blob/main/LICENSE.md).