One App Multi-stack (OAMS) Projects

Want some music while reading? 🎵📻

The Story Behind The Projects

My journey with full-stack development started since the middle of 2021. I started learning this from the FullstackOpen course. The course contains 13 modules at the moment of writing and I have completed all of those. The amount of knowledge is huge 😵, therefore, I decided to start these OAMS projects is to practice my full-stack development skills.

Limitations had been set for these projects since my skill levels for stacks are different. I chose not to implement the authentication feature so that the complication is reduced as much as possible. Moreover, I used MaterialUI for designing the UI to save time on styling the app.

MERN Stack Version

MERN stack has always been my favorite. Reasons?

• React is my main frontend framework at the moment
• Node and Express are also my main backend technology
• MongoDB and Mongoose are easy to implement and scalable

Everything was smooth in the development process. I have to admit that the current implementation is not totally perfect and has room for a lot of improvement. For example, the usage of context API for managing the todos and projects is not a good practice. I should have used Redux for state management instead. The reason why I didn’t use Redux from the start was that the next stack I was planning to code was the MEVN stack. My Vue and Vuex knowledge was still pretty limited at the time. Consequently, I avoided using state management tool all together.

MEVN Stack Version

The MEVN version project could be found here

I have thought about learning Vue for a while. Vue is a young and potential frontend framework that is now receiving a lot of attention from developers.

After finishing the MERN stack version, I immediately started to learn Vue in 2 days to move on to the MEVN version.

Vue is a nice framework to use. For many developers, it’s easier to code in Vue compared to React because Vue separates HTML, JS and CSS code while React uses JSX syntax. However, I had quite a hard time trying to understand and implement Vue’s hooks since there’re quite many of them and their functions are also totally different.

Vuex was amazing. The idea is quite the same as Redux but I feel that Vuex is easier to implement and leaner. Until this point, I regretted that I didn’t use Redux in the MERN version 😅.

GRAP Stack Version

If you search the internet, I’m quite sure that you can’t find the GRAP stack because I invented this acronym from GraphQL, React, Apollo-Server/Apollo-Client and PostgreSQL 😉.

Why do I choose this stack? GraphQL is debated to be better than REST API and I want to practice using SQL database as well. Implementing GraphQL/Apollo-Server as a backend solution was a bit easier and leaner than Node/Express one. GraphQL was nice to use and I could see its power right away. However, I have to admit that I didn’t make use of GraphQL’s power to the max since I’m still in the learning process. GraphQL is powerful but it’s quite complicated to utilize all of its power.

Docker & Github Actions

In the real life, the project this size for sure doesn’t need DevOps and CI/CD implementations. However, I decided to implement these also for learning purpose. On second thought, I think Github Actions is useful even for a project this size. There were many times that my website would break if there I didn’t use Github Actions. By creating the testing and deployment pipeline, I saved myself a lot of sweat 😁. I recommend it to everyone!

Learning Outcome

Thanks to these projects, I could, at least, now call myself a full-stack developer. I learned so much after this OAMS series and that’s why I want to share my reflection by writing this blog post.

I realized that doing even a small project without any project management technique was a bit cumbersome. Consequently, I’ll for sure use SCRUM or at least a Kanban Board to management my project.

Stay tune for my next projects! 🤘