A picture of the home page and the 2 screens the user can navigate to.
A picture of all the nearby places to the user, found based on the user's location.
A picture of the information for a specific place, from the list of places.
A picture of nearby paths. The user can choose to go on the path and earn points.
When we first saw the theme, we were confused. Just the word distance? It was so general! But after discussing possible applications of the word distance, including social distance, emotional distance, and communication distance, we ultimately settled on creating a project that would help mitigate a combination of these distances.
One thing led to another and we ended up with CityScape, an app to help users explore the world around them. Throughout the entire last year, we've all been stuck inside, social distancing due to the pandemic. Our app addresses this in a fun and engaging way, by allowing users to create mini "games" to explore their cities.
Being students who will be going to college next year (some far from home), we recognized the difficulties we might face moving into a completely new town and trying to learn about it and explore it. We realized that this app will help the millions of individuals who move to new surroundings, whether its for sightseeing or for other reasons to stay there.
What it does
Upon entering the app, the user can choose to explore nearby Places or Paths, both of which are user-submitted.
Nearby Places are common attractions within one's city. For example, in New York City there might be a submission for the Empire State Building, or One World Trade Center. If the user chooses to visit one of these places, the app keeps track of their location as they travel and their overall distance from the starting location, allotting them a certain amount of points once they reach that location.
Nearby Paths represent specific routes created by other users presented in a game-like format. Unlike places, paths consist of multiple ordered places connected by hints. From the starting location, the user has to use hints to figure out the location of the next place. Upon doing so, the user receives a certain number of points and an even larger number of points upon finishing the path. Like places, the amount of points varies depending on the distance traveled to reach it.
How we built it
For the sake of easier accessibility by the general population, we decided to make a mobile app. On the frontend, we chose Flutter because of the ease with which we could declare UI components and fetch API data from the backend.
On the backend, we used Express.JS with MongoDB as the database. Express.JS allowed us to easily create new API endpoints for each of the resources we needed. MongoDB allowed us to easily structure our data via the Mongoose ORM, which we used to define our schemas and fetch information.
Challenges we ran into
- Coming up with a solid good looking UI. Since none of us had very strong experience with design, we struggled to find something that looked good and would match the look we were going for.
- Properly connecting the frontend and the backend. We struggled to secure the backend connection with the front end, having to deal with HTTP issues, CORS issues, and issues with matching JSON schemas on the frontend and backend.
- Structuring our data. All of our members had very little to no experience with using a non-relational database. Figuring out the best way to structure and link our data was difficult. We ultimately were able to somewhat understand best practices after searching through numerous Stack Overflow answers.
Accomplishments that we're proud of
On the backend, our biggest accomplishment was finally being able to figure out a good working NoSQL structure for the backend. Considering we had no practical experience using Mongoose in a real project, it was very satisfying to see our REST API work exactly as intended.
What we learned
We found that given Mongoose's flexibility in defining schemas, it might a good fit for future projects as well. Normally we would never consider anything non-relational but considering how easy and enjoyable it was to use, it would make a world of difference.
Similarly, we learned that the wealth of packages in the npm ecosystem for express apps makes it a great choice for quick REST APIs. Especially considered that hot reload is easy to do with the nodemon package, development was quick and easy.
What's next for CityScape
In terms of the frontend, we still need to implement a significant chunk of the functionality already implemented in the backend.
We have plans to add new features including:
- A leaderboard system to keep track of who has the most points/shortest distances.
- A competitive mode where users can compete with their friends in mini "races" to see who finishes a path first.
- Features for colleges, who can create paths to explore their campuses. This could be a useful feature for college tours.