Introducing to you the simplest and most fascinating social network - Thoughts.
Thoughts is the only platform you'll ever need to share your thoughts, anonymously.
✨ Introduction
Hello everybody! Hope you are having a good day!
Today I am sharing the project I have built for the Netlify X Hashnode hackathon.
💭 About Thoughts
Thoughts is a different kind of social network and is unlike anything you have ever seen. Generally, social media is used to share updates, current affairs, memes, etc. But have you ever wondered about having a social network to share random thoughts that occur to you? Well, now you have one. Introducing Thoughts - The only platform you'll ever need to share your thoughts, anonymously.
💡 Inspiration
Our minds are always thinking about something or the other. This is what we refer to as thoughts. And sometimes beautiful thoughts flash across our minds. What if there was a platform just to share these beautiful thoughts? Though there are countless social media sites out there, most of them are filled with random useless content. When I envisioned Thoughts, I wanted it to be a simple, no-nonsense social media site where people can just share their thoughts with the world, with the option of anonymity.
⭐️ Features
Thoughts is the simplest and most fascinating social media site that you'll ever come across.
Here's what you can do with Thoughts:
- Share a new thought with the world, either anonymously or non-anonymously.
- View thoughts shared by other people
- Like a thought
There is still a lot more work to do, but I am really happy with the progress that I have made within a month of starting this project.
⚙️ Tech stack
- NextJS with TypeScript
- React-query for network requests
- TailwindCSS
- Firebase
- Dicebear avatars (for random user DP)
- Netlify (for cloud deployment)
React is my favorite JS framework of all time and NextJS💜 makes it even better. Also, this was my first time using TypeScript in a project, and oh boy I was impressed! It made my code robust and free of errors.
Netlify was used for cloud deployment. It was super easy to set up and the site was live within 2 minutes. A big thanks to Netlify🔥 for developing such an intuitive and easy-to-use platform!
🤯 Quirky elements
Thoughts mainly focuses on anonymity. If the user who shares his/her thoughts wishes to be anonymous, we provide them with a few subtle quirky elements that instill a sense of anonymity.
- If the thought is shared anonymously by a user, then the user DP will be a random image of an avatar that changes frequently, instilling a sense of anonymity.
- Also on the user home page where all thoughts are shown, the border color for each thought box is random, which is a subtle trick that I used to make users feel more anonymous.
👌 Code quality and other good practices
As mentioned earlier, using TypeScript made the code robust and free of errors.
Sign-in with Google is used to log in/register a user so that we need not store any confidential details, thereby enhancing security and trust.
Without proper authorization, the APIs won't allow access to any resources. Also if the thought is shared by an anonymous user, none of the user details would be exposed in the API.
To ensure consistent formatting throughout the code base, the code was formatted using prettier via the VS code extension.
💪 Difficulties I had to overcome
Implementing authentication using sign-in with Google might seem to be a simple process, but under the hood, there was much complex stuff that had to be done in order to integrate and make it work efficiently with the application.
Since this was my first time using TypeScript, I was stuck many times at errors thrown by the TypeScript compiler. Sometimes the solutions were simple, and other times it took me hours to fix the problems.
Implementing infinite scrolling in NextJS with firebase using react-query was not a very easy task. I had to experiment and encounter a lot of errors before coming up with an efficient working solution.
🧠 What I learned while developing Thoughts
I am very happy to have participated in this hackathon since I learned a lot whilst building Thoughts and also had an amazing time doing so. Some of the things I learned:
- Using TypeScript in a real-world project
- Implementing authentication in an efficient and secure manner
- Implementing infinite scroll
- Caching requests using react-query so as to improve performance
🚀 Future plans
I am planning to add a lot of amazing features to make Thoughts even better.
Some potential future features include:
- Show all thoughts shared by a user (My Thoughts)
- Show all thoughts saved by a user (Saved Thoughts)
- Show general settings and provide options to edit user name and DP (Settings)
- Show popular tags and on clicking a tag, all thoughts having that tag will be shown (Popular Tags)
- Profile page for user
🔗 Useful Links
👋 Conclusion
Thanks to Netlify and Hashnode for hosting this amazing hackathon.
Let me know what you think about Thoughts in the comments below. Thanks for reading this article and I hope you have an amazing day!
Follow me:
Also, you can check out my portfolio here!
