Hobbscussion

Inspiration

I mainly got the inspiration for this from the idea doc, which details a social media of sorts. So I thought about mainstream social media today, and that got me thinking of a Twitter / Discord mashup. This eventually led to the birth of Hobbscussion

What it does

Hobbscussion is essentially a social media where hobbyists can form communities involving their favorite hobbies. People are able to share their thoughts on their exclusive profile, or on a public chatting board (which we call a community).

How I built it

Hobbscussion was built mainly using 2 things: React & NextJS as the front end and ExpressJS as the backend. I first started with a very basic outline of what I was going to do. Here's my first sketch of how I imagined the website and API to look like. Then I just started converting my sketches to code and built off from there.

Challenges I ran into

The first challenge I ran into was using React. I tried using React and React-Native for a project previously, failed miserably, and gave up, so this was pretty much my first official use of React. It took some time to get used to and understand the components and functions of React (like dynamic routing, the useEffect and useState functions), but once I got the hang of it, it was smooth sailing from there.

I then came across the issue of combining React's front end with the backend of ExpressJS. I was able to solve this issue by running two different processes at the same time, one being the React frontend, and the other being the ExpressJS backend.

Then, during the building of the actual website, I faced a problem where I was unable to figure out how to keep a user logged into the website as they switched from one page to another. This I was able to fix through the use of cookies, where I created a token similar to that of a discord token, hashed it, stored it in the MongoDB, and sent it to the user.

Finally, a really minor issue that I faced was really a consequence of my own actions. Because it was my first time using a database like MongoDB, I nested the users' posts within their profiles or a community. I also didn't save the community id (where each of the posts were located) within each individual post, which meant that I had a hard time making dynamic links to the posts. I was able to fix this by adding more fields to each post specifying where the post was located and thus my problem was solved.

Accomplishments that I'm proud of

I'm really proud of the API, which is the biggest and most complicated API i've ever made. I'm also really proud of what I was able to do with React. Like I mentioned previously, I absolutely despised React and React-Native, and I just wasn't able to understand how to use useEffect, useState, and useRef. But I was able to push that hatred aside and complete this project.

What we learned

Through this project, I was able to learn how to use React, NextJS, Tailwind, MongoDB, and web authentication.

What's next for Hobbscussion

Due to time constraints, I think that Hobbscussion is really just a skeleton of what it can become. I plan to add commenting functions, rehauling the database into a much more cleaner one, and making the UI more appealing. (There's more I want to complete listed on the github README)

Built With

• express.js
• javascript
• jsx
• mongodb
• nextjs
• node.js
• react
• tailwind