🎂 BdayTracker Frontend

A birthday calendar web app for internal company use.
Built with Vite + React + Tailwind. Connects to a Spring Boot backend to display today’s and upcoming birthdays.

🛠️ Project Stack

This project uses:

• Vite with React + TypeScript (vite@6.3.5)
• Tailwind CSS via @tailwindcss/vite plugin
• Prettier with prettier-plugin-tailwindcss
• ESLint for linting
• Husky + lint-staged for pre-commit formatting and lint checks
• cn() utility (combining clsx + tailwind-merge) for clean, conditional, and conflict-free Tailwind CSS class management

📄 Full developer setup:
👉 docs/dev-setup.md

---

✅ Setup Instructions

1. Clone and install

git clone https://github.com/edpau/bdaytracker-frontend.git
cd bdaytracker-frontend
npm install

---

2. Dev scripts

npm run dev       # Start dev server
npm run build     # Type-check + build
npm run preview   # Preview production build
npm run lint      # Manually run ESLint

---

⚙️ Environment Variables

Create a .env file in the project root. Here's the recommended setup:

# Base API URL for local backend
VITE_API_BASE_URL=http://localhost:8080/api

# Toggle between using mock data or backend
VITE_USE_MOCK=true

📄 See .env.example for a template you can copy.

🔁 Don’t forget:

If you change .env, restart the dev server (npm run dev) for changes to take effect.

---

📒 Developer Notes

Personal learning logs documenting key decisions, setup patterns, and dev research.

• 01 – Frontend Setup & Fetching
• 02 – useEffect, async/await, and Error Handling
• 03 – Using React.Fragment & Import Rules
• 04 – UTC vs Local Dates in JavaScript
• 05 – Birthday Tracker MVP Plan
• 06 - Tailwind CSS v4 Notes – CSS-First Configuration, Breakpoints, Themes & Resources
• 07 - Tailwind CSS v4 – Multi-Theme Color System (No tailwind.config.js Required)
• 08 - cn() Utility (Combining clsx + tailwind-merge)
• 09 - Tailwind Layout Setup: Container + Responsive Design
• Coming soon: Testing log, backend integration notes

---

🚦Next Steps (WIP)

• Add environment variable support via .env
• Add font and theme token support for light/dark mode
• Add CI check with ESLint + Prettier
• Connect to backend API (Spring Boot)

---

After MVP

• [ ]Add Zod later to validate backend data shape — helps catch unexpected API changes, ensures type safety, and avoids runtime bugs in production.