-
-
Founding Friends is designed by MCIT online students for UPenn students
-
Team Name - 404 Name Not Found
-
MCITO Online Student Locations
-
How do you connect with other online MCIT students?
-
Team Members: Kyle Li, Kevin Nguyen, & Bonnie Tse
-
Home Page
-
About Page
-
-
Profile Page
-
Edit Profile Page - First name, last name, and profile photo are preloaded from your upenn email
-
Event Home Page
-
Event Home Page - Filter Options for Virtual, In-person, by location, upcoming, your attended past event, calendar date
-
Create a New Event Page
-
Event Page for Sleepathon which the team will be participating in after submitting Zzzzzzz...
-
Fall Fest event page and demo of dropdown menu for My Profile, About, and Sign Out
-
Event Discussion Board
-
Libraries, Frameworks, Languages used
-
Let's grab a byte! See you soon!
Inspiration
MCIT online students live in 39 countries. In the United States, students are dispersed across 47 states. It can be an isolating experience. In such a disconnected world, it can be hard to connect with other students. Right now, there are location-specific slack channels for different regions of the world where students connect virtually and attempt to coordinate in-person meet-ups in an inefficient way.
What is Founding Friends?
Founding Friends was designed by MCIT online students for UPenn students. The website provides an intuitive portal for students to create events and sign up for in-person and virtual events. The website uses the UPenn email to log in so that only UPenn students can sign up for events. Each event page allows students to efficiently share Zoom meeting links for virtual meetings and photos from the event. Once logged in, students can filter for events in their area or on certain dates. Students can create a profile to share a brief bio, their interests, and which classes they have completed.
How We Built It
We used Next.js and React.js for our framework. We used Tailwind CSS and the Chakra UI library to style our frontend. We primarily used Typescript throughout our project.
On the back-end side, we connected our website to MongoDB and AWS Cloud Services. We stored user profile details and event information in separate MongoDB collections and stored user uploaded images in an S3 bucket on the AWS Cloud. We used libraries such as react-dropzone to enable a user-intuitive drag-and-drop functionality for the photo upload and Luxon for date/timezone calculations. We leveraged Next-Auth for the login authentication to ensure only students with UPenn SEAS Gmail accounts are able to log in.
We used PhpStorm and VS Code as our IDEs. We used Git, Notion, and Slack to coordinate and work together on this project
Challenges We Faced
During the hackathon, we overcame many challenges for both the front-end and back-end. We decided to try new programming languages, frameworks, and packages. Most of our time was spent researching available packages and frameworks as well as reading documentation and watching YouTube videos. Of course, we also spent hours debugging when the code did not perform as expected.
One major challenge we faced was regarding the issue of time zones. As we planned our website to cater to UPenn students from all around the world, we knew it was a necessity to display time zone accurate dates and times so that our users will never be inconvenienced. Our primary issue was figuring out the best way to store our event dates in the face of the plethora of different time zones our users could be in. Ultimately, we used the Luxon library to set every event's time zone to UTC; once the user begins fetching the event data, the datetime in the data will be converted to the user's local time zone.
Accomplishments that We're Proud Of
Using new programming languages, frameworks, and packages we have never used before, we built a custom website from scratch.
What's next for Founding Friends
More Responsive UI - Making our website more accessible and mobile friendly
Slack and Discord Bots - Integrate with Slack API for users to create and join events without needing to sign-in
Gen-AI Personalized Recommendations - Based on user interests, suggest nearby events for user to attend
Reminder Notifications - Notify users about upcoming events, deadlines for RSVP, or changes in event details
Rating & Feedback - Allow attendees to rate events and provide feedback to help hosts improve
Analytics Dashboard - For event organizers to gain insights into attendance patterns, feedback, and other metrics
Chat Groups - Create communities for students to meet around common interests
Digital Wallet - Integrate payment options for events that have costs or split bills during gatherings
Carpool - Coordinate carpool rides or ride-share service to in-person events
Badge & Achievements - Gamify the experience by offering badges for attending a certain number of events, hosting events, or other milestones
Built With
- amazon-web-services
- axios
- css
- html
- javascript
- luxon
- mongodb
- mongoose
- next-auth
- next.js
- react
- tailwind
- typescript




Log in or sign up for Devpost to join the conversation.