Skip to content

Latest commit

 

History

History
104 lines (74 loc) · 3.09 KB

README.md

File metadata and controls

104 lines (74 loc) · 3.09 KB

User Directory - Next.js TypeScript & Tailwind

A modern replication of the React user directory app, rebuilt with Next.js, TypeScript, and Tailwind CSS.

Features

  • 📱 Responsive user card grid layout
  • 🎨 Styled with Tailwind CSS
  • 📄 Pagination controls (previous/next)
  • 🔢 Adjustable page size (1-6 users)
  • 💪 Type-safe with TypeScript
  • ⚡ Built with Next.js 15 App Router

Getting Started

First, install the dependencies:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

API Configuration

The app now uses an internal API and shared server-side data layer:

  • GET /api/users?page={page}&pageSize={pageSize} for paginated users
  • GET /api/avatars/{id}?name={fullName} for generated avatar SVGs

Core implementation files:

  • lib/users.ts shared data service used by SSR and API routes
  • app/api/users/route.ts internal users endpoint
  • app/api/avatars/[id]/route.ts internal avatar image endpoint
  • app/page.tsx server-rendered page using getUsersPage(...) directly

CORS for external sandbox apps

middleware.ts applies CORS headers to all /api/* routes based on an origin allowlist.

Set allowed origins in your environment:

# .env.local
CORS_ALLOWED_ORIGINS=http://localhost:3001,https://my-sandbox.example.com

Notes:

  • Include only exact origins (scheme + host + port).
  • Keep your internal app origin out of this list unless you need browser cross-origin calls.
  • Restart the dev server after changing .env.local.

Image strategy options for future iterations:

  1. Keep generated SVG avatars (current): no external dependency, deterministic, very fast.
  2. Store static image assets in public/avatars/ and return those URLs from lib/users.ts.
  3. Proxy an external image provider through your API route if you need photoreal profile images.

Project Structure

new-interview-lafe/
├── app/
│   ├── layout.tsx      # Root layout
│   ├── page.tsx        # Main page (user listing)
│   └── globals.css     # Global styles
├── components/
│   ├── Card.tsx        # User card component
│   └── Details.tsx     # Design specs component
├── hooks/
│   └── useWindowDimensions.ts  # Window size hook
└── types/
    └── user.ts         # TypeScript interfaces

Key Differences from Original

  • Next.js App Router: Uses the modern App Router instead of Create React App
  • TypeScript: Fully typed for better development experience
  • Tailwind CSS: Utility-first CSS instead of separate CSS files
  • Client Components: Uses "use client" directive for interactive components

Design Specs

  • Card Dimensions: 380px × 479px
  • Card Shadow Color: rgba(0, 0, 0, 0.1)
  • Card Shadow Hover: rgba(0, 0, 0, 0.26)
  • Profile Picture: 180px diameter
  • Buttons/Select: 180px × 60px
  • Button Disabled Color: #aaaaaa

Learn More