Next.js 15 & Supabase - Build a Fitness Centre & Gym App

Explore Clerk, an npm authentication library for Next.js apps, delivering sign up, sign in, user info, and sign out components with a built-in users database and free project setup.

Learn how to install and set up Clerk authentication in a Next.js project, including creating an application, configuring environment keys, creating middleware, and wrapping the app with the Clerk provider.

Design a responsive home page with a gradient background, a header with logo and sign-in, a centered project title and caption, and an explore plans call to action.

implement sign up and sign in within a sheet component on the home page using clerk, routing via hash and query strings to render forms, with custom styling.

Implement sign-up, sign-in, and sign-out flows using a private route pattern and clerk components, with email verification and fallback redirects guiding navigation to the account page.

Fetch the logged-in user object on the Clerk server component, extract first name, last name, email address from the array, and the user id, and display them in user interface.

Learn to protect private routes in Next.js with middleware and Clerk, redirecting unauthenticated users to the home page.

Set up a supabase project in a Next.js 15 app by creating an organization and project and configuring the project URL and API key, then install @supabase/supabase-js.

Create a user profiles table in Supabase to store Clerk user data. Maintain data in your own database, using Clerk for authentication, with full permissions.

Store the clerk user in the Supabase user profiles table by retrieving the current user, checking for an existing record, and inserting a new user when needed.

Implement the layout skeleton for private routes in a Next.js 15 app, with a header showing user info and a hamburger menu, plus a public/private layout that renders route-based content.

Style the private layout header by wiring tailwind config, fetch the current user from supabase, and display the user name with a hamburger icon, using react hot toast for errors.

Learn to render user- or admin-specific menu items in a private layout using a hamburger-triggered sheet, with path-based active highlighting and next navigation in a Next.js 15 and Supabase app.

Learn to implement a reusable spinner component in a private layout to show a loading state while awaiting user data. Handle errors and render content once loaded.

Learn how to store the logged in user in a global store instead of private layout state, using zustand, to access data across pages like profile without extra API calls.

Implement manual sign out in the private layout by adding a Clark sign out button that deletes the browser session and restricts access to the account page until re-login.

Explore plans CRUD in the admin module with adding, editing via a reusable plan form, deleting, and rendering plans from Supabase, including pricing and media.

Create the plans table in supabase for a fitness app, defining text fields, features and images as arrays, pricing as floats, an active flag, and a plan interface with permissions.

Develop and wire server actions for the plans module using Supabase to perform add, get all, get by id, update, and delete on the plans table with robust error handling.

Add a plans menu item and build the admin/plans folder with add and edit routes, and create a reusable plan form plus a shared page title for the admin UI.

Set up the plan form for a fitness app by installing the Qaqun form, defining a schema, and building a UI with inputs and a dynamic features array.

Render pricing fields dynamically from an array in a grid, implement image uploads with previews and delete, and manage state with numeric conversions for the plan form.

Implement the add new plan workflow by async onsubmit, uploading media to Supabase storage, obtaining public URLs, storing them in the plans table, and routing to admin/plans after success.

Fetch all plans from the server and render them in a dynamic admin plans table, format created dates with the deejays library, and provide edit and delete actions.

Learn to edit a plan by fetching by id, pre-populating name, description, features, and pricing, and manage images by preserving existing media URLs and uploading new ones to Supabase storage.

Fetch and display available gym plans on the home page by rendering plan cards with name, description, image, features, and pricing, sorted by monthly price in a responsive grid.

Show plans on home page by clicking the explore plans button to auto-scroll to the plans section, then apply line clamps to descriptions and features, with a view more option.

Outline the purchase plan flow, validating the user's active subscription, showing available plans, and guiding checkout with plan details, start and end dates, and Stripe payment.

Display available subscription plans in the account purchase flow, fetch plans with loading state, and render plan cards with features and pricing for a Next.js 15 and Supabase fitness app.

Build and manage pricing plans for a fitness app by implementing get payment plans, rendering a plan select, storing selections in a global store, and enabling checkout navigation.

Explains how to build the checkout page UI, display the selected plan with amount and duration, show start and end dates, and enable a Stripe payment modal on pay now.

Implement stripe payments in a Next.js app by creating a stripe account, configuring keys, building a payment intent API to generate client secret, and finalizing payments with subscription record saving.

Implement the stripe payment intent api by building a server action that returns a client secret for a given amount and usd currency, with a gym payment description.

Set up Stripe by creating or signing into a Stripe account, and add the publishable and secret keys to your Next.js environment variables to enable client and server integration.

Install Stripe React JS, load the Stripe client secret, and render a credit card form inside a dialogue modal to securely process payments and create subscriptions.

Learn to save subscriptions using Stripe and Supabase, create a subscriptions table linked to plans and users, implement a server action to store payloads, and navigate to subscriptions after payment.

Fetch the current user’s active subscription and render it on the home page, include the plan details, while listing all subscriptions on the subscriptions page, using supabase and interface definitions.

Display all subscriptions for the logged-in user on the my subscriptions page using a server action to fetch data and render a table of subscription id and dates.

Build an admin subscriptions page that lists all subscriptions and customers, featuring an admin panel and a get all subscriptions function.

Fetch all users via a server action in the admin panel using Supabase. Render a table with id, name, email, is admin, is active, and created at.

Distinguish paid customers on the admin customers page by adding an is_customer flag to user profiles and fetching only those subscribers, avoiding client-side filtering for better performance.

Build and display the admin customers page in a Next.js 15 app with Supabase, fetch all customers, manage loading states, and show a 3-column table of id, name, and email.

Learn to build an admin dashboard UI that conditionally renders user subscription content or admin content based on user role, using reusable dashboard cards for users and subscriptions.

Learn to fetch admin dashboard data efficiently by building server-side queries and db functions in Supabase, replacing client-side filtering with RPC calls from your Next.js app.