Hack Details
What we wanted to achieved ?
UIUC Sports Chat -After many failed attempts at coordinating large sports games among a small group of friends at recreation centers and sports fields around the UIUC campus, we felt that it would certainly be useful to create a platform for the whole UIUC community that woulds help connect based on the sport and location to help better coordinate games.
What our creation achieves
Our creation was a web application that has 3 locations (recreation centers) around campus that the users could click on in the top navigation bar. Within each location, there are several different links for different sports ( on the side navigation bar for group chats) to connect people that want to play a certain sport at a certain location. This way the large UIUC community can organize informal games and find more people to join them in a very easy way.
How We Built It
We started out by building the front end design for the home page as well as the navigation bars used in all 3 location pages using HTML, CSS, and JavaScript. Once this was accomplished, we began designing the backend database and local server that could store each new message that was entered and refresh the page in real time to display the new messages to other users. We built this using Node.js and MongoDB. Finally, we created the front end design for the entering your name, the current chat box, and the message, and synced this together with the back end.
Challenges We Ran Into
Most of us were inexperienced with Node.js and MongoDB, so learning these technologies and how to host them on the server was a great challenge for us. Also, integrating the front end and back end at the end was a learning experience for all of us.
Accomplishments That We Are Proud Of
We are proud of our real time messaging app and how it uses Node.js and MongoDB to create our own platform for messaging without the use of libraries or APIs. We also believe that our front end design was very strong, especially the home page and the background images used within each chat that contrasted with the text and chat colors.
What We Learned
We learned a great deal about backend development and using MongoDB and Node.js to create a database and host the project on a server. We also each learned more about how to design more effective front end design in HTML, CSS, and JavaScript as that was also an area that we had some experience with but not a lot with