Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ssk-14/clerk-supabase-blog
Simple Blogging web application build for learning 📝
https://github.com/ssk-14/clerk-supabase-blog
blog clerk crud next supabase tailwindcss vercel
Last synced: about 1 month ago
JSON representation
Simple Blogging web application build for learning 📝
- Host: GitHub
- URL: https://github.com/ssk-14/clerk-supabase-blog
- Owner: SSK-14
- License: mit
- Created: 2022-12-31T11:16:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-02T14:52:23.000Z (over 1 year ago)
- Last Synced: 2024-11-05T11:00:13.874Z (3 months ago)
- Topics: blog, clerk, crud, next, supabase, tailwindcss, vercel
- Language: TypeScript
- Homepage: https://instapost-demo.vercel.app
- Size: 2.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **Clerk Supabase Blog**
## Demo [🔗](https://instapost-demo.vercel.app)
https://user-images.githubusercontent.com/45158568/235469362-323192cf-82e6-4be8-9e2b-6887f72a03ce.mp4
## Overview
Simple Blogging web application that allows users to login, create posts, view posts, like posts, and edit and update their own posts.
Build for learning purposes only.
- **NextJS** 💻 - SSR and performant frontend with API routes built in [learn more](https://nextjs.org/)
- **Clerk** 🔑 - Clerk is the easiest way to add authentication and user management to your Next.js application [learn more](https://clerk.com/docs)
- **Supabase** 🔥 - For PostgresSQL DB [learn more](https://supabase.io/)
- **TailwindCSS** 🖼 - Utility style CSS for quickly building out the interface
Users can sign up for an account using Clerk's authentication system and login to the application. Once logged in, they can create a post with a title and a description. Users can also view other users' posts and like them. Additionally, users can edit and update their own posts.
## Getting Started
1. First, we will need to create a [Clerk project](https://dashboard.clerk.com/).
2. Enable Email address, Username, Password, Email verification code, Name in [Clerk project](https://dashboard.clerk.com/) > CONFIGURE > User & Authentication > Email, Phone, Username.
3. Once that is setup now create a Supabase project which you can do by heading over to https://supabase.io.
4. Go back to your Clerk dashboard, and navigate to JWT Templates. Press "New Template" then select the "Supabase" template to get started.
- Use Signing algorithm: HS256
- Copy your Supabase JWT Secret into "Signing key"
- Add the template name in .env
5. Create a table in supabase, go to SQL Editor and run the SQL snippets [schema.sql](schema.sql) .
## Development
1. Clone the repo
```
git clone https://github.com/SSK-14/clerk-supabase-blog
```
2. Install packages
```
npm install
```
3. Then we can create our environment file as follows:
```
# .env
NEXT_PUBLIC_SUPABASE_URL="https://__PROJECT_ID__.supabase.co"
NEXT_PUBLIC_SUPABASE_KEY="your-supabase-anon-key"
NEXT_PUBLIC_CLERK_FRONTEND_API = "your-clerk-frontend-api"
NEXT_PUBLIC_SUPABASE_TEMPLATE_KEY = 'YOUR_SUPABASE_CLERK_TEMPLATE_KEY'
```
4. Run the app
```
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## License
The MIT License (MIT). Please see LICENSE.md for more info