AppName

Project Overview

AppName is a production-ready Next.js 14 starter built with the App Router, TypeScript, Tailwind CSS v3, react-hook-form, zod, and lucide-react.

The app includes these pages:

• Home: a simple marketing landing page.
• About: a short product overview page.
• Problems: a sample problem catalog with reusable badges.
• Login / Sign Up: Supabase email/password (anon key + cookie sessions).
• Dashboard: example route protected by middleware.

Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in .env.local.

Tech Stack

Tool	Purpose
Next.js 14	App Router, server components, routing, and rendering
TypeScript	Strict type safety across the app
Tailwind CSS v3	Utility-first styling only
next/font/google	Loads Poppins for the full app
react-hook-form	Form state management
zod	Shared schema validation
lucide-react	Icon set for password visibility controls

Getting Started

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npm install react-hook-form zod @hookform/resolvers lucide-react
npm run dev

Folder Structure

.  # Project root for app config, package management, and documentation.
├── package.json  # Scripts and dependencies for the Next.js app.
├── next.config.mjs  # Next.js runtime configuration.
├── next-env.d.ts  # Next.js TypeScript declarations.
├── postcss.config.mjs  # PostCSS config for Tailwind.
├── tailwind.config.ts  # Tailwind content paths for src files.
├── tsconfig.json  # Strict TypeScript configuration and path aliases.
├── README.md  # Project documentation and setup guide.
└── src  # Application source code.
    ├── app  # App Router routes, layout, and global styles.
    ├── components  # Reusable UI, auth, and layout components.
    ├── hooks  # useAuth, form hooks.
    ├── lib  # supabaseClient, auth service, validations.
    ├── utils  # supabaseServer (SSR + cookies).
    ├── middleware.ts  # Session refresh + /dashboard guard.
    └── types  # Shared TypeScript interfaces.

Reusable Components Guide

Component	Props	When to use
Button	children, type, variant, fullWidth, disabled, onClick	Primary actions, form submits, and outline actions
Input	id, type, placeholder, error, register props	Text fields and password inputs
FormField	id, label, error, children	Pairing a label, control, and validation message
Badge	label, variant	Showing problem difficulty labels
Card	children, className	Any bordered content block
AuthCard	title, subtitle, children	Wrapping login and sign-up experiences

How to Add a New Page

1. Create src/app/your-page/page.tsx.
2. Add a link in src/components/layout/Navbar.tsx.
3. Use Card, Button, and Badge as needed for consistent styling.

Notes

• All styling stays within Tailwind utility classes, with no custom CSS rules beyond the Tailwind directives in src/app/globals.css.