Welcome to the first entry in this series. I'll be detailing my journey in making my first consumer-facing product: Admitr. Admitr is an idea I came up with last holiday, and since then it's gone through some iterations in my head. With the growth of the creator economy, I believed Admitr could be something big. I lost some motivation around February but decided to resume last week. To hold myself accountable, I'll be documenting my journey in making this app. I have another SaaS idea that I plan to document as well.
Right now, my motive for finishing is not really to make a viable business but to just use this as a proof-of-concept. If a viable business comes from my efforts, well so be it.
The idea: I'm creating an app that will allow users to make money through the platforms they already use, such as Zoom and Instagram. Of course, there's more to it, but that's the gist.
My first stack: I started this project with a HUGE stack: Laravel and NuxtJS. In actuality, each of these technologies is full-stack. So why put them together?
Well, I love Laravel. Plus, Laravel has far superior tools with authentication and API building. Ok so why not just use Blade as your frontend?
Well, I have nothing against Blade, it's just that I hardly ever use it and I preferred to use a JavaScript framework in the frontend to make frontend logic much easier to work with.
I used NuxtJS on a previous project and wanted to use it again. It was my first serious foray into Vue and I liked it. I enjoyed building with this stack until I needed to do state management. It was then that I realized that my knowledge in Vue wasn't robust enough. I also realized how little I cared to learn more, so I decided to switch to React.
My second stack: I switched this project to Laravel and NEXT.js. Why NEXT?
I love React frameworks like NEXT.js and Gatsby and I've seen the power of JAMstack sites last year. I really wanted to use NEXT.js in a real-world project and I thought this would've been the perfect time. NEXT has so many great tools, including the fact that I could mix SSG and SSR pages. With NEXT I could make the website performant without much work.
To be honest, working through this stack was comparatively a breeze. However, it was here that I lost all motivation completely. The reason is pretty simple: it was too much work! One of the problems was with implementing APIs like Zoom. Zoom needs a backend to interact with, but using my Laravel API to do this would've been more work, so I ended up just using the server-side of NEXT for this. It wasn't too hard since it's basically Node, but it's a lot of work.
Translating from Vue to React was one thing, but when I realized the scale of work to implement proper authentication in both the frontend and backend and other things that make an app an app, my mind just decided to take a rest... indefinitely.
The stack now: I tried Laravel Jetstream and Laravel Breeze when they were released. Both times I tried the Inertia stack and both times I hated the experience. I hated how I had to go to multiple places to learn how to use this stack. However, in March, I watched a live stream of someone building an app with Laravel and Inertia and I decided to give it another shot (FYI, Inertia JS is the glue that connects the React/Vue/Svelte frontend with the backend without any need for an API).
I still was not a fan of the docs when I tried it again, but I understood a lot more than before. Not long after, something I thought would never happen, happened: I enjoyed it! It wasn't long until I wrote my first blog post about making a Laravel Breeze project with Inertia. This is why I decided to restart the project with this stack.
There are a few pros of using this stack:
- Natural routing with PHP. No need to install additional React libraries for that.
- No headaches with complex state and session management as PHP and Laravel have inbuilt tools for that.
- Laravel Breeze makes authentication a breeze.
- A dev can easily choose between React and Vue for the frontend. There's no more hard work to get React to fit in now because all we have to do is run
$ php artisan breeze:install react.
- Laravel Mix is excellent, and we can install just about any styling system and libraries with relative ease, such as Emotion and PostCSS.
What now?: This is the first part of an n-part series detailing my journey in making this project. I like the concept of creating products in the open and I hope I can help it become mainstream. In the next few days, I will be writing a post about the advantages of the LIR stack (Laravel-Inertia-React) compared with other React frameworks and stacks. I'll also be writing part 2 soon detailing the current setup so look out for that.
