[SportBuddy]

Elliott Chong — Mon, 10 Jan 2022 13:17:55 +0000

SportBuddy

Ever wanted to play some sports but find that your friends are too busy? With SportBuddy, you can find Buddies to enjoy your favourite sports together! Just create a new posting with your desired Sport, and await other users to join the group. You can chat with them in the live chat section for more details. Visit the site now at https://SportBuddy-Elle.netlify.app!

Link to Code

https://GitHub.com/Elliott-Chong/SportBuddy

Submission Category

Choose Your Own Adventure

Technologies Used

This is my first serious full stack project using the MongoDB, React, Express and NodeJS (MERN) Stack. Featuring a custom authentication system using JSON Web Tokens for session management, and Google OAuth for SSO.

Features

Custom theme and design, layout preplanned in Inkscape, a vector based graphics editor.
Custom CSS implemented using TailwindCSS, a utility based CSS framework.
Fully responsive design for a better User Experience.
State management involved React's useReducer hook and their Context API.
Live chat feature uses WebSockets, implemented by the NodeJS package socket.io, allowing for full-duplex communication channels over a single TCP connection. This allows for all clients to receive socket messages at the same time and update thier state accordingly.
Mongoose, a MongoDB wrapper, was used as a Object Relational Wrapper (ORM) to simplify the process of reading and writing to the database.