Interactive Wall Calendar Component | Next.js + React + Tailwind CSS | TUF Frontend Challenge

Description

🗓️ Interactive Wall Calendar — Frontend Engineering Challenge Submission Built for TakeUForward's Frontend Assessment using the latest tech stack. ⚡ Tech Stack: → Next.js 15 (App Router) → React 19 → Tailwind CSS v4 (CSS-first config, zero tailwind.config.ts) → TypeScript (strict mode, zero any) → next/font — Barlow + Barlow Condensed ✅ Features Implemented: → Physical wall calendar aesthetic with diagonal SVG hero cutout → Spiral ring binding at the top → Day range selector — start date, end date, in-between highlighting → Integrated notes section with lined paper texture → Notes persist via localStorage (no backend) → Page-flip CSS 3D animation on month navigation → Indian public holiday markers with tooltips → Keyboard navigation (← → arrows, Escape to clear) → Fully responsive — side-by-side desktop, stacked mobile → Dynamic accent color extracted from hero image via Canvas API 📱 Responsive Design: → Desktop: side-by-side notes + calendar grid layout → Mobile: stacked vertically, touch-friendly tap targets 🔗 Live Demo: [Add Vercel URL] 🔗 GitHub: [Add GitHub URL] #TakeUForward #Frontend #NextJS #React #TailwindCSS #WebDevelopment #FrontendChallenge