Frontend Application

Resume Web

Modern Next.js 16 frontend with React 19, TypeScript, and Tailwind CSS 4. Full dark mode support.

Application Features

📊

Dashboard

Career data overview with readiness metrics

📄

Resume Upload

PDF/DOCX parsing with live preview

👤

Profile Management

Account settings and preferences

🤖

AI Assistant

Chat interface for career queries

🌙

Dark Mode

Full theme support via Tailwind

📱

Responsive

Mobile-first design patterns

Tech Stack

Core

  • NNext.js 16.1.1 (App Router)
  • RReact 19.2.3
  • TSTypeScript 5.9.3
  • TWTailwind CSS 4

Features

  • Server & Client Components
  • Protected Routes with Middleware
  • JWT Token Authentication
  • ESLint 9 Code Quality

Route Structure

# App Router Structure

app/

(auth)/

login/page.tsx # User login

register/page.tsx # Registration

(site)/

page.tsx # Landing page

about/page.tsx # About

contact/page.tsx # Contact

(workspace)/

dashboard/page.tsx # Main dashboard

resume/page.tsx # Resume management

profile/page.tsx # User profile

integration/page.tsx

finetune/page.tsx

Key Components & Patterns

Layout Components

AppHeaderClient

Sticky header with blur backdrop, dark mode, and dynamic section labels

SiteHeaderServer

Public navigation for marketing pages with responsive menu

AuthHeaderServer

Minimal header for login/register flows

BasicFooterServer

Site-wide footer with links and copyright

UI Components

NavLinkClient

Active-aware navigation link with underline animation

PasswordRequirementClient

Real-time password strength validation with visual feedback

ProfileClientClient

Client-side profile form with optimistic updates

Utilities & Patterns

apiFetch

Server-side fetch wrapper with automatic JWT injection from cookies

lib/api.ts

sectionLabel

Dynamic header labels based on current route pathname

lib/sectionLabel.ts

middleware

Route protection with token validation and redirect handling

middleware.ts

Architecture Patterns

Route Groups

(auth), (site), (workspace) for layout isolation

Server Actions

Form handling without API routes

Streaming

Suspense boundaries for progressive loading

Colocation

Page-specific components alongside routes