Hello everyone, I’m one day late to share with you the progress of Studio. This week went by so fast that I couldn’t work on the project as much as I wanted, but here are this week's statistics.
For this week, I’ve spent a total of 6 hours and 50 minutes working on Studio divided like this:
Discovery: ~20m (looking at other SaaS user management)
Design: ~1h (initiating figma and designing the user management feature)
Delivery: ~4h30 (mostly coding)
Marketing: ~1h (engaging on social media and writing this article)
Small week, small increment
Because Studio is a side project, there is time it’s hard to work on it. Sometimes because of motivation, or because there is so much main work and stuff to do during the week it can be easy to sacrifice the side project.
But I want to publish an episode every week, and to do so I need to work on Studio even a little. And that’s why building in public is powerful, it motivates me and helps me find the time to work on the project.
Even though… I’m one day late on the episode!
So, if like me you struggle to keep working on your projects, give yourself a wider goal that will motivate you no matter what. And feel free to reach out to me to discuss your project and give each other motivation 💪
Profile settings
This week I focused on another feature that you find on every SaaS: the profile settings page of the user.
Usually, this page allows users to:
Update their name and profile picture
Modify their email
Modify their password
Clerk, the user management platform I’m using, has obviously all those features. But as I said last week, their pre-built components are nice but they do not fit into the design of Studio.
So I’ve built the settings page, which I divided into those three categories. The profile page is accessible via a user navigation button in the top left of the layout.
User infos
This one was fairly easy. On Clerk, your users can have an avatar, a first name, a last name, and/or a username. I’ve activated all these features in my Clerk instance and created a page that displays all those data in an editable form.
One thing I could improve is the avatar input. When you load an image, it’s not displayed until you press “Update”.
Emails
This one took me quite some time… Clerk allows users to have multiple emails associated with an account. One is a primary email, and then you have verified / unverified emails.
I’ve divided the part into three:
Verified emails that you can delete or set primary. (Primary email can’t be deleted to make sure the user always has an email)
Unverified emails that you can verify with a code, more on that later.
New email input to add an email.
So, what took me that much time? I’m using server actions with NextJS to make all the custom Clerk calls in the server and Clerk has a great backend API that allows you to create, delete, and update emails associated with the user, but not to send the code or validate the email with said code.
Only the client side of your application can do that and it’s hidden under the user object that contains emails that contain the functions needed to do so….
Anyway, here is how it looks when you open the unverified email. You have an OTP code input (thanks to Shadcn/ui) and a button to send a new code if needed. I’ve added a 30-second delay so that a user can’t spam-click the button.
Password
Even though Clerk API allows to update the password without the current one, I’ve added the current password input to validate first it’s the right one before updating the user.
I also added a confirmation input, a standard feature, to make sure the user writes the same code twice. I validate that they are equal before sending it to Clerk.
To help with security, I ask for a password with at least 8 characters, 1 uppercase, 1 lowercase, and 1 number.
Conclusion
This week was short, but I’m not too far from the end of the user management part. While working on this part of the project, I’ve realized that it’s the base of any SaaS project.
So, I was wondering if I should package all the custom user management I’ve done in NextJS with Clerk to publish it. What do you think?
This is it for this week! Thank you for reading this episode, DM me to tell me if you liked this format or not ?
Subscribe to the newsletter, follow along on Substack, and don't hesitate to reach out on social media to discuss Studio or any subject. I’ll see you next week ! ☀️