Ahsan Ali :(https://github.com/greyali)
Alexander Tu :(https://github.com/atu816)
Azal Adeel :(https://github.com/azaladeel)
Steven Geist :(https://github.com/geistnine)
[For API calls:] (http://www.boredapi.com/api/activity/)
[API Docs:] (https://www.boredapi.com/documentation)
A not so long time ago, in a galaxy very very close, a group of friends were bored out of their minds. They were looking for something to do, but they couldn't think of anything that interested them. They wished that they could find a magical genie's lamp to grant them the wish of knowing what to do. But alas, they were not so lucky. They decided to make their own genie's lamp, and that's how this project was born.
More seriously, this project was born out of a desire to learn more about React, CSS, Express, API calls, and MongoDB while also creating something that could be useful to others. This project has been quite useful in furthering our understanding of these technologies and how they tie together to create a full stack application. In the process, we've also managed to create a product that we think is quite useful.
The Placeholder web application is a tool that allows users to generate activities based on the number of people that would like to participate in the activity. Presently, the application offers account creation and login, activity generation, and team creation functionalities. Users are saved into a database and can create teams containing a certain number of members that are also saved to that user's profile. The application allows users to generate activities for these teams and these activities are saved to those specific teams.
As indicated in Motivations, this project was created using a MERN stack.
-
React was used to create the front end of the application. We felt this would be an effective way to create an efficient single page application that would provide a good user experience through its ease of use and responsiveness. It allows for the creation of reusable components that were used to create a dynamic and interactive user interface.
-
CSS was used to style the application and provide a more visually appealing user experience. CSS was used to style component groups as well as individual components to provide a cohesive look and feel to the application whilst still allowing users to quickly identify and interact with the various components.
-
Express was used to create the back end of the application due to its ease of use, flexibility, and efficiency. It allowed us to create a RESTful API that was used to interact with the front end, database, and external APIs to provide the user with a seamless experience.
-
MongoDB was used as the database for the application. It was chosen over SQL databases due to its flexibility and ease of use while creating one of our first full-stack applications. The database was used to store user information, team information, and activity information in a sensical manner allowing for easy visualization, retrieval, and manipulation of the data.
-
Mongoose was utilized to create clear and concise schemas that were used to model the data being stored in the database. This technology allowed for great database flexibility in the creation of a project that was constantly evolving and changing its needs.
As one of the first full-stack applications created by this small set of developers, there were a number of challenges faced in the creation of this web application.
-
Application design was a challenge that was faced from the very beginning of the project. The team had to decide on the functionality that would be included in the application and how it would be implemented. This was a challenge because the team had to decide on the scope of the project and what would be included in the MVP. With a limited amount of time, the team constantly had to reconvene to reevaluate progress and refine the scope of the project to ensure that the MVP was being met.
-
State management with vanilla React was a challenge that we faced early on in the development of this application that we were able to overcome via the use of the Context API in tandem with React hooks. This allowed us to more easily pass along state to components that required it while still maintaining a clean and efficient code base that carried a great deal of flexibility.
-
Database design, particularly whether to use a SQL or NoSQL database, was a challenge that we faced early on in the development of this application. Weighing the pros and cons of each database type against the potential needs of the application was a difficult endeavor that required extensive discussion and research, particularly since this was the first time that the team needed to design and build a project from the ground up. Ultimately, a NoSQL database was chosen due to its flexibility and ease of use.
-
Front-End-to-Back-End-Integration was a challenge that took significant time to overcome. The team had to learn how to properly integrate the front and back ends of the application to provide a seamless user experience that was free of bugs. This was a challenge because the team had to learn how to properly use the Express framework to create a RESTful API that would interact properly with the front end and database to provide the expected results.
-
User profile - The team would have liked to have created a more in-depth user profile page that would allow users to visualize more information about their account.
-
Activity filtering - Filtering activities based on their type and price were features that were deemed to be stretch features, time-permitting.
-
Activity comments - Some basic messaging functionality between team members was a feature that the team would have liked to have implemented; however, it, too, was deemed to be a stretch feature.
-
Activity and Team deletion - The ability to delete activities and teams was also felt to be a stretch feature that could be useful to a user.