PlanSync

Inspiration

We were inspired by our lousy experiences in making plans with friends. We all agreed that texting in long chains in a group chat, just for half of the details to be forgotten about, is no way to make plans, especially with friends who all have differing and busy schedules. This chaotic process drove us to build an app that eliminates the hassle of scheduling plans with different groups of people.

What it does

PlanSync allows users to create plans with different friend groups and displays the shared time availability each group has. It works like Life360, but instead of locations it tracks availability. When plans are created and updated, it sends notifications to each member to keep everyone updated. This keeps any logistics in plan making out of the group chat.

How we built it

We first took our idea created interactive Figma mockups that simulated the flow of the app we had in mind. We then translated this into a real application by using React.js. We created components that correlated with each screen that used React state to allow the app flow to work like our Figma design.

Challenges we ran into

When debugging our code, we found that one of our two ways of creating a plan was not working the way we wanted it to. The button for finalizing a created plan was not functioning at all. However, we fixed this when we realized that although we had two separate components for each way to make a plan, we only properly incorporated the button function for one of the components. This challenged allowed up to better understand how to manage component states.

Accomplishments that we're proud of

We are very proud to have successfully created multiple versions of the same prototype. We were able to create an interactive Figma mockup, and translate this into a functional React application that showcases the idea we had envisioned.

What we learned

We learned how to initialize a React.js project using Node.js, manage state and pass props between React components, design interactive flows in Figma, and use VS Code LiveShare to code collaboratively.

What's next for PlanSync

We want to implement many more features into PlanSync which account for other logistics that may be involved in planning. Features such as calendar integration (syncing with Google or Apple calendars so users don't have to manually input available times), an AI chatbot that can create full plans out of short prompts, and polls that allow for users to vote on certain aspects of each created plan.

Built With

• figma
• node.js
• react.js