The idea behind Blog Social
After learning web development for almost a year, there's one thing I keep hearing everyone say: every developer should have their own blogging website. I do agree with that statement, however, I was always scared that I wouldn't have any blogs to write and publish, leaving me with a blogging website with no blogs. And then that's when it hit me:
"Maybe I should allow other users to create an account and write their own blogs. Like that they can handle the hard part for me."
I seriously thought that this was the greatest idea ever and instantly jumped in on it.
Planning the website
Since I knew that this was going to be one of my biggest projects, I realized that planning accordingly was going to be crucial. By picking the right tools and writing down core features to implement, I was able to stay focused and avoid feature creep. Knowing that this website would have multiple routes, I decided that Next.Js, a full stack framework, was going to be the perfect tool for the job. Next I chose Mantine to help me with styling the website, since that's something I'm not the best at. I also decided to use Supabase to handle authentication and manage users with a Posgres database. Finally, I went with Cloudinary so that users can upload thumbnails for their blogs, and avatars for their profile pictures all while automatically converting uploaded images to webP for better performance.
Designing the website
Once I gathered all of my ideas and tools, the next step was to wireframe and fully design the UI with Adobe XD, then implement and improve the look and feel of the design thanks to Mantine. I believe that creating a fully static website first is the best approach. This allows me to gain a deeper understanding on how I would like certain components to communicate with each other, once I start adding interactivity. Following this procedure, the next step was to start getting familiar with how supabase works, in order to allow users to sign up and start writing blogs.
Developing the website
Knowing that a dashboard is an area where users would want to see the most up to date information, I made use of SSR ( server-side rendering) to always display the latest data for users. Whereas on every other page, I used SSG (static-site generation) to pre-render the pages at build time, ensuring fast load times. Since Next.js allows you to use both SSR and SSG on a per-page basis, I was able to proceed flawlessly. Also, thanks to a new feature from Next.js called On-demand incremental static regeneration, anytime a blog that's been published is edited, Next.js will rebuild the statically built pages and show the updated content. Thanks to this feature, the website can stay fully up to date without ever needing to redeploy.
Additional features to add
Although I'm very proud of how the website has turned out so far, there are certain features I would like to add to make this website even better:
- Add tags for blogs so they can be grouped up by categories.
- Add autosave to text editor so users don't lose progress.
- Allow users to either write blogs using the text editor or Markdown.
- Allow users to collaborate and work on a single blog together.
- Allow users to comment on blogs.
If they are any features that you would like to see get added then please let me know! I'm always open to feedback.
