DEV Community

Cover image for 🧩 Next.js Application with TypeScript, Bootstrap, Supabase
Renuka Nandikolla
Renuka Nandikolla

Posted on

🧩 Next.js Application with TypeScript, Bootstrap, Supabase

#nextjs #typescript #fullstack #webdev

A full-stack web application Project built with Next.js, TypeScript, Bootstrap, and Supabase, featuring secure user authentication, form validation, image uploads, and product management.

🚀 Features

  • User Authentication: Email/password registration and login
  • Social Login: Google & GitHub authentication
  • Protected Routes: Access control for dashboard and profile pages
  • Form Validation: Client-side validation using yup and react-hook-form
  • Product Management: Create, read, update, and delete products
  • Image Uploads: Upload and display product images using Supabase Storage
  • Notifications: Toast messages via react-hot-toast for user feedback
  • Email Confirmation: Users verify email before login
  • Edit/Delete Profile and Products: Update profile and delete products permanently

🛠️ Prerequisites

  • Node.js
  • npm or Yarn
  • VS Code or preferred code editor

⚙️ Getting Started

1. Initialize Project 

npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

Use these settings during setup:

  • TypeScript: Yes
  • ESLint: Yes
  • Tailwind CSS: Yes
  • App Router: Yes
  • Turbopack: No
  • src/ directory: No
  • Import alias: No

2. Install Dependencies 

npm install bootstrap react-hot-toast sweetalert2 yup react-hook-form @hookform/resolvers @supabase/supabase-js
Enter fullscreen mode Exit fullscreen mode
  • Bootstrap: UI styling
  • React Hot Toast: Toast notifications
  • SweetAlert2: Stylish alert modals
  • Yup: Schema validation
  • React Hook Form: Form handling
  • @hookform/resolvers: Integrates Yup with React Hook Form
  • @supabase/supabase-js: Supabase client for authentication and database

🔧 Supabase Configuration

1. Register and Create a Supabase Project

  1. Visit Supabase and register for an account.
  2. Click on "New Project" to create a new Supabase project.
  3. After creation, go to Project Settings → API and copy your Project URL and Anon Key.

💡 Note: Store your credentials securely. Avoid hardcoding them in your frontend for production.

2. Email Authentication Settings

  1. In Supabase dashboard, go to Authentication → Settings.
  2. Under Email Sign up:
    • Optionally disable "Confirm new signups" and "Secure password" for development.
  3. Click Save.

⚠️ For production, always enable secure options to protect user data.

🌱 Environment Variables Setup

1. Create a .env.local File

In your project root, create .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
Enter fullscreen mode Exit fullscreen mode

🗂️ Project Folder Structure

  • app/auth/: Authentication-related pages
  • components/: Shared UI components
  • context/: React Context providers for global state
  • lib/: Utility files, including Supabase client initialization

🔌 Supabase Client Setup

Create lib/supabaseClient.ts:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);
Enter fullscreen mode Exit fullscreen mode

🔑 Authentication

Authentication Routes

  • Login Page (app/auth/login/page.tsx): Implement login form. On success, store session token in sessionStorage and redirect to dashboard.
  • Register Page (app/auth/register/page.tsx): Registration form with validation.
  • Profile Page (app/auth/profile/page.tsx): Display and update user details.
  • Dashboard Page (app/auth/dashboard/page.tsx): Protected route; redirect to /auth/login if not logged in.
  • Social Authentication: Google & GitHub.

Enable Social Authentication in Supabase

  1. Go to Authentication → Providers in Supabase.
  2. Enable Google and GitHub.
  3. Set up OAuth credentials:

Logout Functionality

  • Implement an onClick handler for logout in Navbar.tsx to clear session/local storage and redirect to login.

🖼️ UI Components

Layout Setup (app/layout.tsx)

  1. Remove unnecessary code.
  2. Update <title>.

  3. Import Bootstrap CSS:

      import 'bootstrap/dist/css/bootstrap.min.css';

  4. Import and add Toaster:

      import { Toaster } from 'react-hot-toast';

  5. Wrap children with AppUtils context:

Shared Components (components/)

  • Navbar.tsx: Navigation bar with conditional links based on auth state.
  • Footer.tsx: Simple footer.
  • Loader.tsx: Loader for loading states.

🧩 Context and Hooks

  • context/AppUtils.tsx: Manages global states like isLoggedIn and AuthToken. Use useEffect to handle session logic and redirections with useRouter.

✅ Form Validation

  • Register Page: Use react-hook-form, yup, and @hookform/resolvers/yup for schema validation.
  • Dashboard Page: Define validation schema for product fields.

📦 Dashboard & Data Management

  • Supabase Table: Create a products table in Supabase Table Editor.
  • Display Products: In app/dashboard/page.tsx, use useState for products, render list, and add "Edit" and "Delete" buttons.

C:\Users\RENUKA\Pictures\Screenshots\Screenshot (242).png

🖼️ Image Uploads

  • Supabase Storage: Create a bucket (e.g., product-images).
  • Image Upload Implementation: In dashboard, use useState for preview image, handle file input, upload to Supabase Storage, and update product with image URL.

▶️ Running the Application 

npm run dev
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:3000.

🛠️ Troubleshooting

  • Environment Variables: Ensure .env.local is correct and uses NEXT_PUBLIC_ prefix.
  • Supabase API Keys: Double-check URL and Anon Key.
  • CORS Issues: Check Supabase project settings.
  • Authentication Flow: Verify session tokens in storage.
  • Redirections: Check useRouter paths.
  • Toast Messages: Ensure Toaster is imported and used.
  • Image Uploads: Check Supabase Storage rules and tsconfig.json paths.

✨ Additional Features

  • Email Confirmation: After registration, users receive a confirmation email and must verify before login. On confirmation, redirect to login with a toast notification.
  • Edit & Delete User Details: Users can update profile details and permanently delete products.

🚀 Deployment

Deploy your Next.js application to Vercel.

My Project Vercel Link - https://next-supabase-app-rq9n.vercel.app/

🔗 Live Demo:

Check out the project showcased on LinkedIn.

📂 Project Code on GitHub:

https://github.com/Renuma1618/Next-Supabase-App

Top comments (0)