QuizForge — Frontend

Company-based quiz management system built with Next.js 16, TypeScript, and Tailwind CSS v4.

🛠️ Tech Stack

• Framework: Next.js 16.1.6 (App Router, Server Components, Turbopack)
• Language: TypeScript 5 (strict mode)
• Styling: Tailwind CSS v4 + shadcn/ui (radix-nova)
• State: Redux Toolkit (minimal) + Zustand (UI state)
• Auth: Auth.js v5 (Credentials + Auth0/Google)
• Backend: NestJS REST API

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/YakovchukIvan/fullstack-internship-frontend.git
   cd fullstack-internship-frontend

2. Install dependencies:

   npm install

3. Set up environment variables:

   cp .env.sample .env

4. Fill in .env values. Generate AUTH_SECRET:

   openssl rand -base64 32

5. Start development server:

   npm run dev

6. Open http://localhost:3000

📜 Available Scripts

Script	Description
npm run dev	Development server (Turbopack)
npm run build	Production build
npm run start	Production server
npm run lint	Run ESLint
npm run lint:fix	Fix ESLint errors
npm run format	Format with Prettier
npm run format:check	Check formatting

🔐 Environment Variables

Variable	Description
NEXT_PUBLIC_APP_URL	Frontend URL
BACKEND_URL	NestJS backend URL (server-side only, never exposed to browser)
AUTH_SECRET	Auth.js secret key
NEXT_PUBLIC_WS_URL	Socket.io URL for real-time notifications

See .env.sample for all required variables.

🐳 Docker

Docker is used for local development and production-like testing. For production deployment, you can use any hosting platform that supports Node.js (e.g., Vercel, AWS, Railway, Render).

Prerequisites

• Docker Desktop installed and running

Run with Docker Compose

1. Set up environment variables (if not done already):

   cp .env.sample .env

2. Build and start the container:

   docker compose up --build

3. Open http://localhost:3000

4. Stop the container:

   docker compose down

Build image manually

docker build -t quizforge-frontend .

Services

Service	Port	Description
web	3000	Next.js application