Skip to content

Latest commit

 

History

History
110 lines (90 loc) · 2.33 KB

README.md

File metadata and controls

110 lines (90 loc) · 2.33 KB

React Your Day

A React application that shows historical weather data, weekday and significant events for any date since 1754. Built with Next.js and designed for static site integration.

Features

  • Date selection from 1754 to present
  • Day of week calculation using Zeller's congruence
  • Historical weather data for locations worldwide including:
    • Temperature
    • Precipitation
    • Cloud cover
    • Wind conditions
  • Wikipedia "On This Day" events organized by century
  • Links to full Wikipedia articles
  • Responsive design for all screen sizes
  • Static site integration ready

Setup Steps

  1. Create Next.js project:
npx create-next-app@latest .

Select the following options:

  • TypeScript: Yes
  • ESLint: Yes
  • Tailwind CSS: Yes
  • src/ directory: Yes
  • App Router: Yes
  • Import alias: Yes (@/ for src/)
  1. Install required dependencies:
npm install lucide-react
  1. Create the following file structure:
src/
  app/
    page.tsx
    layout.tsx
    DateSelector.tsx
    HistoricalDashboard.tsx
    HistoricalWeather.tsx
    WeatherIcon.tsx
    WikipediaOnThisDay.tsx
    utils/
      dates.ts

Development

Review next.config.ts to build for local development

  1. Run the development server:
npm run dev

The app will be available at http://localhost:3000

Building for Static Site Integration

  1. Update next.config.ts:
const nextConfig = {
  output: 'export',
  basePath: '/historical-day',
  images: {
    unoptimized: true,
  },
  assetPrefix: '/historical-day',
};
  1. Build the static output:
npm run build

The static files will be generated in the out directory, ready for integration with a static site generator.

APIs Used

The app integrates with two external APIs:

  1. Wikimedia API for historical events:
https://api.wikimedia.org/feed/v1/wikipedia/en/onthisday/events/{month}/{day}
  1. Open Meteo Archive API for historical weather:
https://archive-api.open-meteo.com/v1/archive

Technologies Used

  • Next.js 14
  • React
  • TypeScript
  • Tailwind CSS
  • Lucide React Icons

Key Components

  • HistoricalDashboard: Main application container
  • DateSelector: Custom date input with validation
  • HistoricalWeather: Weather data visualization
  • WikipediaOnThisDay: Historical events display
  • WeatherIcon: Dynamic weather condition icons