(2/3) - How to create a product : Step-by-step guide
Posted on - February 8, 2025 by Andy Cinquin
How to Create a Product: From MVP to Technical Choices
This article assumes you have an MVP and a "relatively" clear idea of what you want to achieve. We're not talking about technical aspects, code, or anything like that yet - it's just about the idea of what you'd like to do!
If you haven't read the first article, you can find it here:
A complete guide to creating a successful product (en)
or:
Guide complet pour créer un produit avec succès (fr)
Summary
- Find an idea ✅
- Discuss it, validate it ✅
- Define an MVP (Minimum Viable Product), essentially the smallest possible version that meets the need ✅
- Build this MVP
- Simple design
- Simple features
- Simple hosting
- Have it tested
- Continue improving it
- Handle communication around it
- And that's it!
Next Steps
At this stage, we have several possibilities for the project's continuation. If you don't like my solution, you can do without it or do things differently - nothing's stopping you. The right solution is the one that works for you, and nothing else!
MVP
Once we have our MVP in mind, we'll create a cleaner mockup. A wireframe might work, but we're going to do things properly and create the actual mockup.
You have several options:
-
If you have a designer's soul:
- Do everything by hand with Figma, create a moodboard with Figjam for example, and dive into creating a beautiful mockup with your creativity!
-
If you have some design skills but lack inspiration:
- Visit sites like:
- Dribbble
- Behance
- Awwwards
- The goal is to find inspiration for your screens, based on existing work, designs you appreciate, and approaches you could adapt. Make these elements your own, adapt them, and create your own style.
- Visit sites like:
-
If you have no design skills and hate it:
- V0 is a very effective solution!
- (Complete guide to creating an application mockup with AI) In this tutorial, I explain the entire process if you're not creative and need attractive and coherent results.
- The idea is to provide photos and inspirations to AI which will create our mockup and our first front-end version.
MVP and Mockup Validation
At this point, we have a promising mockup and initial design. Now we need to adjust elements that aren't optimal and gather feedback. Personally, I use Figma a lot for this kind of thing. You can share a mockup and receive comments and feedback. It's very effective, and the tool is free too! :D
If you want to delve deeper into this part, it's possible to create animations and transitions. There are many rules and tips to follow. We can do very complex things, but let's keep it simple and agree that we don't need to do 3D, etc.
I'll probably write an article about animations and motion design sometime soon. ;)
What's Next?
We have a mockup and a product vision. Now that we have the design, all that's missing is building the tool.
We'll separate this into three main steps:
- Technology choices
- Back-end
- Front-end
- Deployment choice
- Server infrastructure
Choosing Technologies and Languages
Ah, that famous question! You'll find ALL possible answers: feeling a bit crazy? Use Rust. Bit old school? Use Java (😋). Code unconventionally? Use JavaScript.
... Let's be more serious...
Actually, the answer is simple:
Do what you enjoy
You like Go? Use Go.
You like JavaScript? Use JavaScript.
You like C#? Use C#.
It's that simple. The idea is to choose the language that will help you complete the project.
If you want to learn new technologies and aren't afraid of learning, here's MY PERSONAL choice:
If you want to learn one of the technologies mentioned on Developer Roadmaps - roadmap.sh, it's an excellent starting point! (⚠️ The goal isn't to blindly follow tutorials, but to take ONLY what interests you and be efficient. Learn on the job with your project - that's how you'll gain the most skills and enjoyment in minimal time!)
Back-end:- Headless CMS // BaaS:
- Payload
- Strapi
- PocketBase
- Directus
The advantage of these back-end technologies is that they provide authentication, API endpoint generation, and data management in 15 minutes maximum, just the time needed to create your data schema in the application. Then, ALL endpoints are functional.
I chose this approach because it saves considerable time, and we don't have significant load requirements. The tools we use and data volume never exceed a million, so we're barely at 5% of this kind of tool's capacity. If we encounter performance issues, we can optimize many aspects before and after. In my opinion, the API manager won't be a problem unless we start handling millions of users.
(But at that point, we'll have the budget to rebuild everything in Rust)
BUT if you want to have fun creating a clean API, do it. I'm only talking about a personal opinion and time-saving here, it's just a subjective viewpoint.
Simplest and quickest advice to implement: Introduction - Docs - PocketBase
(We won't discuss databases here, it will depend solely on your technology choices, whether PostgreSQL, MariaDB, or even SQLite. Today, the performance we can get with well-placed tools and indexes is incredible, no need to overthink it.)
Front-end- NextJS // React // VueJS // NestJS // Astro // Angular // Svelte... Whatever technology you choose, you can even develop in native HTML/CSS/JS, or with PHP, etc. In short, you can use Django if that's what you want. Front-end is the most flexible technology: 99% of tools will eventually generate HTML/CSS/JS. We can use frameworks or not, complex languages and architectures or not. Here, it's totally free. Personally, I'm well-versed in NextJS, so that's the choice I use in all my recent projects, but that's just my preference.
An important note: we'll tend toward one technology or another depending on needs. If we need to have an iOS and Android mobile application, we can absolutely go with Flutter to develop the application only once. Especially since recently, there are libraries like FlutterFlow, which allow you to graphically create your components to drastically speed up your development.
FlutterFlow - Build high quality, customized apps quickly!
In the end, choose, once again, the technology that excites you.
(Personally, it's NextJS, a React-based framework. :D)
Server- All this system will need to be hosted. The most economical solutions are VPS (Virtual Private Servers), which offer the best value for money. You can also host a machine at home. Personally, I recommend Contabo and Netcup, two really affordable German hosts. You can choose the host you want; generally, a $5/month server should be more than enough (except at OVH, where it will cost €25 for the same services).
Personally, I have a VPS at Netcup, and Bréval, my associate, has one at Contabo.
Once you have your VPS (or machine) in hand, you can directly install everything you want via command line.
If you want flexibility and have good networking basics, as well as some mastery of Docker and Linux, I STRONGLY recommend installing "Coolify" on your machine. It's an orchestrator that will allow you in a few clicks to have the equivalent of Vercel (for those who know). Basically, it's a tool that lets you deploy a database or WordPress in a few clicks and seconds. (Not bad, right?) And of course, with all certificates configured and perfectly parameterized Docker containers!
You even have monitoring and alerts!
Example?
In the next article, we'll see all of this implemented, with a concrete example of what to do when, the choices I personally made, and most importantly why! :D
🚀 Thanks for reading!
If you enjoyed this article, feel free to share it around.
💡 Got an idea? Let's talk !☕