It is a Web in which you can create, delete, update tasks and when you perform any action you will be notified by email about each action performed, made in NextJS at first with Prisma & SQLite and migrated to Supabase (In this video i show how i made the migration), for email notification uses Resend, layout with Tailwind CSS and uses Shadcn components.
- Frontend Next.js
- Supabase as Database
- Render tables with Tanstack Table
- Email notification with Resend
- Styling with Tailwind CSS
- Components with shadcn/ui
Home Page and Dark Mode Activated
Create Task
Table View
Update Task and Dark Mode Activated
-
You'll first need a Supabase project which can be made via the Supabase dashboard
-
Create a Resend Account
-
Clone this repository
git clone https://github.com/victoraranguren/nextjs-crud-supabase.git
-
Use
cd
to change into the app's directorycd nextjs-crud-supabase
-
Create
.env
and update the following:NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL] NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY] RESEND_API_KEY=[INSERT RESEND API KEY] RESEND_EMAIL_TEST=[INSERT RESEND EMAIL TEST]
Both
NEXT_PUBLIC_SUPABASE_URL
andNEXT_PUBLIC_SUPABASE_ANON_KEY
can be found in your Supabase project's API settingsRESEND_API_KEY
can be found in Resend API KeysRESEND_EMAIL_TEST
is usually the email with which you created the account -
You can now install dependencies for the project with this command:
npm i
-
You can now run the Next.js local development server:
npm run dev
The starter kit should now be running on localhost:3000.