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.

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.

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.

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.

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.

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.

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.

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.

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.

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.