React Calendar

This project is a calendar application with custom reminders and integrated weather forecast

---

Stack and Tools

• React (v17) – Main UI library.
• useReducer – Local structured state management.
• React Query (@tanstack/react-query@4) – Efficient async data handling (weather).
• Sass (SCSS) – Modular and maintainable styles.
• React Toastify – Non-blocking notifications.
• React Select – Custom city dropdown.
• **AccuWeather *** – Weather data source.

---

Technical Decisions

State Management with useReducer

I decided to use useReducer alongside a separate reducer file (calendarReducer.js) because the calendar’s state involves multiple interdependent pieces (form, modal, reminders per day). This structure:

• Helps scale behavior without duplicating logic.
• Prevents fragmenting state across multiple useState.
• Follows clarity and maintainability best practices.

---

Why React Query?

To fetch and cache the weather forecast for reminders:

• Caches using unique keys (['weather', city, date]) to avoid duplicate requests.
• Improves performance and user experience.
• Keeps logic clean and declarative.

Hook: useReminderWeather.js
Logic: getForecastForDate.js

---

Why react-toastify?

1. Superior UX:
2. Simple API:
3. Lightweight and modern:

---

Getting Started

1. Install dependencies

npm install

2. Environment Setup

Create a .env file in the root of the project and add:

REACT_APP_WEATHER_API_KEY=<api-key>
REACT_APP_WEATHER_USE_MOCKS=false

Environment Variable Details

• REACT_APP_WEATHER_API_KEY:
  Your API key for accessing AccuWeather data.

• REACT_APP_WEATHER_USE_MOCKS:
  Controls how weather data is loaded in the app:

  • true: Loads mocked weather data from local files (useful for development/testing without hitting the API).
  • false: Fetches real weather data using the AccuWeather API.

This allows you to easily switch between real API calls and mock data by just changing the .env value.

---

🖼️ Preview

Basic Calendar

Weather Calendar

---

Available Scripts

Script	Description
npm start	Runs the app in development mode
npm run build	Builds the app for production
npm test	Runs tests once
npm run test:dev	Runs tests in watch mode
npm run eject	Ejects CRA configuration (irreversible)