https://github.com/leojuriolli7/ribbit
Next.js 13 Forum with Clerk, Drizzle ORM, Vercel Edge functions & webhooks.
https://github.com/leojuriolli7/ribbit
clerk drizzle forum nextjs nextjs13
Last synced: about 1 month ago
JSON representation
Next.js 13 Forum with Clerk, Drizzle ORM, Vercel Edge functions & webhooks.
- Host: GitHub
- URL: https://github.com/leojuriolli7/ribbit
- Owner: leojuriolli7
- Created: 2023-07-08T00:01:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-22T16:22:38.000Z (over 2 years ago)
- Last Synced: 2024-12-29T03:10:20.582Z (10 months ago)
- Topics: clerk, drizzle, forum, nextjs, nextjs13
- Language: TypeScript
- Homepage: https://ribbit-zeta.vercel.app
- Size: 1.18 MB
- Stars: 15
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Ribbit | The forefront of amphibious web browsing
Ribbit is a Reddit-inspired forum application built with [Next.js 13](https://nextjs.org/), [Drizzle ORM](https://orm.drizzle.team/) and [Clerk.](https://clerk.com/)
### Tech Stack
- Next.js 13 [App router](https://nextjs.org/docs/app)
- [Server components](https://nextjs.org/docs/getting-started/react-essentials#server-components) for direct secure access to backend resources and reduced client-side bundle sizes.
- [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions).
- React.js [Suspense](https://react.dev/reference/react/Suspense) and [Streaming data](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming) for smaller blocking times and responsive UI, without impacting SEO.
- React.js [cache()](https://nextjs.org/docs/app/building-your-application/data-fetching/caching#react-cache) and [useTransition](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-using-starttransition), among other new React 18 APIs.
- [New Next.js metadata API](https://nextjs.org/docs/app/api-reference/file-conventions/metadata) for easier SEO.
- [Drizzle ORM](https://orm.drizzle.team/) for operating SQL database.
- Planetscale's [databasejs](https://github.com/planetscale/database-js) serverless database driver.
The goal for this project is to **learn and use all new features from Next 13**, coming from Next 12.
### Authentication with Clerk
I set up authentication with [Clerk](https://clerk.com/), while also having my database's own user table by consuming their [webhooks.](https://clerk.com/docs/integration/webhooks)
Whenever a user is created, updated or deleted, a webhook is sent to `/app/api/webhooks/user/route.ts`, and we update the info in the project's Planetscale database.