Friend in Need

Landing page where you can log in with Google Authentication.
Current Requests page where you can view, make, and fulfill student requests. There is an urgency scale and location filter available.
My Requests page shows the status of complete, in progress, and pending requests.
Request an Item popup allows users to specify their requests including item, description, location, and urgency.
The User Profile page shows the number of lended and borrowed items, as well as a ratio of the two metrics.
There is a location filter to find requests close to you.
Maximized view of request card allows users to view more information and fulfill requests.

Inspiration

Everyone could use an extra friend to lend them something in times of need.

What it does

Friend in Need connects students to get them the things they need. For example, if you are in a library and forgot your computer charger, you can just request one through Friend in Need, and a fellow student can help you out!

How we built it

We built Friend in Need with React, Git, Firebase Cloud Firestore, Material UI, Tailwind, CSS, and Figma.

Challenges we ran into

Diverging git branching, overwriting Material UI, database management, and more!

The divergent branches were definitely our most difficult challenge, and we had no idea how to resolve it. We attempted to git pull (with fast forward on). Eventually, we solved it by recloning the repository. (Definitely not an ideal solution!) From this, we learned to always merge main into our branch, then merge our branch into main. And of course, to always git fetch and git pull main.

Accomplishments that we're proud of

Completing the entire process of ideation, design, development, prototyping, and testing to create our MVP. We're especially proud of our clean design, with the help of Figma and Material UI. We also overcame the challenges of learning Async React functions, Firebase Auth, and Git branching!

What we learned

We learned how to work together as a team, the practice of git committing early and often, and how to pivot and overcome problems.

What's next for Friend in Need

Student rideshare connections to allow students to save money and carpool with their peers to go on adventures!

Built With

css
figma
firebase
firebase-cloud-firestore
git
material-ui
react
tailwind

Submitted to

LA Hacks 2022

Created by

I worked on the design and front-end component styling for the project. I am new to React and Figma, so this was a great team-building and learning experience! This was my first hackathon.

Margaret Capetz
I mostly worked on the back end. It was my first time using Firebase, which was surprisingly simple to use once we got past configuring it. I wrote most of the get/post/update requests and facilitate data transfer between pages. I also helped develop the overall workflow and created the animations on the UserProfile page.

CHUN FAI KWAN
I mainly developed on the frontend using React and Figma designs. It was my first hackathon, and I definitely enjoyed and learned a lot from the fast-paced environment.

Celebi Law
I worked on the back-end as well as some front-end! I setup the Firebase Firestore configuration, and OAuth through Google sign-in. It was my first time using OAuth and it was amazing! In regards to front-end I helped style some of the navigation bar.

Amanda Wang
I worked on the front end, turning Figma concepts into Internet reality. It was my first time taking a Figma so seriously, and I now appreciate how much Figma helps with design and graphics.

Kyle Pu