Dynamic User Availability Scheduler - Copy this React, Tailwind Component to your project

Dynamic User Availability and Event Scheduling System Objective Design and develop a web based application that allows users to dynamically set their availability for specific days or the entire week. The admin should be able to view this availability and schedule sessions accordingly. Sessions can be one on one or involve multiple participants. The focus should be on creating a clean, intuitive, and user friendly interface. Assignment Overview 1. Dynamic User Availability Capture User Availability Input Users should be able to log in and dynamically input their availability for specific days or the entire week. ( Login can be very basic, can use just email to have a record of users) Availability should be captured for flexible intervals ( For example : 30 minutes, hourly, etc.), allowing users to specify start and end times. ( For example : User A is free on Monday from 10 AM to 3PM, and 7PM to 10PM, so he should be able to give this input) Users should be able to add, update, or delete availability slots easily. This should support varying availability on different days (For example : User A is available all day on Tuesday, only a few hours on Monday as above, and not available on Wednesday). { "user": "user@gmail.com", "start": { "$date": "2024 08 30T03:30:00.000Z" }, "end": { "$date": "2024 08 30T07:00:00.000Z" }, "duration": 30, "scheduledSlots": [ ] } Visual Representation Provide a user friendly visual representation of availability where user will be able to choose a range of time (e.g., calendar view or time block grid also can have reference from sites out there like https://cal.com/ , https://calendly.com/ ) It’s open to your visualisation, how you maintain good UI. 2. Admin Scheduling Interface: View User Availability The admin should have a comprehensive dashboard to view all users’ availability. (For example: If admin selects User A, he should be able to view his availability date wise). Schedule Sessions Admins should be able to select the user's availability for a session and choose a time slot based on it. (For example: If admin selects User A, who is available on Monday from 10 AM to 3PM, admin should be able to create a session of specified duration that’s 30 mins for reference. So slots can be : [10AM 10.30AM], [11.15 AM 11.45AM] but it is not possible to create slots like [10.15AM 10.45 AM] ). The system should automatically check for availability conflicts and provide warnings or prevent scheduling if conflicts arise as mentioned in above example. Session Type Selection Admins should be able to specify whether a session is one on one or involves multiple participants. (For example: In attendees array user can specify more than one people) { "user": "user@gmail.com", "start": { "$date": "2024 08 30T03:30:00.000Z" }, "end": { "$date": "2024 08 30T04:00:00.000Z" }, "duration": 30, "scheduledSlots": [ { "start": { "$date": "2024 08 30T03:30:00.000Z" }, "end": { "$date": "2024 08 30T04:00:00.000Z" }, "attendees": [ { "name": "siri", "email": "siri@myparticipants.com", } ] } ] } 3. Session Management Scheduled Sessions Overview Both users and admins should have access to a view that displays all upcoming sessions they are involved in, including details like participants, time, etc. Modification and Notifications [BONUS POINT]: Admins should have options to reschedule or cancel sessions, and affected participants should be notified of any changes. Provide an option for users to set notification preferences (e.g., email, SMS). 4. Creative UI/UX Design: Intuitive Design The user interface should be intuitive, with a focus on ease of use and clarity. Encourage creative solutions to displaying and managing availability and scheduling. Think about innovative ways to display availability and sessions to make it as straightforward as possible for both users and admins. Ensure the application is accessible to all users and responsive across different devices (desktop, tablet, smartphone).