Next.js & Supabase - Portfolio Builder App 2025

Discover Clerk, a Next.js authentication library with sign in, sign up, and user info components and a built-in users database for easy integration with Supabase.

Create a clerk account and portfolio builder project, then integrate clerk with a Next.js app using env file, middleware, and a clerk provider to enable sign up and sign in.

Create the portfolio builder app's homepage with a header and two-column hero, styling with Montserrat fonts and a generated theme, and update global CSS to reflect the theme.

Build sign up and sign in within a reusable sheet drawer on the home page, toggle forms via query strings, and route to a private account page after authentication.

Implement sign up, sign in, and get logged in user with verification emails, display account details, and sign out using clerk components and a custom sign-out button.

Learn to protect private routes in a Next.js app using Clerk middleware, configure route matching, and redirect unauthenticated users to the home page with env-based sign-in URLs.

Integrate a Supabase project into a Next.js app by creating an organization and project, configuring project URL and API key, and setting env variables for client and server components.

Store clerk user details in a Supabase user profiles table to extend attributes and enable relationships with projects, skills, technologies, and experiences.

Implement server actions to store clerk user data in the Supabase user profiles table, using current user checks and create-if-missing logic to ensure unique email and clerk user ID.

Build a layout skeleton for private routes in a Next.js app, featuring a header with the portfolio builder title and logged-in user, and a burger menu triggering a sidebar.

Fetch and display the logged-in user in the layout header by calling a server action to retrieve current user data, manage loading, and render the header with the user’s name.

Implement a spinner component and integrate react hot toast to display error and success messages, rendering the toaster at the root layout to replace console errors with user-friendly notifications.

Open a responsive sidebar via the hamburger menu within private layout, display a menu of home, profile, educations, skills, projects, experiences with icons and paths, and enable navigation and highlighting.

Create a global store with zustand to hold the logged-in user data across the Next.js app. Access the user data in any component without prop drilling.

Build a user profile page with an editable form for name, title, tagline, bio, and hero image, using default values from a user object and CDN form components, with onSubmit.

Add bio and hero image fields to the profile form using a rich text editor and a file input with live preview, preparing the update profile flow with supabase storage.

Update a user profile by uploading a hero image to Supabase storage, retrieving its public URL, and saving it in the user profiles table, via a server action.

Explore building a projects crud in a Next.js and Supabase portfolio app, including creating the projects table, user relations, and a reusable project form for add and edit.

Builds the project form UI for a Next.js and Supabase portfolio app, adding a text area, image preview, and a two-column grid for demo and repo links with client-side routing.

Implement save project functionality using server actions with Supabase, handling add and edit operations, payload construction, error handling, and success messages, while wiring user id and navigation.

show how to display user projects in the account/projects route using a dynamic table in a Next.js and Supabase portfolio builder app, with server actions to fetch by user id.

Master the edit project flow in a Next.js and Supabase app: route to account/project/edit/{id}, fetch the project by id via a server action, and prefill the form with initial values.

Implement delete project by id via a server action, show loading state and toast messages, and revalidate the account/projects path to refresh data.

Create the experiences module with a Supabase table and CRUD server actions, then implement a reusable experience form UI for add and edit pages.

Build and test the experience form UI in a Next.js portfolio app, using two- and three-column grids for role, company, dates, location, and description with cancel and save actions.

Practice building a dynamic experiences module in Next.js by showing, editing, and deleting user experiences with an experiences table, edit forms, and loading states.

Implement a client-only skills module in the portfolio builder app, using a modal form for adding skills and a dedicated skills table linked to user profiles.

Learn to implement a skill form as a dialog box in a Next.js and Supabase portfolio app, including add/edit handling, form schema, image preview, validation, and automatic data reload.

Learn to display, edit, and delete skills in a client component, including fetching by user ID, showing a loading spinner, and updating the table via modal forms and CRUD handlers.

Builds the educations module for freshers in a portfolio app, defining degree, institution, start and end dates, location, and percentage, with add/edit routing and a table linked to user profiles.

Explain adding, showing, editing, and deleting education records in a Next.js and Supabase portfolio app by reusing the experiences module, including form, table, and CRUD pages.