Lessons Learned from Building a SaaS Challenge

Introduction and Woovi ♾️ Challenge

Deploying a project can be a daunting task, especially when it comes to infrastructure. As a developer, I had to face several challenges while deploying my latest project, and in this article, I want to share my experience with you.

It all started with my curiosity and a willingness to create a SaaS, but I didn't have all the knowledge to do a full project and deploy it by myself. I'm a Front-End developer and have already worked as a Full-Stack T-Shaped developer. I like to think of myself as a Front-End ninja who can CRUD like a boss! (Just kidding, but it's always good to have a bit of swagger about our coding skills.)

While I was at the Sibelius Discord, they sent me these Woovi challenge link .

M.V.P - What is my CRUD about ?

This project is made for all instrumentators and doctors who want to plan their surgeries. I dedicated it to my cousin Vinícius, who works as an Instrumentator, and I gave him the idea to make his job a service and made this project to help him never lose an excel plan again 😄.

For now, it is a simple and well-done CRUD, just to avoid using Excel and to improve the UX.

Lets code ! Monorepo with turborepo

First of all, my project consisted of only a backend and frontend page. So I realized that it would be easier to maintain and deploy it in AWS with a monolithic architecture.

Luckily, I was able to leverage the power of TurboRepo, a monorepo management tool that allowed me to manage multiple projects with ease. It was very useful, and you can see the documentation here: https://turbo.build/

Front-end 💄

Typescript, Next, Apollo-GQL, UnForm and Tailwind

This part should not be a hard challenge for me because I have been developing front-end pages using React and other technologies to improve high performance at the client-side for three years now.

But, I wanted to take it to another level and create the fastest app ever with SSR Next.js and cache manipulation using Apollo-Server.

You can see the explanation about the cache manipulation in the first video.

Server-side rendering is a powerful technique that allows for faster page load times and better search engine optimization. However, it can be challenging to set up, and I had to overcome a few roadblocks before getting it right.

Finally, Apollo-Server cache manipulation was another hurdle I had to overcome. Cache management is a critical aspect of performance optimization, and I had to ensure that the cache was working correctly to deliver the best user experience.

Back-end 🧶

Typescript, Node, Graphql, Apollo-server, MongoDB

Working with this stack presented some initial challenges, but I found the process of learning and implementing these technologies to be both enjoyable and rewarding. With the right resources and mindset, it's amazing how quickly one can pick up new skills and technologies.

Actually, the backend was the easiest part of the whole project. It was funny to learn a new way to CRUD and do the Authentication/Authorization with a minimum of security.

All done , let's Deploy 🚀

The first challenge was choosing the right platform to deploy my project. I had studied AWS EC2, and it seemed like a good option to set up an instance and use Ngnix, but after doing some research, I decided to use Railway to deploy the backend and Vercel to deploy the frontend. Both platforms have an intuitive interface and are optimized for the technologies I used in my project.

In order to do this, I spent some time researching the possibilities in the DevOps and infrastructure world, and it was amazing to learn about these new and important ways.

Also, I tried to upload my server on Vercel, but I realized that Serverless Function was not the best way to set up a server at Vercel. So, after opening and closing an issue at Vercel, I explored other options.

However, deploying the backend wasn't a walk in the park. The project was built with TypeScript, Next.js SSR, and Apollo-Server cache manipulation, and getting everything to work seamlessly was a challenge. I had to tweak the configuration multiple times, and I spent a significant amount of time reading the documentation and seeking advice from online communities.

Conclusion

In conclusion, deploying a project is never easy, but with the right tools and mindset, it can be an enjoyable and rewarding experience. By overcoming the challenges I faced, I was able to deliver a high-quality product that I'm proud of, and I hope this article can inspire other developers to tackle their own deployment challenges.

I finished and learned a lot from the project, really. I am a front-end developer, and I have worked as a full-stack developer before, but I have a lot more knowledge in front-end. I proved myself a lot in this challenge, and just by having learned and proved to myself that I can LEARN QUICKLY was already great. I also learned a lot about infrastructure, I had to research more in-depth, and it was very beneficial.

Now i feel that i can learn everything
in a self-taught way. I prove it, to my-self. And I'm feeling comfortable to start a new Saas to really make real money. 😎