This project is a comprehensive demonstration of integrating Next.js with Supabase, Clerk, and Material UI to create a robust TODO application. It showcases CRUD operations, authentication, and a modern UI design.
In this tutorial we will build a CRUD application by combining three major technologies. We will use Clerk for Auth, Supabase for database and Nextjs as a framework. You will also learn in this guide:
- How to create Route Handler with Nextjs 14 App Router?
- How to set up Auth system with Clerk?
- How to establish Supabase connection with JWT token?
For a detailed guide to this project: 'Todo App Guide with Nextjs 14, Clerk and Supabase'
- CRUD Operations: Create, read, update, and delete your TODOs.
- Authentication: Secure user authentication using Clerk.
- Database: Supabase integration for backend storage.
- UI: Sleek user interface with Material UI.
- Node.js
- npm or yarn
- Clerk and Supabase installations must be done, there must be api keys in the .env.local file.
Clone the repository:
git clone https://github.com/Ali-Onar/nextjs-supabase-todo-app.gitInstall dependencies:
npm install
# or
yarn installRun the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
The application should look like the following at the end:
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.