Developer Playground

Installation

Clone the repository and install dependencies:

git clone 
cd developer-playground
yarn install

Development

Start the development server:

yarn dev

Open [http://localhost:3000](http://localhost:3000) to see the app.

Storybook

Launch Storybook for component exploration:

yarn storybook

Storybook will open at [http://localhost:6006](http://localhost:6006).

Available Components

The component library includes 7 reusable, customizable components:

#

Button

A versatile button with multiple variants, sizes, and states.

import { Button } from "@/components/ui";

  Click Me

Props:

• variant: "primary" | "secondary" | "outline" | "ghost" | "danger"
• size: "sm" | "md" | "lg"
• loading: boolean
• leftIcon / rightIcon: ReactNode
• fullWidth: boolean

  #

  Card

A container component with glass morphism styling.

import { Card } from "@/components/ui";
} footer={}>
  Content here

#

Modal

An accessible dialog component with portal rendering.

import { Modal } from "@/components/ui";

  Modal content

#

Input

A form input with labels, validation, and icons.

import { Input } from "@/components/ui";
} />

#

Dropdown

A select component with custom styling.

import { Dropdown } from "@/components/ui";

#

Badge

Status indicators and labels.

import { Badge } from "@/components/ui";
Active

#

Toggle

A switch component for boolean values.

import { Toggle } from "@/components/ui";

Available Endpoints

#

GET /api/users

Fetch user data with optional filtering.

Query Parameters:

• role: Filter by user role
• limit: Limit number of results

  Response:

{
  "success": true,
  "data": [...users],
  "meta": { "total": 5, "timestamp": "..." }
}

#

POST /api/users

Create a new user.

Body:

{
  "name": "John Doe",
  "email": "john@example.com",
  "role": "Developer"
}

#

GET /api/posts

Fetch blog posts with optional filtering.

Query Parameters:

• category: Filter by category
• author: Filter by author name
• limit: Limit number of results

  #

  POST /api/posts

  Create a new post.

  Body:

{
  "title": "Post Title",
  "excerpt": "Post excerpt...",
  "author": "Author Name",
  "category": "Tutorial"
}

Server-Side Rendering (SSR)

The SSR page fetches fresh data on every request using cache: "no-store".

async function fetchData() {
  const res = await fetch(url, { cache: "no-store" });
  return res.json();
}

Static Site Generation (SSG)

SSG pages are pre-rendered at build time. Default behavior in Next.js 14.

// No special configuration needed
// Page is static by default
export default function StaticPage() {
  return ;
}

Incremental Static Regeneration (ISR)

ISR pages regenerate after a specified time period.

// Revalidate every 2 minutes (120 seconds)
export const revalidate = 120;
export default async function ISRPage() {
  const data = await fetchData();
  return ;
}

Client-Side Rendering (CSR)

CSR pages fetch data in the browser after the page loads.

"use client";
import { useState, useEffect } from "react";
export default function CSRPage() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);
  if (loading) return 
Loading...
;
  return ;
}

Authentication Middleware

The middleware protects routes under /demos/protected.

How it works: 1. Checks for token query parameter 2. Checks for auth-token cookie 3. Redirects to login if neither exists

Valid token: demo-secret-token

Example access:

/demos/protected?token=demo-secret-token

API Middleware

All API routes get custom headers:

• x-api-version: API version
• x-request-id: Unique request identifier

Deploy to Vercel

The easiest way to deploy is using Vercel:

1. Push your code to GitHub 2. Import the repository in Vercel 3. Configure environment variables 4. Deploy!

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:3000
API_SECRET_KEY=your-secret-key

For production, set these in your Vercel project settings.

Build Commands

# Build for production
yarn build
# Start production server
yarn start
# Build Storybook
yarn build-storybook