Unispaces

Inspiration

Our inspiration lies in wanting college students to better connect with their campus. We wanted an application designed for crowdsourced data, giving students a voice to share what they see on campus with other students. We wanted a web app that is interactive and ever-changing rather than a static design with hardcoded data. Through this desire, UniSpaces was born.

What it does

UniSpaces allows users to do three things. First, users can share their information about specific places based on certain questions. These questions could be but are not limited to “How crowded is this space?”, “Are people wearing a mask?”, “Is the space noisy?” and “Is the parking lot full?”. Users can answer these questions to either validate or change the answers of other users. Second, UniSpaces gathers the crowdsourced responses and provides visualizations for users to view trends. This functionality gives users the power to see how historically one space has been during specific day periods, allowing for better decision-making when selecting a space. Third, UniSpaces enables users to get information on an area they inquire about. So when a student is looking for a particular space to study, they can pull up the latest news reported about the space.

How we built it

Unispaces is a web app built on the MERN (Mongo DB, Express.js, React, Node.js) stack. To create our front end, we leveraged React and CSS to visually design the app. We used Express.js as an API to connect the front end to the database. MongoDB was used to store all user data.

Challenges we ran into

While designing UniSpaces, figuring out the schema of our MongoDB was the hardest task. We learned quickly that the front end could only work if the backend was intentionally formed. We spent hours discussing and deliberating on how the data should move from frontend to backend at the whiteboard. Using a nonrelational database challenged our thinking simply because we all have experience in relational databases. Also, using javascript can be quite challenging due to asynchronous functions and promises.

Accomplishments that we're proud of

We are proud of our teamwork. We worked well together by brainstorming ideas, designing the data flow, and splitting up responsibilities. This is our best project so far and the first application where the back-end is fully implemented with the front-end. Also, we created the art during the hackathon which really brings our Homepage to life.

What we learned

We learned how to make a full-stack website, something we have not done before. At previous Hackathons, our team has focused more on building the front-end than the back-end. While developing this project, we learned how to set up and use a MongoDB Database and use express.js on the backend. We also learned how to deploy our API and website on Heroku.

What's next for UniSpaces

We plan on expanding UniSpaces to React Native and making it a mobile app. Our idea of having users checking and updating the status of locations they visit fits well with an application you can quickly pull up on your phone. This is in addition to expanding the colleges, buildings, and prompts available on the Web App.

Built With

• express.js
• heroku
• javascript
• mongodb
• node.js
• postman
• react
• react-router
• vscode