Interactive Calendar Component - Frontend Engineering Challenge

Description

This is a demonstration of my submission for the Frontend Engineering Challenge: An Interactive Calendar Component. In this video, I walk through the core features and design choices made to create a highly polished, functional, and responsive React component inspired by a physical wall calendar aesthetic. Key Features Demonstrated: • Wall Calendar Aesthetic: A custom layout featuring a visual anchor image balanced with a clean date grid. • Day Range Selector: Intuitive click-and-drag functionality to select start and end dates with pristine visual states and highlighting. • Integrated Notes System: A dynamic notepad that updates based on the selected date range. All data securely persists in the browser using local Storage (no backend required). • Fully Responsive Design: Flawless layout adaptation from a segmented desktop view to a seamlessly collapsible mobile touch interface. • Micro-Interactions: Smooth monthly transitions and hover effects powered by framer-motion. Tech Stack: • React (Next.js) • Tailwind CSS 4 • Framer Motion (Animations) • date (Date logic) Links: • Live Demo: https://interactive-calender-neon.vercel.app/ • Source Code: https://github.com/anirudhsrii/Interactive-Calender.git