One of the most challenging things at the start of a project is deciding which technologies to use.
For that reason, I want to share my experience, hoping it will be useful to others.
Stack
Here's the stack in case you don't want to read the full post or don't have much time.
- Supabase: To manage my Postgres DB and avoid creating a backend server with APIs (CRUD), it has a client library that simplifies database interactions; it can be used from a server or a client app (browser, mobile devices, etc).
- NextJS: Using the new versions of NextJS and now with the new ways to deal with routers and service side components made it much easier to build the app using ReactJS components that connect directly to the database with Supabase. For instance, use the native HTML method to send form actions. When I integrated it, I was really surprised at how fast the development was.
- Turborepo: The setup was really simple. I had been using NX in enterprise projects, but I wanted to give it a chance. NX offers more options to configure, but in my case Turborepo was more than enough.
- TailwindCSS: To be honest, I don't like CSS, and I didn't want to manually style everything. Since it is time-consuming, I opted for TailwindCSS
- Shadcn: One of the best decisions!. It combines reusable components with the flexibility of creating them from scratch. This tool generates the component in your code base, allowing you to customize it and it is fully compatible with TailwindCSS.
- Clerk: To avoid building authentication from scratch. It manages users, provides different authentication methods, an account management panel, buttons, etc. You just configure the provider and that's it. However, it's price is 20$/month, while Supabase also supports authentication but requires more custom coding. So, depending on your budget, you could also use Supabase.
- Vercel: For setting up environments. It was so easy to associate my domain and configure subdomains with just a few clicks. If I had done it manually, I would have needed to configure HTTPS and set up certificates, wildcards, etc, to support subdomains.
- Namecheap: I already have some experience configuring the basics of domains, subdomains, and emails with Google.
- Google: I configured Google services with Namecheap for emails. It's relatively cheap for starting out and having a professional email.
- Docker: Not optional- required by Supabase for local development.
Motivation
- I wanted to try out new technologies.
- I wanted to build an MVP.
- "Suddenly" I found myself without a project, and now the idea of an MVP was not optional anymore- but I'll talk about that in another post.
Application
The app is a web app. The initial idea was (or is) an app for digitizing restaurant menus. Restaurants could configure their products, prices, and branches and associate products with specific locations.
Initially, the idea was that consumers could place orders from the app, but that added a layer of complexity that would have delayed the MVP launch. So, that feature was moved to a second iteration.
Backoffice for restaurants
Menu app for consumers
Decision criteria
I wanted to speed up basic or repetitive tasks/processes so I could focus on learning new things or areas I rarely work on in my regular job.
- Everything revolved around the idea of the MVP, so I needed technologies that allowed me to iterate quickly.
- I wanted technologies that pushed me to improve in areas I wasn't very familiar with, like real-time apps, monorepositories, Github Actions, etc, while still leveraging technologies I already knew to avoid wasting time.
- I didn't want to waste time on repetitive setups like authentication, APIs (CRUDs), DB configurations, etc.
- The stack had to offer good performance by default.
- I didn't want to spend time on CSS and writing styles from scratch, nor did I want to build basic components like buttons, form fields, etc..
Conclusion
If someone asked me what technologies I would suggest for an MVP nowadays, I would highlight two: Supabase and NestJS; the rest could vary.
🎥 Video Demo of the App: https://youtu.be/fyOKg2mjpTo
🔗 Domain & Subdomain Setup with Namecheap and Vercel: https://youtu.be/IY05UEV6DJY
Top comments (0)