So I used this opportunity to build the blog, the way I wanted.

Step 1: Setting up the blog

The good thing was that Hashnode already provided a blog starter kit which is integrated with hashnode APIs. That made the job easy as I didn't have to build it from scratch.

So I forked the blog starter kit repository, set environment variables and deployed it on vercel. I chose the enterprise theme.

I was building this blog for Tabwave and I already had a website deployed on the domain tabwave.app. Thanks to Hashnode now I can deploy my blog on my subpath like tabwave.app/blog

This is how you can configure it on your subpath if your main project is deployed on vercel.

async rewrites() {
    return [
      {
        source: "/blog",
        destination: "https://starter-kit-rose-seven.vercel.app/blog", -> Replace https://starter-kit-rose-seven.vercel.app with your own Vercel deployment URL from step 1
      },
      {
        source: "/blog/:path*",
        destination: "https://starter-kit-rose-seven.vercel.app/blog/:path*", -> Replace https://starter-kit-rose-seven.vercel.app with your own Vercel deployment URL from step 1
      },
    ];
  },

You can read more about setting up your blog on the started kit repo

Once it was deployed, I enabled the headless mode in my blog dashboard on Hashnode. And that's it. It started treating my blog as a headless blog and sent readers directly to the origin which is tabwave.app/blog

Step 2: Personalize the blog

At this stage, the blog is live and running. It was mind-blowing to see it didn't even took me more than half an hour to set it up. Now that the blog is ready, it is time to customize it.

I started with the headers and footers first and then slowly built the blog cards. At first, I just made normal cards ui for blogs but then I got an idea. This was a blog for a productivity app, so why not make it look like that?

And I ended up making my blog cards look like simple handwritten sticky notes.

I customized everything else to match it with the theme of my website.

Having tags and their respective pages is very useful as I can put all the changelog on a single page.

And that's it. You can see my blog here at tabwave.app/blog

repository : https://github.com/rutikwankhade/tabwave-blog

Even I was surprised by how easy and fast it is to build a blog with headless hashnode. I believe it's gonna change the blogging space as it opens the countelss opportunities with it.

Now I can just use the powerful hashnode editors to write a blog any time and publish it. I hope this pushes me to write more often. Nevertheless, I had fun exploring headless hashnode and you should also give it a try.

🚀 Launched 2 products on Product Hunt

• My first open-source project Coverview, a tool to create cover images for blogs quickly and easily crossed 500+ stars on GitHub. So I revamped it and added new features like more themes, fonts, custom icons, and Unsplash integration. And launched it on Product hunt. It was 🏆 #1 Product of the day

  

• I also launched Halfbakedideas, an app to share and vote half baked ideas on Product hunt. It was the 🏆 #2 Product of the day. More than 1000 people signed up and it has around 350+ half-baked ideas at the moment.

  

🏃‍♂️ Hackathons and sprints

This year I participated in 3 hackathons.

1. Netlify x Hashnode hackathon - It was a 4-week-long hackathon. I built Glimpse, an app to track and share about books. Out of 150+ submissions, My project was among the top 10 runners ups.

2. Hasura x Hashnode hackathon - It was also a 4-week-long hackathon. I built an API that gives bucket list ideas based on different categories. I learned about GraphQL and Hasura while building it. I wrote about the whole process here. Also, you can play around with API at https://bucketlist-api-playground.vercel.app/

3. PlanetScale x Hashnode hackathon - This was also a 4-week-long hackathon. Even though I didn't make it to the winners, this was the most fun I had in a hackathon. I built an app where we can share our half-baked ideas and vote for them. it's like bringing the internet's best half-baked ideas into one place.

   Have a look at halfbakedideas.app for some creative side project ideas.

Building something from the scratch and turning an idea into a product was a thrilling experience. That's why I love hackathons the most. The deadline makes it more fun as it's like a sprint of building stuff. Also, I learned new technologies like Nextjs, Hasura, Planetscale, and more.

🙇‍♂️ Lots of rejections

Job search is hard. I applied and interviewed at a couple of companies but faced lots of rejections. It hurts more when you get the chance but you fail to grab it. But every rejection helped me to reflect on myself and see what mistakes I am doing. Every rejection was a lesson, a step towards being more confident.

👀 Am I an imposter?

Even though I was learning and building stuff, I was feeling like an imposter. I had feelings of self-doubt all the time. And the harder I tried to hide it by constantly building new stuff, the worse it got. I knew something was missing. And I realized that my fundamentals are not strong. I only had enough knowledge to build stuff but there were missing gaps. That's what I was afraid of.

💪 Making strong fundamentals

The first step to solving a problem is to understand the problem. I started noting down the things I am bad at and the things that I need to improve on. Taking action was the second step.

So I decided to go back and work on making my fundamentals strong. I did not want to make the mistake of choosing so many resources and then giving up. So I just picked JavaScript.info and started reading from scratch. Also took lots of handwritten notes in the process. That filled those gaps and I felt more confident about myself.

Next, I binge-watched the Namaste JavaScript playlist on youtube which helped me understand how things work under the hood in JavaScript.

The biggest lesson I learned in this process was I should focus more on the why and how of a topic than what while learning anything.

🕊️ The thing about confidence

I used to think I need to be confident to do a certain thing. Like, say I need to be confident to give interviews. But I was wrong. The first time we do anything will be uncomfortable. The next time we do it, it will get easier. Confidence doesn't come before the experience. We need to do the experience and then get confidence. So in this case, giving more and more interviews gives you confidence and not the other way. First comes action then confidence.

🔮 Rebuilt my portfolio

I had a personal website before but it wasn't ranking on google. So I decided to rebuild my portfolio website with Nextjs which improved the SEO drastically.

It's built with Nextjs, tailwindCSS, and framer motion for tiny animations. It uses markdown files and contetlayer to create pages where I wrote full case studies of my projects. Have a look at rutikwankhade.dev

🐣 Personal growth

The other half of the I year when I understood the importance of physical and mental health. Most of the days were about sitting in one place in front of my laptop for long hours. And I didn't notice until my body started giving me signals.

So I joined the gym. I went and paid the next two months' fees beforehand. I call it deliberately pushing myself into commitments. Like if I wanted to start reading books, I would already buy 3-4 new books. If I want to learn something, I would buy an expensive course. And it works every time.

Out of all the books I read this year, I can't recommend "The courage to be disliked" enough. It's one of the best books I read that changed my perspective on life.

Rediscovering hobbies

I bought a little pocket sketchbook, and some pens and started drawing again. I mostly draw cute characters but It's one of those activities that I enjoy doing.

🎉 Finally launched Tabwave v2

Tabwave has been my passion project for a long time. And now it has become even more mindful and beautiful. After lots of procrastination and the constant urge to make it perfect, I launched a new Tabwave

It has now a clean user interface and features like drag-and-drop, sort tasks, edit notes, access and search bookmarks, site blocking, and more. You can also use it at web.tabwave.app

📅 Looking forward

Last year I thought of doing so many things and didn't even start. But this year I want to focus on less stuff with more impact. This year I will write more. Regardless of what I do in 2023, I wish to keep on building. From getting crazy ideas to turning them into products, building cool things, and having fun.

Happy new year!

After lots of procrastination and the constant urge to make it perfect, Introducing the new Tabwave.

✨ So what's new?

A more clean and beautiful user interface

I have always tried to make Tabwave look good. The first version needed lots of fine-tuning and polishing. Over time I got better at understanding UI and wanted to reflect it in Tabwave.

Drag and drop tasks

This was one of the most requested features. So now you can drag and drop your tasks to mark them as completed. Also, you can sort tasks based on your priority.

It also shows the percentage of your finished tasks that will motivate you to get things done.

Notes are now editable

With Tabwave, you can create short notes to map down your ideas. And now you can even edit them.

Pomodoro radial timer and settings

I love the Pomodoro technique so this is the most improved feature of Tabwave. Now it shows an interactive radial timer to display the progress.

More settings for your pomodoro sessions

Notifications

Earlier when the session ends, a notification sound and a popup in the background were the only way to notify. But now the pomodoro clock has an in-built notification system. You will get notified about the sessions even if you are not on the chrome browser.

Block distractions

Mindfulness is the basic human ability to be fully present, and aware of where we are and what we're doing.

To help you be more mindful, now you can block websites that distract you so you can focus on your work/study. Just add those sites in the mindful tab and switch to mindful mode. Now every time you will visit that site, it will redirect you to the mindful page and remind you to focus.

Bookmarks

Tabwave has now superpowers to make it a bit easier to access or search bookmarks with one click.

A better dark mode

Also fixed a lot of bugs. The new Tabwave has a slick design, smooth animations, and cool features to help you be mindful and productive.

👉 https://tabwave.app

Note: If you had already installed tabwave before, it might have been disabled because of chrome’s new policy. You can go to chrome://extensions/ and enable it. or reinstall it to use the new version.

You can help me create Tabwave better

If you have any ideas or feature requests, you can submit them here or reach out to me on twitter I will closely listen to what the users want and try to make Tabwave as good as can.

If you loved this new version, I would really appreciate it if you could write a review on the chrome web store. That would mean the world to me.

But before that let's understand what rendering means.

🎨 Rendering on the Web

In simple terms, rendering is a process of converting your code into something that users can see or interact with.

When you go to a website, the browser requests an HTML document from a server. The server returns the required file with all the linked resources. Rendering is the process that combines all those resources to create a user interface in the browser. Under the hood, it involves a lot of steps like parsing, building the DOM tree, CSSOM, Js compilation, painting, etc. You can read about it in detail here.

💻 Client-side rendering

To understand SSR well, let's have a quick look at Client side rendering first.

Client-side rendering means rendering pages directly in the browser. All logic, data fetching, templating, and routing are handled on the client rather than the server.

If you ever used react before, you might have noticed that the HTML file does not have any other content than a root div.

That's because React does the rendering on the client side. Once the bundled Js file is downloaded, it renders the website in the browser.

But as the application grows, the JavaScript required tends to grow as well resulting in more load time. Although, these can be fixed with techniques like code splitting and lazy loading. SSR solves this problem. Server-side rendering is a tool that can help you load your websites faster.

💡So what is Server side rendering?

SSR is one of the types of pre-rendering. Pre-rendering means the HTML is generated in advance, on a server, instead of having it all done by JavaScript on the user's device.

Server-Side Rendering renders the web pages on the server and then sends HTML files to the browser.

🪄 How it works

When a user visits a website, the server builds the webpage and sends a ready-made HTML file to the browser. All the processes like data fetching and templating are done on the server side before sending the response. The initial request loads the content as well. And the user interface is created.

After that React makes the components interactive (for example, attaching an event handler to a button). This process is also called hydration. In this way SSR lets users see the webpage before the JavaScript bundle loads and runs at the user end.

👍 Pros of SSR

• Since a ready-made HTML is provided to the browser, It makes the initial load of the pages faster.

• Server-side rendering is great for SEO. Your content is present before you get it. So search engines can index it and crawl it efficiently.

• your site will be ranked higher in the search results if it is rendered on the server side. Google gives preferential search rankings to the sites with the fastest page load speed.

• Fast-loading websites improve the user experience. Even if the user is running a slow internet connection or if the javascript is disabled on the browser, the application can be loaded.

👎 Cons of SSR

• You're generally processing/rebuilding the same application multiple times - once on the client and once on the server. It can be costly and resource-intensive.

• With server-side rendering, the browser displays the web page faster, but it still needs time to make it interactive. As a result, the app looks ready for interaction while the code is still being processed in the background. If the user tries to interact with the app during this period, there can be a delay in the browser’s response.

• When the number of visitors increases on your site, with each user accessing a new page, it has to send a server request every time. Resulting in higher server costs.

🎯 Conclusion

Overall, server-side rendering has a good impact on SEO and performance. But CSR and SSR are not all black and white. Both have their pros and cons. And there are also hybrid options available that ensure the very first rendering of any page will happen from the server side only for the first time. Then all subsequent page requests will be CSR.

So when it comes to what should I choose, it mostly depends on the use case that fits your project.

📖 Further reading

• https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

• https://web.dev/rendering-on-the-web/

• https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction

half baked idea? what's that? Well, this little conversation with Joe (my imaginary friend who is always hungry) might add some light to it.

Like when I thought, what if I could replace my browser's new tab with a productivity app, I built Tabwave. What if I could reduce the hefty process of designing cover images and make it quick and easy, Coverview was born.

You see the pattern right?

💡 The idea of half baked idea

• When makers build products they usually launch them on a product hunt. But what if we could validate the idea before you spend hours building it?

• Most of us come up with half-baked ideas but don't have the tools, resources, or time to build them. What if we could just share the ideas with the world and let others make it?

• After participating in multiple hackathons, at some point, we are running out of ideas. What if there was a place we could get some ideas from?

And so I decided to build an app where we can share our half-baked ideas and vote for them. it's like bringing the internet's best half-baked ideas into one place.

🍪 The baking/ making process

Once I decided on the idea it was time to bake it. Oh sorry, make it. While building the app, I made various decisions on the approach or the tools I used which I will talk about as we move forward.

👶 Explain like I am 5

While writing about the copy on the landing page, I wanted to try something different. So I started writing it like users are talking to me and I am explaining it to them. This gave me an idea of making up Joe (yup, the same one we talked with earlier). So I made it like I am explaining to Joe what's this app about like he is 5.

🎨 The user interface

I used Nextjs for building and TailwindCSS along with headlessUI for styling the app.

✅ Authentication

I tried three different approaches for this one. Let me explain.

1. No account needed

The app was focusing on crowdsourcing the data, so I thought not to make users log in or signup. Anyone can come up and shoot their ideas.

But there was a problem with this approach. If you give internet options to mess up with your site anonymously, there is a high chance they will. So it might end up with a lot of spam ideas. And I really wanted it to be a genuine source of ideas. Also, making a user profile was on my roadmap so I skipped this.

2. Account needed only to interact

The second approach was to let everyone see the content and requires login only if they want to post or vote for any idea.

I implemented this approach and added analytics on site to see how it performs. After 6-8 hours of the launch (on Reddit and Producthunt) and 1k+ page views, I realized only 1-2% of the visiting users are interacting with the app. Why bother signing up when you can see the posts right? And that was the problem. In the initial phase, the app needed ideas to be submitted or voted on. The main goal was to crowdsource ideas and not just the views. So I switched to the next approach.

3. Need to sign up

Users will need to signup to see all the posts or vote for them. I compared the data and I saw a good (10-15%) improvement in the interaction. After enough ideas get added on site I can switch back to the previous approach. I was using Nextjs so next-auth was an obvious choice for me. I only kept google login to make it quick.

🪄 Planetscale and Prisma

PlanetScale being the most scalable MySQL platform was my obvious database choice. Tagging along with Prisma made it a perfect combination.

Getting started with PlanetScale was as easy as it could be. The default free developer plan has 5 GB storage,1 billion row reads/mo and 10 million row writes/mo which is pretty great for your hobby projects. Also, I liked the idea of branching & merging like Git at the database level.

It introduced me to Prisma (ORM) (object-relational mapper) which I used to create schema and send queries to the database.

👀 How does it work?

Sharing ideas

Users can share their half-baked ideas. I know it's hard to come up with ideas, so added a few tips on the side.

Upvoting ideas

I considered two ways to validate the half-baked ideas. If someone builds a product out of this half-baked idea, would you use it? or would you pay for it to use? This way makers can get validated ideas and won't end up building something no one would use.

Filter and sort ideas

You can sort ideas based on the ✨ latest, 🙋 I would use it and 💸 take my money. Also, You can filter by different categories like social, productivity, health, etc.

User Profile

You can see all the half-baked ideas shared by a user on their profile.

User profiles are public and can be accessed with a link. So I added a popup when unauthenticated users try to react to the posts.

🔗 Links

• Demo : https://halfbakedideas.vercel.app
• Github: https://github.com/rutikwankhade/halfbakedideas

update day 2

📈 Stats after 48 hours

The simple idea of sharing half-baked ideas got a great response from the internet. I shared it on Reddit, Twitter and launched it on Product hunt. Here's what happened in the next 48 hours.

3.8k unique visitors , 8k page views , 800+ sign-ups and so many creative ideas!

update day 4

Now, this is getting wild. 200+ half baked ideas and I am amazed by how creative people can get while coming up with ideas.

And then this happened!

🔮 What's next?

This was fun, not just the building part but writing about the whole process. It was just a half-baked idea. There is a lot more I can do to make it better. And I am already getting feature requests from the users. for ex. discussions. I want to continue working on it.

What are you waiting for? Go visit halfbakedideas.vercel.app and check out cool half-baked ideas shared by the internet. And if you have one, don't forget to share it with the world.

Cheers!

Hi there, In this blog post I will talk about why and how I built a public API for my open-sourced side project with GraphQL and Hasura.

🗺️ A little backstory

When I was in college, I wanted to do lots of stuff outside my studies and college life. I wanted to explore more and try different things out. Things that I didn't even imagine I would ever be able to do. So I started researching and found out about the thing called bucket list.

I loved the idea of the bucket list. It's like a number of experiences or achievements that a person hopes to accomplish during their lifetime.

So I created my own bucket list which had around 20 things. And I am so glad that I was able to cross a few items from my bucket list. Like Solving a Rubik's cube, meeting my favorite Indian author, or visiting Marine Drive, Mumbai.

👀 So what's the deal?

Okay, we got it Rutik, enough with the story. How is it relative here?

So a few months back I actually built a bucket list app for myself. I was trying out different tech stacks and thought of building bucket, an app to create and track my bucket lists again. But this time digitally. Now I do realize every other side project I built is somehow a solution for my own real problems.

It was nothing complex. Just a simple todo like app disguised as a bucket list app. It's built with React, TailwindCSS, and Firebase.

💡 The problem

When Hashnode announced the Hasura hackathon, I started brainstorming ideas to build something. And I realized one of the pain points I had in my side project. While creating my own bucket list, I was running out of ideas. And I wished there was an API that gives a bucket list idea. Unfortunately, I couldn't find any good.

So what would a developer like me do? I built one.

🛠️ Hasura and GraphQL

So one weekend I started learning about Hasura and GraphQL. I have used GraphQL APIs before but never built one. And I was blown away by the fact that one can build APIs without much prior knowledge of the technology.

Hasura is an open-source project that connects your databases and instantly gives you a production-ready GraphQL API. It really does what it says. While the main idea of GraphQL is to POST a query to an HTTP endpoint, instead of hitting different HTTP endpoints for different resources.

I loved how It takes no time to get started. You don't have to go through hours of tutorials to build something with Hasura. To be honest, building APIs with Hasura seems like ✨ magic.

🤖 Building the API

• After signing up for the Hasura Cloud, created a new project for building API. We can either connect an existing database or create a new one. I created a new Postgres database by connecting with Heroku.

• Now the first step was to create a table by adding the required columns. For the bucket list API, I added id, idea, and category columns respectively.

• After adding some data to the database manually, we are all set to use the API. Hasura cloud provides an integrated GraphQL playground called GraphiQL where we can run queries and test our API.

Here is a simple query that gives bucket list ideas with category creative

query MyQuery {
  ideas(where: {category: {_eq: "creative"}}) {
    id,
    idea
  }
}

And that's it. Without writing a single line of code, I built the API in no time.

📍 Challenges

• Once I built the API, I was able to use it in the GraphiQL playground but it still wasn't accessible to the public. After reading some docs I figured out that using the HASURA_GRAPHQL_UNAUTHORIZED_ROLE env variables and user roles.

• Also to test and try out the API one could use the GraphQL playground. But to make things easier and reduce the step of copy-pasting the endpoint and all, I deployed the integrated playground using graphql-playground-react.

Demo: https://bucketlist-api-playground.vercel.app/

Code: https://github.com/rutikwankhade/bucketlist-api-playground

🚀 Using the API

Here comes the good part. Now I integrated this bucket list API in my side project that suggests different bucket list ideas based on different categories.

You can try it out here https://bucket.vercel.app/explore-ideas

✨ Wrapping up

It was fun implementing this simple application in my side project. I am definitely going to learn more about GraphQL and Hasura after this. This is my submission for the Hasura Hackathon. See you next time.

Introducing Glimpse, a reader's corner to discover new books.

🏃 Motivation

Reading is one of the few things that I enjoy outside work life. I read a lot. I mean when Emilia Clarke once quoted ''My father always told me — Never trust anyone whose TV is bigger than their bookshelf", I agreed.

Over the years I have read books from the genres of fiction, nonfiction, self-help, and more other stuff that interests me. Those books have inspired and helped me become the person I am today.

💡Problem statement

For almost a decade, GoodReads has been the dominant platform for readers to discover and rate books. But many of the internet’s most dedicated readers now wish they could share their enthusiasm for books elsewhere.

And I wanted to have that online catalog of books, I wanted to talk about the books I read. I once tried GoodReads and never opened it again because of its bad user experience. I mean it's 2022!

I know, there have been built alternatives. My goal was not to try to solve the engineering problem but the user experience problem. So I was more focused on the execution, rather than the idea. I wanted to build my own version of this side project.

And here it is.

Live : https://glimpseapp.netlify.app/

Code : Frontend / Backend

🎨 The process

I spent a lot of time exploring how I can build this app before writing the first line of code. I planned the roadmap, tasks, and everything on the notion. This workflow helped me to track my progress.

I had to make lots of decisions around the user interface and the overall user experience. Sometimes had to get back to the whiteboard and rethink the whole user flow. But It was exciting and getting better on each iteration.

👾 The challenges

• The google books API has its limits. It gives 1000 API calls per day for an IP address. Searching every time user types could have ended up with the limit exceeding. So I used the debouncing technique to limit API requests.

• The book API doesn't always give the right response. sometimes, it does not have the properties requested. So I had to handle it on the client-side.

• To make the user profile more personalized, I used Cloudinary to store the images.
• As the app became bigger, it got hard to maintain the state. I have used redux before but it felt like writing too much boilerplate code. But the good thing I learned about redux-toolkit which is a much more clean and better way to manage the state than the old way of using redux.

🛠️ Technologies used

• Next.js - to build frontend
• Redux toolkit - for state management
• TailwindCSS - for styling the app
• Express and Node.js - for setting up the server
• MongoDB - database
• headless UI - for built-in components

🚀 Deployment on Netlify

I hosted almost every app I built on netlify when I started coding. I was a beginner and netlify had a smooth, beginner-friendly experience of deploying sites. So I focused more on building the app and letting netlify take care of the deployment.

📦 The final product

oh wait, did I forget to mention why the name glimpse?

glimpse means a quick idea or understanding of what something is like. (or just a fancy word for review 😅)

Here are a few cool features of Glimpse.

• Instant search for books from the database of thousands of books. You can either search by book name or the author's name.

• Find books based on different categories like fiction, nonfiction, business, technology, and more.

• Share glimpse of the books you read and liked in one click. Talk about your thoughts, favorite quotes, and favorite things with glimpse.

• Follow other readers and get a glimpse feed based on your following. You might find the next book you want to read right here.

• Add books to your collection as currently reading, want to read, and read.

• Create your own online library and manage your books with ease.

I have seen a lot of people having a collection of books they read in their portfolios. This could be one of the use cases for glimpse. Just create your profile and add it to your portfolio.

You can check out my profile here.

👀 What's next

I am so happy I could finish this project in time. I was 🤌 this close to giving up on this. Glad that I didn't. Glimpse has been my passion project for a long time. And this hackathon has pushed me to finally build and ship it. I know there is a lot of room for improvements and features. And I will keep working on it.

This is my submission for the #netlifyhackathon

And so I built myyearinreview

How it started

It all started last week when I finally decided to learn Next.js. It was on my list for a very long time now. So I picked some crash course on Youtube and I got hooked to it. Eventually, I jumped on reading the Next.js docs. I was about to build a demo app or something while learning. But then I thought If I am going to spend time on this, why not spend it on building something cool. A win-win situation right!.

But I had to build it in less than a week because this year is about to end and my idea was focused on year-end reflections.

Next.js + Supabase

I was already blown away by all the built-in features Next.js provides like file-system based routing and server-side rendering.

The next step was to choose a database. I was hearing a lot about Supabase lately and wanted to give it a try. Supabase is an open-source Firebase alternative. It provides all the backend services you need to build a product. And I am impressed with how quickly I was able to make the MVP.

Participating in hackathons has helped me get better at picking up new technologies quickly and building stuff.

• Quickstart: Next.js + Supabase

So this is what I had in mind. The app will have a google login. Once the user logs in, a user profile will be created. The review will have various curated questions, after completing their review, the review page will be public for everyone. All the profiles will be shown on a separate reflections page. Also, users will have an option to choose if they want it to be featured on the reflections page or not. Pretty simple right.

Let's see this in brief but with the tech part now.

Authentication

To make things easy I enabled Google Auth for my project and just implemented login with google in the app. Check out this guide for a better understanding.

After setting it up all I had to do was create these functions and connect them to UI.

async function signInWithGoogle() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'google',
  })
}

async function signout() {
  const { error } = await supabase.auth.signOut()
}

Creating user profiles

Once the user is signed in, I had to create user profiles. But before that, I used the response data from google OAuth and created a username for the user. This will be used for the review page of that user later.

For creating user profiles, I could do it in two ways

1. Upsert the profiles table in the Supabase with data as soon as the user logs in.

2. Using triggers and functions in Supabase, We can trigger a function to create a profile on user creation in Supabase.

I chose the second one as it will create a user profile automatically once the user is created in Supabase.

The review form

I curated a few good questions from multiple resources to reflect on the year. But If I kept all those questions on a single page, it would have looked like a tedious task to fill it and one might even just leave it. So to make things interesting I decided to make it a multi-step form. I broke those questions into small steps.

First I tried a few npm packages to do it, but couldn't style it accordingly, so I ended up building it on my own.

✨ You see I even added a progress bar at the top so that every answer user writes, takes one step closer to completing their review.

Where the magic happens

Once the user submits his review, with some 🪄 CSS magic, it will look something like this.

This is just one section. There is a lot more. See it by yourself.

Check out my review of 2021 here. https://myyearinreview.vercel.app/rutikwankhade

Dynamic open graph images

At this point, if someone shares their review link somewhere on the internet, it won't look like it's their own thing. So to make the URL preview more personalized and clickable I leveraged the power of Meta tags. Next.js provides a built-in component Head for the meta tags.

Now using Cloudinary API, I made the open graph images for every review page dynamic and appended them in the Meta tags.

Glad I bookmarked Braydon Coyer's post about the dynamic open graph images. It was really helpful. And yes, I do check my bookmarks. all of them.

Conclusion

And that's it for today. Try it yourself, create your review for the year 2021 and share it with your friends. Also, myyearinreview is live on Producthunt. Check it out.

References

• Adding a user profile to our Supabase user

• Supabase automatically create user profiles on sign up

• How to Dynamically Create Open Graph Images with Cloudinary and Next.js

And today's project is somewhat related to that.

Introducing myhal, short for my highs and lows. An app to document all the ups and downs of one's journey.

The idea

I used to keep a list of all the achievements I made. Some days when I feel low or imposter syndrome hit me, it was something that would lift me up. And I felt everyone should keep one. Like the highlights of their journey.

But that's not it. There was more of it. Do you know this symbol called yin-yang? You have probably seen it somewhere.

It comes from Chinese philosophy that represents opposing ideas and forces. For ex. light and dark, day and night, etc.

In Ancient Chinese philosophy, yin and yang is the idea of dualism, that seemingly opposite or contrary forces may actually be complementary, interconnected, and interdependent in the natural world.

Yin and yang cannot exist without the other.

And I realized it's not just the highlights, but the lowlights are important as well. Highlights cannot exist with lowlights. They both balance each other. And so I came up with myhal.

How does it work?

• Highlights is the list of small wins that you are proud of throughout your journey. Celebrate them. It can inspire you as well as others too.

• Lowlights is the list of moments when you failed, learned, and grew up. Embrace them. In the world of social media, where everyone talks about success, be the one who shares their failures. Share your behind-the-scenes. It can help others to give a broader perspective.

• With myhal, you can create your own page. Add your highs and lows, add a bio, choose your color theme, and share with everyone.

Clerk.dev

I am very impressed with Clerk.dev. It provides complete user management for your apps. I never imagined it to be that easy and simple to use. Kudos to their dev team for building such an awesome product. You should definitely try it.

I set it up with react following their docs. The sign-up, sign-in, dashboard, and all the user management related stuff are managed by Clerk.dev with just a few lines of code. It also has its prebuilt UI elements.

Tech stack

• React for frontend
• TailwindCSS for styling
• Clerk.dev for user management
• Firebase for database
• Vercel for hosting the app

Challenges faced

• Using Clerk.dev was a seamless process, though I faced some issues while building my app. Special thanks to the members from their discord server for the help.
• I wanted to make the profiles public to everyone but Clerk.dev doesn't allow to access the user information without signing in. So firebase came for the rescue. I saved user's data from the frontend in the database and pulled data from there for public display.
• While using Firebase, I faced multiple issues. But with a little googling and trial and error, I fixed them.

Summing up

So that's it. I had a great experience building myhal. It's simple and small but I really wanted to make it. This is my submission for the #clerkhackathon. Feedbacks and suggestions are welcome.

Github repository / Live

And that's when it hit me how feedback plays a crucial role in learning stuff. Feedback can help you learn from your mistakes and improve. So where do you get them?

It's communities. And themakersclub can be the one where you can showcase what you built, ask for constructive feedback, discuss ideas, and even share resources with everyone.

In this article, I will be sharing my whole journey of building this project for the hackathon. Let's divide it into a timeline of 4 weeks.

Week 1: Procrastination

Yup. You read it right. Procrastination. I will be honest. I mean a lot of it. I said I will start tomorrow. I didn't know I was going to regret that decision later. But even though I wasn't doing anything, I was still brainstorming about what should I build? or more like what can I build? ideas, ideas, where are you?

Week 2: Choosing the idea

I feel this is the hardest part of creating something. And I know a lot of you might agree with this. So I had a bunch of ideas in my mind. I got excited, but then I started discarding them one by one as I spent more time validating those ideas.

Finally, I was left with two ideas, choosing only one was going to be a crucial decision. The first one was a complex project but a simple idea, and the second one was a simple project with a promising idea.

I couldn't choose. I wish I could make both but the clock was running. I could have built the simple idea without learning anything new. But I chose the complex one. Because the sole purpose of participating in the hackathon was to learn new stuff, challenge me to go beyond, and of course the prizes too.

so that's it. the makersclub.

🐱‍💻 The problem

I have been part of multiple discord servers. With tons of channels, one that caught my attention was the feedback and review channel. People would just share what they build and ask for feedback. But here is the problem, It was all cluttered. The responses were mixed up in the chats. Even when someone shares a resource, it gets lost forever.

Twitter is a great place, no arguing with that. And it's not that there aren't such platforms for makers. They do exist. But so what? Let's pretend they don't for a while and build one by myself. After all, learning was one of the motives to build it right?

But you just can't think of an idea and jump directly working on it. The more clear the idea, the faster you can implement it. It's complicated you know. You might keep thinking about it and never build one. Or you can think about every detail of it, so you can build it efficiently.

So I kept my focus on 3 things. feedbacks, resources, and discussions.

Week 3: The challenge

I was positive that making UI will be an easy job for me. But for the backend and database, it was a challenge. This was my first full-stack project with the backend. Before last month, I never heard of harperDB. I started learning about how things work and made a demo app using HarperDB. There weren't many resources available other than the docs, so it was going to be challenging. But I must say, I really liked harperDB.

⚙ Foundation

The first step was to build login/signup functionality. It's easy to add new features once the main skeleton of the app is ready.

I learned about JSON web tokens, hashing passwords, APIs, postman, and redux.

I never used redux. I tried once but got so much confused. I am glad I used it in this project. Finally, I got the gist of what it is and how it actually works.

🧩 Building UI

I took inspiration from dribble and created a basic layout. Having something nice to look at makes it fun to work on. The first time I create something, it doesn't actually look good. The more I try to fit things in different ways the better it gets. Sometimes I surprise myself with the outcome. The UI gets completely changed after multiple iterations. And each time it looks better and better.

I feel building UI is like solving a puzzle. I really don't know how it will look at the end. I just try to put pieces together and it starts making sense.

I didn't create a UI design for this. I didn't have enough time and the fact that I don't know how to use Figma properly.

Week 4: I did it.

Sometimes you can't really estimate how long a certain feature will take time to build. When it was just a week left and Hashnode added that counter on the homepage, damn! Every time I used to come back here, it reminded me I was running out of time. I had to push faster. I focused on making a few but well-developed features than adding just so many features. I really thought I couldn't make it in time. But I did.

So here it is. themakersclub, a club of ideas, feedback, and resources.

• Showcase what you built and get constructive feedback from others. Also, you can give specific feedback like a bug found, UI improvements, feature suggestions, etc to any project.

• Start a discussion thread on any topic and invite people to share their thoughts and ideas. It supports markdown too.

• A collection of resources shared by members of the makers club. You can find resources based on categories like design, hackathons, podcasts, etc.

🛠 Technologies used

Well, I got to learn a lot about redux, harperDB, and how backend and APIs work while building this project. The new HERN stack looks like a great combo.

• React for frontend
• TailwindCSS for styling
• Nodejs and Express for backend
• HarperDB for database
• Redux for state management

The complete code can be found here. Frontend / Backend

🐱‍🏍 So what's next

This is just an MVP and I feel can be turned into a really good project. Right now the features are limited but I am looking forward to adding more and make it even better.

• User profile for every maker which can be used as a portfolio
• Signup with Google/Twitter
• Like/upvote projects and discussions
• and more

💡 Final thoughts

A lot of code newbies are learning and building stuff that needs feedback. But it's hard to get one in the vast flow of information. So I invite you to join themakersclub. Also if you are someone who wants to help others, you are welcomed to be a mentor. I will personally provide feedback every week on the makersclub. so if you are a beginner, you built something, need feedback, hop in. And I will try my best to help.

This is my submission for the #harperdbhackathon. Give it a try and let me know your thoughts or suggestions.

I had a wonderful time having a conversation with him on Twitter DMs. And I really liked those questions and thought why not share them on my blog too. So this post is all about it.

Let's begin.

👨‍🎓 What are you currently doing (working/studying)?

I am a final year student of computer engineering at Sinhgad Institute of Technology, Lonavala. And currently doing an internship as a Software Developer Intern at Twimbit.

🎯 What's that one thing you want to achieve in 2021?

For me, the one goal for 2021 is to be a full-stack developer. I want to learn how to build products from end to end, utilize my skills and build exciting products. Also, I have lots of good ideas around side projects that I want to work on.

👨‍🚀 What's that one thing you are most curious about?

It’s everything related to the web. The more I am learning, the more I feel how little I know. And that makes me explore more.

💡 What's something you learned/realized recently that you wish you learned/realized much earlier?

One thing I recently learned is that one can never be ready. You have to do it anyway. Like I used to keep saying to myself, I don't know enough, once I learn some XYZ stuff, I will be ready for the job. And I kept pushing it. But now even after getting into an internship, I feel the same. Every day I have to learn something new. It's a continuous process of learning and growing. You can't just wake up and say, yup! I am 100% ready. And this applies to everything. So don't strive for perfection. Strive for progress.

🙋‍♂️ Couldn't agree more, as our society feed, your learning ends with the completion of a degree and that is totally wrong. What's the one mistake you have done and will you advise others not to repeat that?

It would be "choosing the wrong metrics". Reading one book and implementing it in your daily life would be more impactful than just reading 100+ books. Having few folks who support you is more important than having hundred thousand followers. So choose your values carefully.

🦸‍♂️ Why did you choose to become a creator? How do you see yourself differently than the rest?

Because It's fun. It's something that I truly enjoy doing. I follow the mantra of learn-apply-share and try to encourage everyone to do the same. I don't see myself as different from others. I am learning a lot from all the people around me. After all, We all are solving problems and creating stuff in our own ways. I am documenting rather than creating.

📖 Which book you are reading these days? Which Genre excites you the most?

I am currently reading Soft skills by Jhon Sonmez. So far I can say it's a must-read for all the developers and creators. I read both fiction and non-fiction. But reading people's stories and journeys excites me most. Rashmi Bansal's connect the dots, arise awake are a few of my favorites in this genre.

🎨 What do you love to do when not working? Any hobbies you want to share?

Besides coding, I like

• reading fiction/non-fiction books,
• writing/journaling, doing this since 2015
• illustrating, I am not good though I am learning.
• poetry, music, filmmaking.

Basically, I enjoy everything artistic.

🛠 What problem you are planning to solve next?

It's not a specific problem I am trying to solve right now. But there are few products that I wish should exist, at least for me. So I am planning on building them. And even if they do exist, my goal is to make them better. Most of the projects I built were actually to solve my own problems.

📡 What would you recommend to others who are looking to start their careers in the development world, how to go about it?

Well, I am in the early days of my career myself. What I know is just a drop, there is a whole ocean in front of me. But after some learning, watching awesome folks, and experiencing myself, all I can say is build, build and build. Your college degree, your certifications won't help you to get a job, but your skills and ability to build products will. Learn and build. Write blogs, share your story. The more you will put yourself out there, the more you will create good opportunities for yourself.

Take responsibility for your own career. The internet is filled with resources. Learn how to learn. Join a community. Hang out with folks who inspire you and explore as much as you can.

📺 I have one last question, given a big board, which line would you like to write there?

There is one quote that I really love. it says making mistakes is better than faking perfections. I would write that.

🚀 Stuff that I built

• Tabwave

  

• CoverView

  

• Devspace

  

Insightful blogs to check out

• I Launched my side project on Product Hunt, here is what I learned.
• When frontend devs meet free APIs
• Don't just learn to code, learn to create
• Github repositories every aspiring developer should check out

🚀 Shoutout to Kiwismedia

Kiwismedia is a Home for multi-skilled creators and makers. Discover individuals sharing their best works.

I am really grateful to be a part of this. Special thanks to Anshu Shandilya for all the good questions. I never did something like this before and learned a lot about myself.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

First of all Hashnode's UI is so good that I couldn't think of something I could change. But still, I spent some time and made a few little changes. Have a look around blog.rutikwankhade.dev

1. Header of the blog

I felt there was more space in the header that can be reduced. So I changed it and made it look like a navbar. Again this is my personal preference.

2. Centered everything in the author area

In mobile view, the elements in the author area were aligned left. So I made it centered. If you are changing a layout, be careful. There is a high chance you will mess with its responsiveness.

3. Blog cards and background texture.

This wasn't needed as the original UI is super clean but I did it to give it a unique look. While changing colors, don't forget to consider dark mode too.

4. Styled load more button

Any shade of blue and I am in. I changed the color of the load more button to my favorite color.

5. Rounded blog cover

Added border-radius to the blog cover and some margin to the top. Also, I reduced the font-weight of the title by 100 and reduced its font size on small screens.

6. Cool colors for links.

This is inspired from Mohd Shad Mirza's blog. I really liked this one.

7. Styled Quotes

Why not add colors to the quotes, This has made the blog post more intuitive.

8. A little shadow on similar posts

Now, it feels like my own personal blog. I do have a blog I made a long time ago with Gatsby. Setting it up wasn't easy. But now that I have more than I wished with Hashnode. I don't think I need it anymore.

I was going to share the code. But then I thought why not let you guys be a little creative and try by yourself. After all, it's just a few CSS rules applied to specific classes. By the way, it's only available for hashnode ambassadors. So if you are not, you might need to wait till it becomes public for everyone. Also, if someone from hashnode team is reading this, please let me know if I changed something I shouldn't.

✨ Here are a few customized blogs to check out.

• https://blog.sebastiangale.ca/ by Sebastian Gale
• https://lo-victoria.com/ by Victoria Lo
• https://catalins.tech/ by Catalin Pit

Also if you have tried this feature, drop your blogs below. I would love to check them out.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

More than 2 weeks passed and I didn't even start working on the project. Everything was new and a bit intimidating and I couldn't build it in time.

But I still wanted to participate! So I decided to pivot at the last moment and come up with something else. I was running out of both ideas and time. What should I build? a recipe app? a movie app? Nope. It had to be something that would be useful for me in my life.

💡 The idea

Did you hear of daily.dev ? It's a new tab extension that curates blogs and news for developers from different platforms. I have used it. But it was too much content for me. I realized I check only 4-5 developer platforms daily. And sometimes I don't stay for long, I just want to peek, see top posts and get back to my work.

Wait, what if I build something so that I won't need to search and switch tabs for these websites? Well, that sounds like a good idea.

🚀 Introducing devspace

Get top posts from the best developer platforms in one place.

The app is deployed on Vercel and the code is open-sourced on Github.

Demo

See live : https://devspace.vercel.app/
Github : https://github.com/rutikwankhade/devspace

📰 UI/UX

Even though it was a small app, creating a basic design prototype is always a plus. It helps to move in the right direction. I used excalidraw. it's a great tool to create quick sketches.

Layout

For the layout, I divided the screen into two parts. One for navigation and another for the main content. I thought of it as an open book.

Colors

I tried to be consistent with the colors and used colors that complement each other. Also, made it super clean and intuitive.

Screenshots

👩‍💻 Technologies used

• React
• TailwindCSS
• APIs - Hashnode, dev, HackerNews, Github, and Product Hunt
• svg-loaders-react for displaying a loader while the app fetches data
• react-reveal for smooth animation on scroll

🌧 Challenges faced

• Implementing the APIs was a bit frustrating. Reading the docs thoroughly helped a lot. APIs of Hashnode, Dev, and Product Hunt was easy to use and implement. But Github doesn't have any endpoint for getting trending repositories in its official API. Luckily, I found an unofficial API. Thanks to the open-source developer community.

• HackerNews API provides an endpoint to get only the ids of top posts. So I had to fetch individual posts with these ids.

• Few blog posts didn't have a cover image, so I used Lorem Picsum's API to set random images for default.

✨ Conclusion

I built this in a very short period of time and still made it look good and useful, at least for me. That's an achievement! So this is my submission for the #VercelHashnode Hackathon. 🙌 Cheers!

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

In late December, Hashnode announced #ChristmasHackathon. And I decided to use it as a trigger to push myself to build something. I had few ideas so I started working and I built Tabwave. Well, I won't be discussing how and why I built it because I have already talked about it. Check out how I built my own productivity app here.

I launched it last week on Product Hunt and it was the #5 Product of the day with 300+ upvotes. Also, it made it to the Product Hunt's newsletter too. For me, it was a 🏆 huge milestone.

I have learned a lot in these past few days about shipping products. So I am going to share my experience here.

🚀 Before launch

👩‍💻 Build in Public

Keep sharing about your progress. It can be a tiny feature you added, a problem you faced, or a nasty bug you fixed. Share your wins and failures. Document everything. That will help you build your audience and create excitement among early users. And I feel Twitter is the best place for it.

Documenting your journey + Providing value is the sweet spot I follow. Focus on providing as much value as you can.

✨ Feedback is super important

Feedback is the best thing that will help you and your product grow. The biggest example is Hashnode itself. See the Feature Request section of Hashnode. They listen to the community and give them exactly what they want. That's why we love it so much. So whatever you are building, share with the community. Ask for the feedback and make it better and better.

I collected feedback from the comments in my blog, from Reddit, from Twitter, anywhere from I could get people's hands on it. And that was a crucial thing. Not only they helped me find bugs, silly mistakes but suggested potential features.

📰 Copywriting is a skill

When I heard about copywriting for the first time I literally thought it means copying and writing. 😅 Yeah, I was that dumb. Copywriting is simply writing something in a way that makes the audience curious about it. It's more used in marketing and advertising stuff.

But wait? Why should I care about it. Well, whatever you build, Your goal is to reach more audiences. And in this high paced digital world, it's hard to grab attention in a little span of time. So use your words wisely. Learn how to write an effective copy.

🌐 Name and domain

Before I started building Tabwave, I called it sorted. I loved that name a lot. Later I found out it's already taken. So I had to rename it to Tabwave, which is kind of cool too. That was the moment I realized why developers own so many domain names. Because they buy it even before starting to work the side project, which I think is a smart thing to do.

👨‍🚀 Landing page

It's good to have a landing page for your product and a form to collect emails. My extension wasn't published so I collected emails to notify the users of its launch. So on the launch day, I had a list of 50+ people I could send mails to who are excited to check out my product.

🚀 Launch day

🌀 Product Hunt

Product Hunt is a global platform. Every day, a large number of products get launched by either individual makers or companies. Getting your product noticed isn't that easy. So the main goal is to get your product on the first page. Let's be honest, what was the last time you went on the 2nd page of your google search? rarely right! The same goes for Product Hunt.

I prepared everything like the description, screenshots, maker's comment, etc before and previewed using Previewhunt.

⌚ Timing is important

All we get is 24 hrs. of PST (Pacific Standard Time) to show our product. Every day the list gets refreshed after 24 hours. I had no idea about this, glad I did some research before launch. The sooner you launch, the better. If you launch at around 12 am PST, it will get a longer exposure.

I launched Tabwave around 2 pm IST which is 12:30 am PST. I preferred Friday/Saturday as on weekends there is less competition which increased my chances to get featured.

For the first few hours, Tabwave was in 16th position but then it started getting upvotes and soon I could see it on the first page.

🚀 After launch

👨‍👦‍👦 Find your audience.

Building and launching is one thing but after that is the real game. i.e. Getting it into the hands of real users. Ask yourself, where does your audience hang out more. Is it Twitter? maybe Reddit? or something else?

I shared Tabwave everywhere I could think of like Twitter, Linkedin, relative Reddit channels, discord servers, communities like Indiehackers, Makerlog, etc.

But please don't spam.

If the product is good, people will more likely share it. However, it is suggested to share links to your landing page and not the Product Hunt page.

🙋‍♂️ Engage with your users

For the next 24 hrs, I was available on all platforms. It was exciting. I was getting a good response. Engaging with the users, their feedbacks, and appreciations was overwhelming.

📈 Monitor the stats

Wait, did you add analytics to your landing page? If not, you should. It will help you monitor the traffic and other stats. I was going to use google analytics but then I discovered Plausible. I felt it's cleaner and much better than google analytics.

Here are the stats of Tabwave after a week.

🥳 Perks

I have made awesome friends on Twitter, 100+ connections on Linkedin. And this week I have been approached by 5-6 folks with job opportunities that I haven't even applied for.

Summing up

That's not everything. It was my first time. Tabwave was just a simple idea. I realized I can do better. There is a lot more to learn. A long way to go. It was a wonderful experience. And I am really excited to unfold what comes next. Everything I mentioned here is from my learning experience. So give it a go, try different things, and keep growing.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

🤹‍♂️ Being productive

We often try to achieve more in less time. I used to think, the more I work, the more productive I become. But I was wrong. There is a big difference between being busy and being productive. I was always looking for ways to be more productive. I read multiple books, used different tools and techniques. But deep down I felt I need a simple, minimal productivity tool and the idea of tabwave was born.

💡 The idea

The idea was quite simple. All I wanted was a bunch of productivity tools like a Pomodoro clock, a to-do list, sticky notes altogether. Nothing fancy and complicated.

I wanted to have all these tools somewhere I can see all day. And I thought what's better than a browser's new tab. Also, I never knew how browser extensions were made so this was a learning opportunity for me to explore it closely.

🎨 The design process

I am no designer, but I feel I have a good taste in design. I looked for inspiration and started visualizing the structure of the design. I spent hours figuring out the layout. I kept improving it little by little as I progressed with its development. It was an iterative process. These are the steps I followed.

• Divide the whole app into different components.
• Create a minimal user interface for a single component.
• Work on the functionality of that component.
• Improve its UI to give it an aesthetic look.
• Repeat

Technologies used

• React
• Tailwindcss

🌊The challenges

The biggest challenge was turning a react app into a chrome extension. The problem comes when react creates multiple chunks of js files in the production build by default. And it violates the CSP (Content Security Policy) of the chrome extension.

I was stuck. I thought I won't be able to fix this. I spent the next few days looking for a way to make it work. Eventually, I tried everything I could find. Creating a .env file with INLINE_RUNTIME_CHUNK=false worked but it wasn't the best solution. Finally, I found another way by configuring the craco. I am glad I didn't give up.

📦 The final product

I am very happy with the final outcome. This is exactly what I wanted to build. Here are a few cool features of Tabwave.

• I wanted it to be a new tab chrome extension without losing the default feature of adding shortcuts in chrome. So you can add shortcuts to your favorite sites.

• Can I call it a productivity app without a to-do list? No way. Get things done by managing your daily tasks.

• A Pomodoro clock to increase your productivity. Trust me, I am following the Pomodoro technique and it's awesome.
  • Focus for 25 min on your tasks
  • Take 5 min break.
  • Repeat

• Sticky notes to keep your brainstorming ideas and important stuff.

• If you keep working all day, you might get tired or bored and might want something different to do. Well, I got you covered. Get a random activity idea in just one click.

• Did somebody say dark mode?

🤩 Excited to try it

I have deployed its web version at tabwave.now.sh. So you can try without installing it at all. And if you love it, then only install it. Sounds okay! It's available on both Chrome and Firefox browsers.

Install Tabwave on Chrome or Firefox.

Wrapping up

This has been a great experience for me. The excitement of building something I always wanted to build was awesome. I can't explain how joyful I felt after fixing that nasty bug or completing that small feature. It's so satisfying. Sometimes it got frustrating, but eventually, I somehow ended up solving the problem.

It's not just about coding. It's about problem-solving. The more you do it, The better you become. I have always believed in learning by building and I will encourage you to do the same.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

✍ I started writing

Writing is the best thing I did this year. I created my blog on hashnode back in 2019 but it wasn't active for months. In 2020 I decided to revive it and started writing again. I am glad I discovered hashnode which I think was a turning point for me. I always believed in the mantra of learn-apply-share. So I started sharing my learnings, experiences, and documenting my journey.

I had no idea until Mohd Shad Mirza introduced me with #TheNextBigWriter. His feedback was crucial and helped me improve my writing a lot. The community has given me so much and I am thankful for it.

This year I wrote 14 blogs which got around 25k+ views

🥑 The developer community

The more I got involved in the developer communities, the more I was learning new stuff. I became active on Twitter and started following folks who inspired me a lot. I thought Twitter is a waste of time until I realized how powerful and helpful it can be. I learned to use it the right way. I kept sharing and interacting with awesome people. I learned a lot just by watching what they do.

🛠 Learning by building

When everyone else I know was running for collecting certificates by doing courses after courses I realized it's not helping me much to learn and grow. So I started focusing on building stuff by myself. And I learned a lot by creating my projects, fixing bugs, finding solutions, writing bad code, and then trying to improve it.

I built so many projects by applying what I have learned. I Contributed to open source and even built open-source projects. CoverView, the one I built for fun has even got 100+ stars on GitHub. And last week I won the giveaway of Rs 5000 from Devfolio because of this project. This is the first time I earned money by writing code.

👩‍💻 Skills

I got better at writing code. I learned JavaScript, react, and played with styled-components and TailwindCSS. I started seeing apps and websites from a developer's perspective. I transitioned from a code newbie to an intermediate level. I got better at communicating with people and expressing ideas too.

🦄 Giving back

I am a part of the Developer students club on our campus. So I conducted my first ever live session on youtube this year.

I was nervous and in self-doubt but the end, it was all worth it. I learned a lot and had a great experience. Now I feel maybe I can start a youtube channel someday.

📖 Books read

I am an avid reader but I read only a few books this year. Rather than just reading so many books I decided to read just a few and try to apply them in my life. Inner Engineering, Atomic habits, and deep work were a few of them.

⛈ Burnout and failures

I had ups and downs. The journey wasn't all about milestones. I have failed. I have failed a lot. And learned from my mistakes. I pushed myself so much and faced burnout. I committed to stuff and failed to complete it. But I realized the importance of having a balance of everything. I took breaks, started new hobbies, and learned to appreciate other things in life.

⏳ Finishing up

Apart from these, there are so many little things I learned and experienced. And each one of them has helped me become a better developer, a better person. I am grateful for all the people who encouraged me, mentored me, and gave me feedback to improve.

I encourage you all to review your year and try to write about it. It helped me understand how far I have come and how far I have to go.

Well, I even started with my next year's plans. There is a long way to go and I can't wait to explore more.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

When you are starting your career, having a good mentor helps a lot. Someone who has gone through the same path you are about to start can make things easy for you. I have always tried to learn from experienced people by asking the right questions. You can learn a lot just by watching them, listening to their stories and experiences.

🤯 The Trap of failure

I have failed multiple times in the past because I tried to learn everything all at once. The problem is that we want to achieve more in less time. I want to learn about UI/UX, JavaScript, react, node, data structures, algorithms, aptitude, and a lot of stuff. But we need to understand that we can't learn everything all at once. We have to respect the process. There are no shortcuts.

So what I am doing right now? How I am taking this?. one-word priority. I know what are my priorities. Everything is important but the question is what's more important. The trick is to delay the less important stuff.

📅 This week I learned

This week I learned about react hooks and worked on a few small projects. Also, I started working on a side project I was thinking of for a long time. Will share about it once it is completed.

Absolute Imports

Do you know you can configure your create-react-app application to support importing modules using absolute paths?

Just create a jsconfig.json file like this in the root directory. jsconfig.json reference

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

And now you can get rid of ../.../ and import modules like

// import Navbar from '../../components/Navbar';
import Navbar from 'components/Navbar';

🎉 Project hunt

Wait, do you mean product hunt? No. We in the FullStackCamp community have started working on an open-source community project similar to product hunt. Here rather than products we share projects. 😅 So project hunt.

I am working on mostly the frontend part with react and tailwindcss. And the good thing is the mentors share valuable feedback on each PR which is helping me learn from my mistakes and get better at writing quality code.

Learn more about FullStackCamp

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

📔 I don't know Js yet

Tutorials are great but they don't provide a deeper understanding of the language. So I picked a book series called "You don't know Js" by Kyle Simpson. It focuses on the core mechanisms of the JavaScript language. After going through a few chapters I had to say that I don't know Js yet.

Its first edition is free to read on GitHub. And I would highly recommend for anyone who wants to deeply understand JavaScript. Not recommended for complete begineers.

⚛ ES6 and react

If you have spent enough time with JavaScript and want to jump straight to learning react, Wait. Have you learned about ES6? Because If you haven't, you might want to change your mind. Let's see why.

🤷‍♂️ What is ES6 and Why it's important?

ES6 is the 6th version of ECMAScript, (a standardized name for JavaScript) which was released in 2015 with new features and enhancements. And react uses some of its features like classes, modules, destructuring, etc. So if you don't want to scratch your head and wonder what's happening while learning react, Take some time and learn ES6. It will help you understand react better and easily.

I will give you a brief idea about some of its features.

let and const

Earlier we used var for declaring variables which is function scoped, but ES6 introduced two new ways. i.e. let and const which are block-scoped. Anything inside { } is a block. for ex. for loop, if-else.

// value can be changed.
let someVariable = 12; 

// read-only, value cannot be changed
const PI = 3.14;

Template literals

Template literals are another way of creating strings. You can create multiline strings and can embed variables and expression using ${expression} syntax.

let age = 20;
console.log(`Hi, I am Rutik, I am ${age} years old.`)   
// Hi, I am Rutik, I am 20 years old.

Arrow functions

Arrow functions are mainly syntactic sugar for defining function expressions.

// Regular function
function sum (a,b){
return a+b;
}

//Arrow Function
var sum = (a,b) => { return a+b; }

The primary use case of arrow functions is for functions that get applied over and over again to items in a list. For example, if you have an array of values that you want to transform using a map, an arrow function is ideal. But we can't use arrow functions in every situation. There are certain limitations. read more

In arrow functions, the behavior of this is different. Arrow functions do not default this to the window scope, rather they execute in the scope they are created.

Modules

A module is nothing but a JavaScript code written in a separate file. Before ES6 we had to use libraries like CommonJS, requireJS, etc to work with modules. But now with ES6, JavaScript has its own built-in modules. The idea is to access a piece of code, only when needed.

Import and export

If we want something declared in a module to be available somewhere else, we export that module using an export statement. You can export any top-level function, class, var, let, or const.

// utils.js
export const pi = 3.14;
export function add(x, y){
    return x + y;
}

All this exported code will be available where we import it.

// app.js
import {pi, add} from utils;

We will use the same concept while dealing with components in react.

Class

ES6 introduced a new syntax for creating a class.

class Person { 
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }

   sayHi() {
    return ('Hi ! I am ' + this.name + ', I am a ' + this.role);
  }
}

let person1 = new Person("Rutik", "Frontend developer");

person1.sayHi(); 
// returns "Hi ! I am Rutik, I am a Frontend developer"

Destructuring

Destructuring, the name itself suggests breaking down a complex structure into small individual parts. We can break down an array or object into individual variables.

Array Destructuring

let a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

Object Destructuring

const student = {
    firstname: 'Jhon',
    lastname: 'Doe'
};

// Object Destructuring
const { firstname, lastname } = student;

console.log(firstname, lastname); // Jhon Doe

You will use these concepts in useState hook or while sending props to a component in react.

And there are more such features like

• promises
• default function parameters
• rest operator
• spread operator
• and many more.

A good grasp of these concepts will help you in the early stages of learning react. Next, I started with react fundamentals and brushed up a few basic concepts like components, props, state, etc. I Will talk about it more in the next week. Till then goodbye.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

It's week 2 of my #12weeks12blogs challenge. And I must say it's not easy to stay motivated all the time. I realized the importance of knowing your next move. Discipline is hard. So I spent an entire day thinking, planning, and digging my bookmarks of resources, to create an ultimate plan based on my goals.

🐣 Back to basics

It's weird. The same topics when you revisit after a long time, you understand a lot differently. You get a new perspective and lots of ' Oh, so this is how it works' moments.

This week I revisited DOM and it's basic concepts like

• Accessing dom elements
• Traversing the dom and making changes to it.
• Handling different events in JavaScript

And made a simple app that counts characters, words, and estimates reading time while typing. It was super easy and fun. You can see it live here.

One good thing I observed was how I was coming up with better solutions every time. It's a big win. And that brings me to the importance of writing clean code.

🤷‍♂️ Why clean code?

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." - Martin Fowler

Even the bad code works well. Then why should I care about writing clean code? It's simple. Clean code is easy to understand, change, and maintain. If you want to be a good programmer, clean code is important. I went through the code I wrote a year ago and now I know. When I first heard about clean code, I thought it's just indenting the code well. But it's way more than that. Here are a few things I learned about clean code.

• Use meaningful names for variables, functions, classes, etc. Robin Wieruch has explained it really well in this blog.
• Make your Functions do one thing
• Write comments only when needed. Good code mostly documents itself.
• Don't repeat yourself.

It will take some time and practice for me to write clean code. It's an iterative process of learning and improving. Clean Code by Robert Martin is next on my reading list. But for now, this repo is enough to get started.

✅ Unit testing in JavaScript

Testing is simply checking if our code is working right or not. And unit testing is a technique where we divide our code into small isolated units and then write tests to check if the unit works as expected.

I explored Jest, a popular JavaScript testing framework, and wrote my first unit test. The jest docs are pretty good. And this series on the unit testing by fun fun function is too good. Testing is an important aspect of software development and I will definitely dive deep into it in the nearby future.

So far it's been a great start for me, and I am very excited to learn more in the upcoming weeks.

Thread of the week:

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy Learning!

I was a complete beginner. I knew nothing. The communities played a big part in helping me figure out what to learn. Throughout the year I kept learning and pushing the code. To be honest those green dots were so addictive that I used to try so hard to maintain the streak. Now I know how harmful it can be. I know. It's not the best way to measure someone's work. But looking back, I can see my progress, what mistakes I did and the lessons I learned. Though I don't care much about the stats anymore.

A fresh start

I am more into the process now. And the best way to track my progress is to document the process. I know some tech, made a few projects too but now it's time to start afresh.

So what's the motivation?

• For a long time I felt like I am not utilizing my full potential. I believe I can do a lot more and that pushed me to make a move.
• I finished reading "Deep Work" by Cal Newport. And I want to implement it and make a difference in my professional life.
• Recently I have become a part of a mentorship program called FullStackCamp by Deepak Kumar which will help me learn and apply more.
• I will be graduating in 2021 and I want to be ready to face the real world.

The challenge

So I am taking the challenge of writing a blog every week for the next 12 weeks. I will write about the things I learned throughout the week, the resources I used, the ups and downs, and the whole process of learning. I will document everything.

I know committing to something is super easy. Execution is what makes the difference. I am well aware of all the challenges I have to face and the sacrifices I have to make. It won't be easy. But I will give my best.

📅 The first week

The first week was all about brushing up on my fundamental skills.

• I read about HTML and CSS and got to know some new stuff that I didn't know earlier.
• Created a simple portfolio site and practiced on the Freecodecamp's curriculum.
• Learned git concepts in deep and started using emojis in my git commit messages. It's cool you know. You can follow Gitmoji's guide or you can follow this simple guide emoji-log for commit messages.

Also, I love watching talks, whether it's a ted talk or some other tech conference I enjoy watching them. So to make this journey more interesting I will be sharing my favorite talk every week here. Maybe an insightful Twitter thread too and many more.

So this is exciting and fun. Let's see how it goes. `

Talk of the week: The Super Mario Effect - Tricking Your Brain into Learning More | Mark Rober

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy Learning!