Recurring_date_picker
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, install all dependencies:
npm install
Then, Run the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Reusable Date Picker Component for Recurring Dates This repository contains a reusable Date Picker component built in React (with Next.js), designed to allow users to select recurring dates, similar to the feature found in the TickTick app.
Features Recurring Options: Users can select recurring dates with customizable patterns:
Daily Weekly Monthly Yearly
Customization: Fine-tune recurrence options such as:
Every X days/weeks/months/years Select specific days of the week Choose the nth day of the month (e.g., the second Tuesday) Date Range: Users can set a start date and optionally an end date for the recurring pattern.
Visual Preview: A mini-calendar displays the selected recurring dates within the date picker for an intuitive user experience.
Technical Stack Framework: Next.js Styling: Tailwind CSS (or your choice of CSS framework) State Management: Zustand Development Environment: Cloud-based IDEs such as CodeSandbox Code Structure The component is modular and cleanly structured for reusability and maintainability.
Key features include:
The component is broken down into smaller, reusable parts (recurrence options, date picker, preview, etc.). Clean and well-documented code: Each part of the code is written with clarity, maintainability, and documentation in mind.
Testing Unit Tests: Individual logic for each component is tested using unit tests. Integration Test: A comprehensive integration test ensures the component functions as expected.
Screencast A short screencast (5-10 minutes) is included to demonstrate:
The functionality of the date picker component A walkthrough of the code structure and design decisions Note: My face is visible in the screencast, as required.
