Sutle: The beginning.
Part 1 of Building Sutle.
This is part 1 of 3 regarding my experience in building Sutle, a recent project of mine that I launched on Product Hunt last May 1, 2021. I’ll be telling about its birth and the struggles that I experienced as a developer.
Table of Contents
A quick intro…
Ending the year in a sour note.
Going beyond tutorials.
Doing Sutle full-time.
Creating the “portfolio” page.
Picking my kind of styling library.
Ending note.
A quick intro…
For those who haven’t known me yet. I’m Joeylene a.k.a. jorenrui. I’m a full-stack developer with 1+ years of professional experience based in Manila, Philippines 🇵🇭
As of now, I’m experimenting on different ways of creating content, specifically trying out streaming on Twitch and writing on this substack.
Ending the year in a sour note.
It was Christmas break that 2020. Most of my free time before was spent hanging out with my friends and bf, playing billiards, and doing outdoor activities to keep my body from going stiff. But with the pandemic, I didn’t have anything to do except to read some manga.
Note: Big rant ahead, feel free to skip this.
Being forced to stay at home and listening to the news made me sad all the more. Add that to the fact that my virtual graduation happened that month and the OIC didn’t give us the promised award of “Best Thesis” due to me and my thesis mates not wanting to do something that is out of the scope of our thesis. Imagine, we listen to his absurd demands, did a full-blown system that has an enlistment, grading, printing, course management, curriculum builder, a website with blogs, etc, and did impromptu presentations to the school director (using us to get I dunno a promotion?). Then just cause they can’t afford to pay for a cloud server (the OIC even tried to borrow my friend’s credit card like who does that?), they want us to make it into a LAN setup. But we had enough, our thesis proposal in which they approved was a web app. We had enough of the school’s toxicity, and my pride wouldn’t allow my app to be used by someone so ungrateful and someone who can’t even invest his money in something that would benefit the school. In the end, I just open-sourced the code. If it was okay to remove that school from my resume, I would happy to do it. To hell with them. Thinking about it, that was my first web app aside from tutorial apps.
Tho I’m partly to blame cause I finished the initial app within weeks. I think they felt that they should challenge me by making the scope bigger. Moreover, they could make me do their bidding cause they know I just wanted to graduate and get this over with. In short, I’m a pushover, which I’m trying to work out even now.
At that time, I was also contemplating resigning from my first developer job and taking a break by working on a side project.
With that said, I decided to spend my Christmas break eating spaghettis and learning TypeGraphQL.
Going beyond tutorials.
For some time, I’ve been wanting to create a side project since I don’t have one yet. I guess I was kinda fascinated by what others were doing. They were building cool stuff that they like. When I think about it, I haven’t done that before. Most of my apps were tutorials or either a school project or a requirement of some course. So I don’t have a side project I can truly call my own. With that in mind, I was eager to make one and been thinking of “what” I can do. But for now, I decided to spend my Christmas break studying a new tech.
I’m a fan of Ben. I liked his humor and his content. With that, I checked out his tutorials and found one on TypeGraphQL. I’ve been wanting to learn GraphQL, so I decided that this would be a great start. I was already familiar with TypeORM, NodeJS, and PostgreSQL so there isn’t much that I need to learn. I followed along with the tutorial by building an app and read the docs bit by bit. While building it, I named my repo “Sutle”, a misspelling of the word subtle. The meaning was kinda along the lines of I want to build something quietly that I think it’s important. I don’t mind it not attracting attention as long that I see the value in it. Anyways, I was thinking about creating an app out of it, but don’t know “what” yet.
At that time, I also bought Wes Bos’ ES6 on Black Friday. It was the first course that I ever bought (perks of working, finally have some money yey). Then I decided to go through the modules every day that December. Although I already knew some ES6 syntax, I got to learn something new in that course which was nice.
By building the TypeGraphQL app, I learn about testing using Jest. I also tried to deploy the app on Digital Ocean by creating a droplet, in which I learned how to use Circle CI. Of course, I did encounter some CORS issues only to realized I forgot to “build” the app.
But alas, after the CORS issues, I had problems regarding cookies. I’m mostly used to creating monolith apps using Laravel so I wasn’t thinking that much when it comes to authentication. As for my work, it was already set up so I didn’t get any tasks regarding it. But in this TypeGraphQL tutorial, it was an API-based app in which the frontend is separate from the backend. So this is kinda my first time handling authentication/sessions this way.
I ended up deploying this on Heroku cause I was so lost when it comes to fixing NGINX, that I thought switching from DO to Heroku, might help debugging and DevOps to be easier. This stuff isn’t my strong suit.
Anyways, I got some huge learning from it, especially that I don’t have experience in building a full-blown NodeJS + NextJS app from scratch.
By the end of December, I thought about making learning paths. So Sutle became a platform for creating learning paths. As I became active on social media and put out content like blog posts and shared my apps, I receive DMs from people as to how I learned something. With that, I decided that I can try to organize the resources I found on the web - be it blogs, courses, etc. - and turn it into a learning path. So with that in mind, I thought about what features will Sutle have.
Brainstorming phase.
I was thinking about basing Sutle’s learning path on how Git works. I wanted users to be able to fork learning paths, have multiple collaborators, and create multiple branches. With that in mind, I decided to learn how Git works, specifically I watched “Git Internals - How Git Works - Fear Not The SHA!” on YouTube. I then brainstormed on Sutle’s ERD. Creating multiple iterations until I settled on a design that I think would work best.
As for the UI/UX design, unlike my thesis app in which I built wireframes, I did Sutle’s design on the fly. Kinda like I have a rough layout on my head, then I tried coding it. Just tweaking the code here and there. I know that’s kinda inefficient and not the right process, but I was guilty of being lazy at that time when it comes to UI/UX design.
At first, I was kinda doing some designs but as time went on I realized that UI/UX design wasn’t for me.
Doing Sutle full-time.
By Jan 29, 2021, I was now officially unemployed. I did get some offers and my friends wanted to refer me to a company they knew, but I wasn’t feeling it. I decided ahead of time that I would work on my side project for two months then work by April.
Tho honestly, I was kinda scared at what I did. I managed to save some money that I think might last me for two to three months. I told my family that I have a plan. That I can get a job by April. That I have everything in control.
However, deep down I felt kinda lost. It was hard fighting the thoughts and feelings I was having at that time. It felt like I was useless for not having a job. I was scared that if take too many months off, I might have a hard time getting a job. I was scared that maybe my rate was too much considering my years of experience. Mostly, I felt that I was wasting my time doing Sutle. That I needed to continually earn money to help my family.
So although I started to work on Sutle full-time at that time, I mostly spent my days lying in bed. Letting my negative thoughts consume me. Fortunately, my bf was there to help me get my shit together.
Creating the “portfolio” page.
When I was working on the profile page, I kinda want it to be like a customizable portfolio. Getting inspiration from Brian Lovin and Lee Rob’s portfolio regarding timelines, I decided to incorporate journeys into Sutle. Tho the main motivation was me having this habit of documenting my achievements (even those little ones) in notion and wanting to display it in a more organized way. So the initial result was this Sutle portfolio:
I was happy with the result, so I decided that the “portfolio” will be one of the main focuses of Sutle.
In the future, I’m planning to make it a customizable portfolio wherein you can add your projects, receive testimonies/reviews, post blogs, share your paths/resources, and much more! I was even wondering if I can add “logs” wherein you can create something like a 100DaysOfCode log and then document your progress that way.
Picking my kind of styling library.
When I was working on the CRUD functionalities of the learning paths, I was contemplating on what styling library to use. I don’t want to use Material UI, BaseWeb, or any React component UI library, since I mostly override a lot of stuff there. So I decided to create my own instead. I was also fascinated by a developer that I found wherein he uses the stuff he built in his other projects.
I tried emotion but I had difficulties when making variants. I tried how the team in BaseWeb constructs their variants (yup I like checking other’s repo to learn about their practices, file structure, coding styles, etc.), but as more variants get added, I was feeling that this will be a pain to maintain and hard to read. Tho it might just be that I lack experience in this field so I might not know the efficient way of doing things.
So with that, I decided to search more as to what is out there. By then, I came across Stitches in its alpha form. When I learned that you can do variants are part of its API. I decided to try it out for Sutle.
I quickly fell in love! I love how you can easily create variants, use tokens, use scoped tokens, default and compound variants and so much more.
I was so excited that I submitted my first issue. I’m was kinda anxious when it comes to interacting with others cause I get this feeling that I might get exposed of knowing “nothing”. I know that there’s a lot of stuff that I need to learn, but I don’t really like embarrassing myself in public and getting told that I know nothing when I already knew. So submitting this issue was a huge deal for me, cause I was feeling that I might annoy the maintainers. Anyways, they were nice so I was glad and got over it for now.
With Stitches and Radix UI, I managed to build Minorui in which I shared by March 2021. Tho I guess creating my library made finishing Sutle much slower cause I was building the atomic components like buttons, dialogs, etc. from the ground up (kind of).
Ending Note.
First of all, thank you for reading this post 😊 I hope that this helped you in some way.
This post was in response to my Discord members’ request regarding writing an article about how I built Sutle. I decided to split this post about Sutle into three parts cause it was getting kinda long.
You can check out Part 2 entitled “Sutle: DNS, Emails and Twitter Developer Account Application”. A sneak peek of its contents:
Buying my first domain, sutle.io.
Learning ‘bout sending emails.
Twitter developer account application.
Till next time, ciao!