NatureRestorer

NatureRestorer is a portfolio-ready Next.js dashboard for exploring restoration sites, biodiversity performance, and map-based location context.

It now includes authentication, role-based access control, a Supabase-backed PostgreSQL database via Prisma, and admin tooling for managing sites and metrics.

Assignment Brief (Task)

This project was built to satisfy a demanding Next.js take-home assignment with emphasis on full-stack architecture, state management, navigation UX, persistence and production readiness.

• Live demo: https://nature-restorer.vercel.app/dashboard

What The App Does

• Browse all sites from /dashboard.
• Open detailed site pages at /dashboard/[id].
• View biodiversity metrics and map context per site.
• Log in at /login.
• Access admin controls at /dashboard/admin (admin role only).
• Use sidebar profile dropdown actions (Settings, Logout).

Roles And Access (RBAC)

• viewer
  • Can read sites and metrics.
• admin
  • Can create, update, and delete sites and metrics.
  • Can access /dashboard/admin.

Protected API routes enforce this behavior server-side.

Tech Stack

• Next.js 16 (App Router)
• React 19
• TypeScript 5
• TailwindCSS 4
• shadcn/ui primitives (including Tooltip and Dropdown Menu)
• Radix UI (@radix-ui/react-tooltip, @radix-ui/react-dropdown-menu)
• Prisma 7 + @prisma/adapter-pg
• Supabase PostgreSQL
• Mapbox GL (react-map-gl)
• Bun (package manager + scripts)

Branding And UI Notes

• Reusable BrandLogo component in src/shared/ui/brand-logo.tsx.
• New leaf logo asset (leaf-logo.svg) replaces the previous logo.
• Custom Montserrat Alternates font integration.
• Login page includes demo-credentials tooltip and footer attribution.

Project Structure (FSD)

• src/app: App Router routes, layouts, API handlers
• src/pages-layer: Route-level page composition
• src/widgets: Composite UI blocks (sidebar, map, grids)
• src/features: Interaction logic
• src/entities: Domain models/services (sites, metrics)
• src/shared: Shared UI, utilities, assets
• prisma: Prisma schema/config/seed

FSD Explained In Plain Words

Feature-Sliced Design (FSD) is just a way to keep files organized by responsibility, so the app stays easy to grow.

Think of it like building a house:

• shared = common tools/materials used everywhere (buttons, helpers, logo, auth utils)
• entities = core business objects (in this app: Site, SiteMetrics, and their data services)
• features = user actions and behavior (for example selection state)
• widgets = bigger UI blocks made from entities/features (sidebar, map, site grid)
• pages-layer = how a full page is assembled from widgets/features/entities
• app = Next.js routing, layouts, and API endpoints (the entry points)

How It Works In This App (Step By Step)

1. User opens /dashboard.
2. app route/layout checks session and role.
3. Page calls entities services to fetch sites/metrics.
4. entities services call protected app/api routes.
5. API routes use shared auth guards (requireAuth, requireAdmin).
6. API routes read/write data through Prisma (shared/lib/prisma.ts) into Supabase Postgres.
7. Data returns to page components.
8. widgets render the UI (sidebar, cards, map) and features handle interactions.

This separation helps because:

• UI changes usually stay in widgets/pages-layer.
• Business/data changes usually stay in entities + app/api.
• Shared code stays reusable in shared.
• Auth/RBAC stays centralized and consistent.

API Surface

Auth:

• POST /api/auth/login
• POST /api/auth/logout

Sites:

• GET /api/sites (authenticated)
• POST /api/sites (admin)
• GET /api/sites/:id (authenticated)
• PUT /api/sites/:id (admin)
• DELETE /api/sites/:id (admin)
• GET /api/sites/:id/metrics (authenticated)
• PUT /api/sites/:id/metrics (admin)

Database

Prisma schema defines:

• User (email, username, passwordHash, role)
• Site
• SiteMetrics

RBAC roles are stored as Prisma enum UserRole (ADMIN, VIEWER).

Environment Variables

Use .env.local (or .env.development) with:

NEXT_PUBLIC_SITE_URL="http://localhost:3000"
NEXT_PUBLIC_MAPBOX_TOKEN="your_mapbox_token"

# Runtime DB connection (used by app server / Prisma adapter)
DATABASE_URL="postgresql://..."

# Optional direct DB URL for Prisma CLI operations (db push, migrations)
DIRECT_URL="postgresql://..."

# Seed credentials override (optional)
SEED_ADMIN_PASSWORD="Admin123!"
SEED_VIEWER_PASSWORD="Viewer123!"

# Session signing secret
AUTH_SECRET="your_random_secret"

Local Setup

bun install
bun run prisma:generate
bun run prisma:push
bun run prisma:seed
bun dev

Open: http://localhost:3000

Demo Login Credentials

If seeded with defaults:

• username: admin

• password: Admin123!

• username: viewer

• password: Viewer123!

Scripts

• bun dev
• bun build
• bun start
• bun lint
• bun run prisma:generate
• bun run prisma:push
• bun run prisma:seed
• bun run prisma:studio