I did it! Frontend, backend, database, deployment. It was all me!
...aaaand it's empty.
Today I want to share my journey on a personal project with a huge disclaimer that it's not exciting nor groundbreaking. My intention was not to please anybody with this project, but what I truly wanted when the idea came to me was just to create a password-free authentication stack then deploy. It's that simple. Or so I thought.
Quick backstory...
Hello! I've been on DEV for just less than a month but I already consider it my new Twitter. Not that my DEV feed is filled with sarcastic comments or witty retorts (which my Twitter unfortunately became), but what I enjoy is the streamlined feed of user-created tutorials intertwined with their own personal stories. Dreading to open Twitter just to quench my thirst for 'social life', DEV quickly transformed from a mere alternative to my go-to medium for online interaction.
As a young developer, it's exciting to dabble in the newest and hippest technologies. Jumping on the ReactJS bandwagon when I was just starting out a little more than 2 years ago, the concept of reactive components and seeing your page automagically update without refreshing was apple to my eyes. About a year after, my radar picked up VueJS. It steadily gained its reputation for having a flatter learning curve than React. Decided to try it out and much to my suprise, Vue components proved to be easily digestible. Without hesitation, I turned my back on React and picked up this young, shining, Vuetiful framework.
Anyway, the app
About a week ago I was laying on my bed getting ready to sleep when the idea came to me: create a template to bootstrap my process and do the heavy lifting every time I want to create a new web app. In other words, a boilerplate. If I do it right, I will effectively skip several forks-in-the-road such as choosing a frontend framework and a corresponding CSS library, what language to code the server in, which database to use, and what authentication method to implement. If I do it wrong, we'll, at least I'll learn.
Action-first mindset
When learning something for the first time, my manager used to say "first, make it work, then understand it later." This mindset is perfect for lazy people like me who digress from crafting attack strategies and making burndown charts. Just do it! What could go wrong! Break things but only just before reaching the point of no return. Break things then fix them.
So I took it upon myself to learn the basic devops workflow. No more procrastinating by reading one tutorial after another.
One of my favorite productivity YouTubers said "...with an action-first mindset, you're going to get burned. But the lessons you get by getting burned are the ones you remember." After several days of getting entrapped by the vicious cycle of installing packages, learning how to use them, breaking a previously installed dependency, and copy-pasting stackoverflow answers, I was able to duct-tape the following technologies together:
| Technologies I learned | notes | |
|---|---|---|
| Frontend | NuxtJS, Vuetify, Vuex | The trickiest part was binding the port in the host machine's IP. Also, Vuetify is magical 🎆 |
| Backend | ExpressJS, NodeJS | Created public and protected RESTful APIs |
| Authentication | JWT, OTP | JWT was pretty straight forward: generate a token from a secret + the given email, then saving in the browser storage and/or cookies was automatically handled by Nuxt. Had to use a simple random string generator for the OTP |
| Database | MongoDB | First time to use MongoDB, let alone a NoSQL db |
| Caching service | Redis | Storing OTPs for a certain duration |
| operations | Docker | Learned how to build my app into an image and peform proper tagging. Push it to Docker Hub for later use in a cloud VM |
| deployment | AWS | Provisioning an AWS Lightsail instance and create a startup script. Also, deploying in GKE incurred about $5 for just one night. True story! |
I'll spare you the implementation choices because they're all personal and highly opinionated. What I'm excited to share is that I was able to put everything together! Definitely still a newbie in this industry, but there's not a single strand of doubt in my mind that I leveled up! Sure, if we take a deep dive into the code, it's still rough on the edges. But hey, how many people can say they deployed their code on the public internet? 😉
If you're still reading and want to check it out, visit the app here and the code here. Please be gentle, the VM I provisioned only has 512MB RAM 😆.
What do you think? Did I achieve my goal of creating a password-free authentication? I'd be delighted to hear your thoughts.
Thanks for reading!
Latest comments (2)
This is so so amazing!!!! Awesome stuff!!!
I love the fact that you managed to create a great boilerplate for someone else starting, and it goes to show just how much the development landscape has evolved in recent years.
I've only recently started experimenting with Svelte and I ended up going with the sapper sample app. I love also how easy it is to wire up multiple different services to provide you with DBs, hosting, and much more for 100% no money.
This is awesome!
Thanks you! This project means a lot to me. To echo Neil Armstrong, it's one small step in web development but a giant leap for my personal growth 😊.
I've seen the Svelte keynote by its creator in YouTube and I strongly agree with the premise that webdev should be as ubiquitous as spreadsheets. Going to try it soon!