PalsPlan

Inspiration

At iEye, we understand the struggle of planning outings with friends. From our own experience, organizing hangouts has always been a challenge. Whether it's deciding on an activity or dealing with indecision that leads to plans falling through, we've been there. Add in the frustration of managing multiple group chats and trying to find a time that works for everyone, and things often get complicated. That’s exactly why we created a website to make planning hangouts easier and stress-free.

What it does

Our website:

Identifies Mutual Availabilities: The top five mutual availabilities is found and ranked from most to least attendees to find the best times for everyone.
Suggests Nearby Activities: The Google Maps API is used to recommend nearby activities, complete with addresses, based on the specified meetup location.
AI-Generated Activity Ideas: The OpenAI API is used to provide activity suggestions if the host lacks ideas of activities.
Activity Voting System: Users are able to like activities such that the most popular suggestions can be identified.
Viewable by Everyone: Upon the creation of a hangout, the host can share a hangout ‘room’ via a link for their friends to view. This ‘room’ contains crucial information about the hangout.

How we built it

Frontend: We used React for building the user interface.
Styling: To maintain a playful and visually appealing design, we employed Tailwind CSS.
Location-Based Features: The Google Maps API was integrated to enable location-based activity suggestions, allowing users to explore relevant options based on the meetup location.
AI-Driven Content: For generating activity ideas, we used OpenAI's API.
Backend: The backend infrastructure was built with Express.
Database: For data management and storage, we used MongoDB.

Challenges we ran into

We faced several challenges throughout development, including managing GitHub complexity, particularly issues related to branch management, and integrating the backend with the frontend. Learning to use the Google Maps API was another major obstacle, alongside the challenge of avoiding scope creep, particularly as we had a short deadline. Additionally, during our planning stage, a lot of time was dedicated to visualising the user flow to ensure efficient collaboration.

Accomplishments that we're proud of

Successfully integrating APIs from Google Maps and OpenAI to build upon the features of our website.
Completing a working demo of our website that solves our target problem, within the timeframe we were given.

What we learned

Front-end frameworks - React, Tailwind CSS, DaisyUI and many more.
GitHub collaboration and branch management/resolving
State management
Effective team collaboration and coordination within a short time constraint
Working with APIs

What's next for PalsPlan

Updating the live counter of likes for each activity in the Dashboard Page
Implementing the ability to edit your name, availability, and activity suggestions
Implementing tagging options to be able to filter through activity suggestions
Using the Google Calendar API to prefill a user’s availability
Using a Google/Apple/Email account such as OAuth for a secure login
Making the website responsive on all screen sizes, particularly on mobile devices

Built With

express.js
figma
google-places
mongodb
node.js
open-ai-api
react
tailwind

Submitted to

UNIHACK 2025

Created by

I worked on designing and implementing the frontend using Figma and React for the following pages: dashboard, activity suggestion and onboarding. It was my first time using Tailwind CSS and I learnt a lot about how to speed up the process of designing and implementing UI.

Danna Pabayo
I worked on the feature that allowed Google Maps to list venues that matched the user's activity description.

Nathan Marasigan
I worked on frontend, helping with overall design on figma, and I used JS React and Tailwind CSS to create a large proportion of the availabilities page. I also made the initial draft of the pitch video's script and lead the overall design direction of the video along with editing it.

Jude Baker
I made the Frontend of LoginPage with the recently learned Tailwind CSS in React. Helping design the UI of PalsPlan. Ideate and conversed meaningful contributions in planning stage.

paulclau
I worked on the backend, using express to interact with the Google Places API, as well as working on the frontend in React to interact and make calls to the backend

Kayden Nguyen
I developed backend CRUD routes and integrated the OpenAI API, ensuring seamless data flow between the backend and frontend. Additionally, I contributed to building frontend components and linking them to the backend.

Hakeem Dimozantos