Home Screen, upon successful login.
As college students ourselves, we were very interested in building an application that, with enough development, could serve a greater community of people. At a community like Purdue University, where there are so many students, it's always hard to approach people you may not know. You may need something from a hallmate or someone else in your dorm, but it's awkward to approach them just to ask for something you need - that's where our app comes into play.
What it does
Allows a User to add or delete items from an inventory of what they have, and are willing to loan out. This list is then shared out either publicly, per floor/dorm hall, or shared via private share, in which one has to friend another user using their unique user ID. Friends can see each other's inventories, and request or loan stuff much easier than those who aren't already friends in the app. Users can also see their past "transactions", the status of incomplete or unfinished barters, and use integrated support should an issue occur.
How we built it
We did a lot of research - we figured out how to do both a firebase realtime database, and a cloud firestore. Upon more research, and advice from mentors, we learned that a cloud firestore was the more viable option. Although it was still in "beta" and the documentation for it wasn't as fleshed out as other parts of firebase, we still learned a lot about what it takes to learn from stackOverflow, online videos, and just trial and error. In addition, we were also using pure HTML and CSS at the start of the project, and so decided to use GitHub pages. About 2 hours in, we decided to switch to a dynamic website, so we still hosted it on github pages, but switched over to React.
Challenges we ran into
Some challenges we ran into included creating, reading, and writing from cloud firestore. Cloud FireStore is still new, so a lot of documentation was not out for it. In addition, due to us switching from pure HTML/CSS/JS to React after already working on the project for some time. The project worked in the end, but reading and writing, as well as real time updating on the site's platform was one of the biggest problems we faced - often times, the data didn't show up, or didn't even render in the database. We spent a lot of time trying to figure this out, asking about 6 mentors, until we finally found a solution that worked.
Accomplishments that we're proud of
We're proud of the project as a whole. Even though we started with a bootstrap template, we heavily modified it, including the fonts, spacing, colors to really make it look professional. Kedar, who has experience in graphic arts, designed the layout of the site, and really added to the aesthetic of the site to make it look professional, even though it was only made in 24 hours. We're also really proud of what we came up with in the end. Although it wasn't complete - and we do want to continue to pursue building the project out more - we definitely completed a lot of big steps on this project. Should we have had more time, in a 48, or 72 hour hackathon, I definitely think that we could have pumped out this project in its full, and included more features. But for now, here's a little taste of what's to come. We hope you like it!
What we learned
We learned a lot from this project, including how to manage firestore, how to authenticate with firebase auth ui, as well as how to use React. React was something that we had heard of before, but never used in a practical scenario. We thought that using it here would help us learn how the language works in comparison to HTML, CSS, and JS, which it is based on and uses. We also learned the ins and outs of firebase, really through trial, error, trial, failure, and then more failure. Eventually, we got it to work, and we couldn't be happier on what we learned, and how we could apply it to projects we might do at future hackathons.
What's next for F L A T
Really, the next steps are all in the backend. We have to figure out more about cloud firestore, what it has to offer, and it's pros and cons. We also really want to learn more about React as a language, and where it can go from here. We are aware that branches of the language exist, such as React Native, Angular JS, and others. As freshman, we have a lot to learn. And a lot of the results of learning can be seen right away by participating in events like these, where we can see the direct result of what we put together, as a team.