<h2>The idea behind Blog Social</h2><p>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:</p><p>"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."</p><p>I seriously thought that this was the greatest idea ever and instantly jumped in on it.</p><h2>Planning the website</h2><p>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 <a href="https://en.wikipedia.org/wiki/Feature_creep" rel="noopener noreferrer" target="_blank">feature creep</a>. Knowing that this website would have multiple routes, I decided that <a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">Next.Js</a>, a full stack framework, was going to be the perfect tool for the job. Next I chose <a href="https://mantine.dev/" rel="noopener noreferrer" target="_blank">Mantine</a> to help me with styling the website, since that's something I'm not the best at. I also decided to use <a href="https://supabase.com/" rel="noopener noreferrer" target="_blank">Supabase</a> to handle authentication and manage users with a <a href="https://www.postgresql.org/" rel="noopener noreferrer" target="_blank">Posgres</a> database. Finally, I went with <a href="https://cloudinary.com/" rel="noopener noreferrer" target="_blank">Cloudinary</a> so that users can upload thumbnails for their blogs, and avatars for their profile pictures all while automatically converting uploaded images to <a href="https://en.wikipedia.org/wiki/WebP" rel="noopener noreferrer" target="_blank">webP</a> for better performance.</p><h2>Designing the website</h2><p>Once I gathered all of my ideas and tools, the next step was to wireframe and fully design the UI with <a href="https://www.adobe.com/ca/products/xd.html" rel="noopener noreferrer" target="_blank">Adobe XD</a>, then implement and improve the look and feel of the design thanks to <strong>Mantine</strong>. 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 <strong>supabase</strong> works, in order to allow users to sign up and start writing blogs.</p><h2>Developing the website</h2><p>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 <a href="https://nextjs.org/blog/next-12-2?utm_source=next-site&amp;utm_medium=banner&amp;utm_campaign=next-website#on-demand-incremental-static-regeneration-stable" rel="noopener noreferrer" target="_blank">On-demand incremental static regeneration</a>, 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.</p><h2>Additional features to add</h2><p>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:</p><ul><li>Add tags for blogs so they can be grouped up by categories.</li><li>Add autosave to text editor so users don't lose progress.</li><li>Allow users to either write blogs using the text editor or <a href="https://en.wikipedia.org/wiki/Markdown" rel="noopener noreferrer" target="_blank">Markdown</a>.</li><li>Allow users to collaborate and work on a single blog together.</li><li>Allow users to comment on blogs.</li></ul><p>If they are any features that you would like to see get added then please let me know! I'm always open to feedback.</p>

This is a quick blog about how Blog Social was built and some of its features.

My new test blog

<h1>Hello my friends.</h1><p>This is me writing a test blog to see if this works properly</p>

Browse our blogs

Building Blog Social

Test blog #2