Last year I wrote my year-end reflection for 2020. Reflecting on your year is to look back and note down the highs and lows, the things you liked, moments you experienced, and the lessons you learned. And I felt really good after reviewing my year. So this time I thought why not create something that will make this process break into small, simple steps.

And so I built myyearinreview

How it started

https://twitter.com/WankhadeRutik/status/1473657950338048001?s=20

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

Upsert the profiles table in the Supabase with data as soon as the user logs in.
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.

form demo.gif

✨ 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.

https://www.producthunt.com/posts/my-year-in-review

https://twitter.com/WankhadeRutik/status/1475765928142852097?s=20

How I built an app to reflect on your year 2021

Comments (12)

Side Projects

TheMakersClub: a club of ideas, feedbacks and resources

More from this blog

Dev Retro 2022 - From feeling imposter to feeling confident

Say goodbye to boring new tabs

A beginner's guide to server-side rendering

I built an app to crowdsource internet's best side project ideas

Building a bucket list ideas API with Hasura and GraphQL

How it started

Next.js + Supabase

Authentication

Creating user profiles

The review form

Where the magic happens

Dynamic open graph images

Conclusion

References

Command Palette

Comments (12)

Side Projects

TheMakersClub: a club of ideas, feedbacks and resources

More from this blog

How it started

Next.js + Supabase

Authentication

Creating user profiles

The review form

Where the magic happens

Dynamic open graph images

Conclusion

References