overly_Swap

The playful way to schedule and swap dates

Comment

About the Project

Inspiration

The idea for this project came from the everyday struggle of managing overlapping appointments and scheduling conflicts. I wanted to build a tool that not only finds available dates quickly but also allows users to swap appointments easily, making scheduling a stress-free experience.

What I Learned

Through this project, I learned to:

  • Work with React hooks (useState, useEffect) for dynamic state management.
  • Persist data locally using localStorage, simulating a simple login system.
  • Implement BFS (Breadth-First Search) for finding the nearest available date.
  • Handle user interactions such as confirmations, swaps, and notifications.
  • Write clean, maintainable code with dynamic styling in React.

I also got hands-on experience dealing with edge cases, like handling users cancelling a prompt, swapping appointments without being involved, and keeping localStorage data consistent.

How I Built It

The project was built using React with JavaScript. The main components include:

  1. Date selection form – users pick a date, and the system checks availability.
  2. Appointment management – confirmed appointments are stored in localStorage to persist across sessions.
  3. BFS algorithm – finds the closest free date automatically when the preferred date is taken.
  4. Swap feature – users can swap appointments if they are involved, simulating real-world scheduling flexibility.
  5. Dynamic UI – messages, modals, and lists update in real-time for better user experience.

Challenges Faced

Some of the main challenges I encountered were:

  • Preventing null values from prompt() when users canceled, which required input validation.
  • Managing state updates correctly during swaps, ensuring that messages reflect the current user’s involvement.
  • Designing a friendly UI that is informative, colorful, and intuitive without being cluttered.
  • Implementing BFS efficiently to explore past and future dates in a controlled way, avoiding infinite loops.

Fun Fact

Even though this is a scheduling app, under the hood it’s kind of like graph traversal! Each date is a node, and BFS searches the calendar graph for free slots. Mathematically, you could represent the calendar as a graph ( G = (V, E) ) where ( V ) is the set of dates and ( E ) connects consecutive days. BFS ensures we find the closest available node efficiently.

This project is a playful but practical way to explore algorithms, state management, and user experience all at once!

Built With

Share this project:

Updates