Skip to main content

Dart_AI_Portal

Features​

Demo​

You can view a fully working demo at demo-nextjs-with-supabase.vercel.app.

Deploy to Vercel​

Vercel deployment will guide you through creating a Supabase account and project.

After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.

Deploy with Vercel

The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.

If you wish to just develop locally and not deploy to Vercel, follow the steps below.

Clone and run locally​

  1. You'll first need a Supabase project which can be made via the Supabase dashboard

  2. Create a Next.js app using the Supabase Starter template npx command

    npx create-next-app --example with-supabase with-supabase-app
    yarn create next-app --example with-supabase with-supabase-app
    pnpm create next-app --example with-supabase with-supabase-app

  3. Use cd to change into the app's directory

    cd with-supabase-app

  4. Rename .env.example to .env.local and update the following:

    NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
    NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]

    Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings

  5. You can now run the Next.js local development server:

    npm run dev

    The starter kit should now be running on localhost:3000.

  6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete components.json and re-install shadcn/ui

Check out the docs for Local Development to also run Supabase locally.

Feedback and issues​

Please file feedback and issues over on the Supabase GitHub org.

More Supabase examples​

Dart AI Portal

Internal portal to streamline operations with AI-powered tooling and workflows. Built on Next.js (App Router), Supabase Auth, Tailwind CSS, and shadcn/ui.

  • Authentication (login, sign-up, password reset)
  • Protected pages and dashboards
  • Operational modules: Daily Overview, Cargo Updates, Invoice Automation (AP Invoice)
  • API route(s) for server-side integration
  • Responsive UI with shadcn/ui and lucide-react icons

Tech Stack​

  • Next.js (App Router) + TypeScript
  • Supabase (Auth, SSR)
  • Tailwind CSS
  • shadcn/ui
  • lucide-react
  • next/image

App Structure (high level)​

app/
  api/
    cargo/
      route.ts            # Cargo API handler
  auth/
    confirm/route.ts      # Email confirmation (Supabase)
    error/page.tsx
    forgot-password/page.tsx
    login/page.tsx
    login-new/
      login-form.tsx
      page.tsx
    sign-up/page.tsx
    sign-up-success/page.tsx
    update-password/page.tsx
  dashboard/
    data.json
    page.tsx
  DailyOverview/
    page.tsx
  CargoUpdate/
    CargoPickupDate/page.tsx
    DashboardPage/page.tsx
  InvoiceAutomation/
    APInvoice/page.tsx
    APInvoiceSelector/page.tsx
    _components/
      add-template-dialog.tsx
      extraction-fields-panel.tsx
      template-preview-dialog.tsx
    _lib/
      invoice-templates.tsx
  protected/
    layout.tsx
    page.tsx
  layout.tsx
  page.tsx                 # Landing page (Hero, links)
  globals.css
  not-found.tsx
  opengraph-image.png
  twitter-image.png
components/
  hero1.tsx                # Hero section
  ui/…                     # shadcn/ui components

Key Routes​

  • / Landing page
  • /auth/login, /auth/sign-up, /auth/forgot-password, /auth/update-password
  • /protected Protected area (requires auth)
  • /dashboard Main dashboard
  • /DailyOverview Daily overview module
  • /CargoUpdate/CargoPickupDate Cargo pickup date management
  • /InvoiceAutomation/APInvoice AP Invoice automation
  • /InvoiceAutomation/APInvoiceSelector Template selection and extraction
  • /api/cargo Cargo API route (Route Handler)

Getting Started​

Prerequisites:

  • Node.js 18+ (recommend LTS)
  • npm, pnpm, or yarn
  1. Install dependencies
npm install
  1. Configure environment Create .env.local at the project root:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
  1. Run the development server
npm run dev

Open http://localhost:3000

Development Notes​

  • UI is built with Tailwind and shadcn/ui. To adjust component styles, edit files under components/ui and app/globals.css.
  • Images should use Next.js Image for optimization. Example:
import Image from "next/image";

<Image
  src="/Hero_photo.png"
  alt="Hero"
  width={600}
  height={384}
  className="rounded-md object-cover"
/>;
  • Auth flows are implemented with Supabase (SSR-friendly). Ensure your site URL is configured in Supabase Auth settings for redirects.

Deploy​

  • Vercel is recommended. Set the following Environment Variables on your deployment:
    • NEXT_PUBLIC_SUPABASE_URL
    • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • After deploy, configure Supabase Auth redirect URLs to your production domain.

License​

Internal project. License