nextjs-2.md

Next.js Developer Assessment - Weather Dashboard

Create a weather dashboard application that displays weather information for different cities. The app should demonstrate understanding of Next.js fundamentals, data manipulation, and component architecture.

Requirements

1. City Overview Page (/app/page.js)

   • Display a grid of city weather cards
   • Each card should show:
     • City name
     • Current temperature
     • Weather condition (Sunny, Rainy, etc.)
     • Min/Max temperature
     • Last updated timestamp

2. City Detail Page (/app/cities/[cityId]/page.js)

   • Show detailed weather information including:
     • Hourly forecast (next 24 hours)
     • Wind speed and direction
     • Humidity
     • Pressure
     • Visibility
     • Interactive temperature graph

3. Favorites System (/app/components/FavoriteManager.js)

   • Allow users to mark cities as favorites
   • Implement client-side storage using localStorage
   • Create a separate favorites view

4. Unit Converter Component (/app/components/UnitConverter.js)

   • Toggle between Celsius and Fahrenheit
   • Store user preference
   • Update all temperature displays accordingly

Sample Data

// /app/data/weatherData.js
export const weatherData = [
  {
    cityId: "NYC",
    name: "New York",
    current: {
      temp: 22,
      condition: "Partly Cloudy",
      humidity: 65,
      windSpeed: 12,
      pressure: 1015,
      visibility: 10
    },
    hourly: [
      {
        time: "12:00",
        temp: 22,
        condition: "Partly Cloudy"
      },
      {
        time: "13:00",
        temp: 23,
        condition: "Sunny"
      },
      // ... more hourly data
    ],
    forecast: {
      maxTemp: 25,
      minTemp: 18,
      sunrise: "06:30",
      sunset: "20:15"
    }
  },
  {
    cityId: "LON",
    name: "London",
    current: {
      temp: 18,
      condition: "Rainy",
      humidity: 75,
      windSpeed: 15,
      pressure: 1012,
      visibility: 8
    },
    hourly: [
      {
        time: "12:00",
        temp: 18,
        condition: "Rainy"
      },
      {
        time: "13:00",
        temp: 19,
        condition: "Cloudy"
      },
      // ... more hourly data
    ],
    forecast: {
      maxTemp: 20,
      minTemp: 15,
      sunrise: "05:45",
      sunset: "21:00"
    }
  }
]

Technical Requirements

1. Use Next.js 14 with App Router
2. Implement a responsive layout using Tailwind CSS
3. Use client-side state management (React Context or similar)
4. Create custom hooks for data manipulation
5. Implement error boundaries
6. Add loading states and skeletons
7. Use proper TypeScript types (optional but recommended)

Required Components

1. WeatherCard (/app/components/WeatherCard.js)

   • Reusable component for displaying weather information
   • Should handle different weather conditions
   • Include loading state

2. Graph Component (/app/components/TemperatureGraph.js)

   • Display temperature trends
   • Include tooltips for data points
   • Handle different time ranges

3. Layout Component (/app/components/Layout.js)

   • Include header with navigation
   • Implement responsive sidebar for favorites
   • Add footer with unit toggle

Evaluation Criteria

1. Component Architecture

   • Proper component composition
   • State management approach
   • Code reusability

2. Next.js Features

   • Effective use of App Router
   • Dynamic routes implementation
   • Loading and error states

3. Data Handling

   • State updates and propagation
   • Local storage implementation
   • Unit conversion logic

4. UI/UX Implementation

   • Responsive design
   • Interactive elements
   • Loading states and transitions
   • Error handling

5. Code Quality

   • Clean code principles
   • TypeScript usage (if chosen)
   • Comments and documentation