Mobiscroll Replica React
React + Vite + Mobiscroll
Local Development
Prerequisites:
Node.js and npm (or yarn) installed on your system. You can download them from https://nodejs.org/en
Running the application: Clone this repository:
https://github.com/Purakh-Nath/mobiscroll-replica-react.git
Navigate to the project directory:
cd mobiscroll-replica-react-master
Install dependencies:
npm install
Start the development server:
npm run dev
This will start the development server and open default browser at http://localhost:5173/ by default.
Short Answers
3 Things Learned from this Assignment
Complex State Management
Managing complex states and their persistence using localStorage was a valuable experience. It taught me how to maintain state across component reloads and page refreshes.
Drag-and-Drop Functionality:
Implementing drag-and-drop functionality along with resizable and movable events enhanced my understanding of how to manipulate DOM elements dynamically in React.
Calendar Logic
Creating a functional calendar view from scratch improved my understanding of date manipulation and rendering dynamic content based on date calculations.
Most Difficult Part of the Assignment
The most challenging part was ensuring the drag-and-drop functionality worked seamlessly across different dates and times. Implementing the resizable and movable events while maintaining accurate time ranges required careful handling of mouse events and DOM manipulations.
What Would Have Been Done Differently Given More Time
Given more time, I would focus on refining the CSS to make the replica visually closer to the original Mobiscroll design. While the functionality is mostly complete, there are still some minor styling issues that could be improved for a more polished look.
