Context#

You have an app idea but you have no idea how to start building it. Maybe you’re at a hackathon and you only have 24 hours, maybe it’s to beef up your resume, or maybe you’re just doing this for fun.

Everyone tells you to “build something unique” and “build something high-quality” - okay, cool, how?

This guide is for you.

You don’t have to start from scratch#

💰 There are a ton of free boilerplates on GitHub that already contain almost everything you need for a variety of apps. Their documentation often includes a setup guide, which means you can have something up-and-running within minutes.

Even if you don’t want to use them, they can serve as a great reference for what a project should look like.

🧠 That being said, try your best to understand how the features you are using work - you will be asked about them in interviews.

🔎 To find more boilerplates on GitHub or Google, look up keywords like saas starter, mobile app boilerplate, etc.

Pick a boilerplate that visually appeals to you and has the features you want to include in your project. Below are some good examples for a variety of projects.

🖥️ Web apps#

The most common kind of project. You can build a web app for almost anything - a SaaS product, a blog, a game, a Chrome extension, a bot, an API, etc.

• DevToDollars has a great web SaaS boilerplate.
  • This is what your website could look like with this template.
• Rasmic.xyz offers a slightly different SaaS setup.
  • This is what your website could look like with this template.
• ixartz/SaaS-Boilerplate is another one that offers a ton of features.
  • This is what your website could look like with this template.

📱 Mobile apps#

There are two kinds of mobile apps you can develop:

1. A native app will only be written in one language (Swift or Kotlin) and will only work on one platform (respectively either iOS or Android).
2. A cross-platform app can be written in a variety of languages and frameworks, and will work on both iOS and Android devices. The most popular frameworks for this in 2024 are React Native and Flutter.

❗ Note that in either case, if you want to develop for iOS devices, you will probably need a Mac.

• Ignite is a really good-looking boilerplate for cross-platform mobile apps.
• Obytes Starter has a gazillion features for your cross-platform mobile app and offers a detailed setup guide.

❕ You should know that 70% of smartphones around the world in 2024 are Android devices, yet in the US that figure drops to 42%.

🎮 Games#

There are so many types of games you could make that it’s hard to recommend basic boilerplates. There are also not many starter kits available for games - you typically use a game engine like Unity or Unreal Engine. Your best bet is to look up YouTube tutorials for the kind of game you want to make.

• Rogue-like Browser Boilerplate is a nice 2D dungeon-crawl-style JavaScript game with a lot of gameplay features.

🌐 Chrome Extensions#

You can learn more about how Chrome extensions work using the official docs or by checking out this simple freeCodeCamp tutorial.

• chibat is a basic Chrome extension setup written in TypeScript.

🤖 Discord bots#

A lot of different use cases for Discord bots: moderation, entertainment, role management, community building, etc. Find tutorials on YouTube, or use something like:

• kkrypt0nn has a lot of stars on GitHub.
• NamVr has a very simple setup guide.

📦 APIs#

If you want to offer a service to other developers, e.g. an endpoint that takes in a birthday and returns a joke, you can build an API. Users would have to send a request (a birthday) to your server, and your server would send back a response (the joke).

These boilerplates are production-ready and have a lot of features:

• hagopj13/node-express-boilerplate has 8k+ stars on GitHub and a detailed README.
• maitraysuthar/rest-api-nodejs-mongodb is another Node.js starter that uses MongoDB as its database.

📝 Blogs and websites#

You can get a full-fledged website out-of-the-box using frameworks like Astro or Next.js because they have a million free templates on GitHub.

• Some Astro themes
• Some Next.js themes

Once you’re done coding your website, you can check out my other article ↗️ for instructions on how to connect your website to a custom domain and deploy it on the internet.

What to use for the basics#

🚀 Frontend#

Use a popular, widely-supported framework like Next.js to build your frontend. There are a billion tutorials online on how to build just about anything with Next.js, and a ton of free templates on GitHub.

For beautiful, consistent UI components like buttons, forms, and popups, check out component libraries like shadcn, Material UI, or DaisyUI.

Lastly, Tailwind CSS has become hugely popular for styling - it lets you write the CSS in an easier-to-read format and within the HTML itself, so you don’t have to worry about .css or <style> tags anymore.

🗄️ Backend and database#

You can use an all-in-one platform like Supabase or Firebase to provide most of your backend services. These platforms can handle things like authentication, databases, hosting API endpoints, and more.

🌐 Hosting#

Make your project publicly available on the internet using a hosting service like Vercel or Netlify.

A pretty bold yet not unfounded claim by Supabase

Now add fancy features#

🕵️‍♀️ Authentication#

Allow users to sign up and log in to your app, and control who can access parts of your app.

• Supabase Auth or Firebase Auth.
• Clerk is a bit more complex to setup, but it’s a popular option if you’re not using an all-in-one platform.

💳 Payments#

Receive or send payments on your app (e.g. monthly subscription).

• Stripe is the most popular option by far.
• PayPal is another option, but it’s less developer-friendly.

📊 Analytics and graphs#

Track how users are interacting with your app - extremely useful to know what features you should improve, remove, or create. If you have an aspiring data scientist friend, maybe they can do some analyses on the data you collect ?

• PostHog is blazingly fast to setup and gathers a ton of different metrics out-of-the-box.

To display high-quality graphs and charts, look into Chart.js or D3.js.

📡 Real-time features#

Show real-time updates to users without having to refresh the page - e.g. a chatroom, a multiplayer game, or a live stock market tracker.

• Supabase Realtime or Firebase Realtime Database.
• Socket.io is the most widely used library for real-time features.

🧩 Third-party and custom APIs#

There are a ton of additional features you can offer by using third-party APIs, like:

• OpenAI to generate AI text.
• Replicate AI to generate AI images.
• Google Maps to use maps, validate addresses in your forms, show commute times, and more.
• WeatherAPI to use weather information in your app.
• Twilio to handle SMS and phone calls, e.g. to send a verification code or reminders.
• Spotify API to interact with users’ Spotify music.

🪝 If you want something more custom-built, like a feature where users can upload a photo and your app tells them what breed of dog it is, you can write your own code (Python and Node.js are popular choices). Then, you can host it as a serverless function so other people can access it via a public API endpoint - use something like:

• Vercel Functions or Netlify Functions
• AWS Lambda

isEven API is the most important API you will ever use (jk)

Write production-grade code#

Repository and docs#

📖 Make sure you have a README.md and follow best practices for it. This file is the first impression anyone seeing your GitHub will have of your project (and thus of your skills).

📹 At the top of the readme, include a GIF that demos your project - use ezGIF to turn your screen recording into a GIF.

📁 The way your folders are structured should also follow best practices.

✔️ Everytime you make a commit, you guessed it - follow best practices.

📜 Finally, make sure all your features are well-documented. To make your docs prettier and better, you can use something like Mintlify or Docusaurus.

Code quality#

A formatter automatically checks your code against certain formatting rules and fixes it to match them. A linter checks your code for logic errors and styling bad practices.

🧼 You can install the VSCode extensions Prettier and ESLint to do this for you. If you set them up correctly, they will clean up your code for you every time you save a file.

✨ This next one might be a bit more of a nitpick, but every coding language has its own best practices. For example, Python conventionally uses snake_case for variable names, while JavaScript uses camelCase. If you’re curious, these are well-documented but a bit lengthy to read:

• Python pep8 for Python.
• Google TypeScript style guide for TypeScript.
• Google Java style guide for Java.

Security#

✔️ Input validation
Make sure users can only submit the kind of data you expect in your form, i.e. no malicious code or inputs that could crash your app. Zod is a great library for this, and pretty easy to use.

🔒 Secrets management
It’s imperative that you do not store sensitive information like API keys and passwords directly in your code (and then publish it to GitHub!!). See how Vercel Environment Variables can handle this for you.

🛡 Rate limiting
Stop people from spamming requests to your server and crashing it - this is not super simple to implement, but should be considered. Vercel Edge Middleware offers this capability.

Performance#

🐛 Figure out your bottlenecks
Use a tool like Lighthouse to figure out what’s slowing down your web app. Is your software slow because you’re waiting on too many network requests, or is it slow because your computations take too long to run? For example, CRUD apps are often slowed down by too many network requests to the database (create, read, update, delete).

🚀 Caching
Store large data that doesn’t change often in a cache, so you don’t have to fetch it from the database every single time a user wants to view it. mdn web docs explains how caching works in general. Look up how to implement caching for your specific framework and use case, e.g. react native mobile app caching.

🖼️ Image optimization If your images are too large and slow down your web app, look into more appropriate image formats, try to compress them, and implement responsive images. Imagemin is a popular image optimization tool.

🐢 Lazy loading Wait to load certain parts of your app until a user scrolls to them - Cloudflare explains how to do this.

Testing#

If you write a bunch of automated tests for your code, you won’t have to worry as much about breaking things when you add new features or fix bugs - your tests will tell you before you even deploy your code.

There are many types of tests, with the most common being:

• Unit tests - test individual functions or components in isolation of all other code.
• Integration tests - test the flow of data between different parts of your code.
• End-to-end tests - test the entire flow of your app, from the user clicking a button to the server responding.

🧪 Popular libraries to setup and implement tests are:

• Jest for JavaScript and TypeScript.
• Pytest for Python.
• JUnit for Java.

Most testing tools come with a debugger that you can use to programatically “step through” your code and see what’s going wrong at every line - checkout this super helpful video to learn how to use a debugger in VSCode.

⚙️ Also, you can setup your tests to run automatically every time you push your changes to GitHub using CI/CD (continuous integration/continuous deployment) tools. These tools will only authorize the deployment of your code if all your tests pass. Popular ones are GitHub Actions or CircleCI for any repository.

🔴 Lastly, you can try to implement error handling and logging in your app. This will help you debug your app more efficiently when things go wrong. Many languages have built-in logging mechanisms, for example see Python logging, or you can use a third-party tool like Sentry.

Most developers have a love-hate relationship with writing tests.

💰 Making moneyyyyy#

A lot of people have already shared absolute gems on everything you need to know about monetizing or launching a startup - from finding a problem to solve, getting users, building the product, and making money. Some of my faves:

• 📹 I built a startup in 31 hours (SaaS) by Marc Lou.
• 📹 I earn 1,753$/day with this SIMPLE tech stack by Marc Lou.
• 📖 The Product-Market Fit Game by James Hawkins, the CEO of PostHog.
• 📹 How to OVER Engineer a Website by Fireship.

These resources cover almost everything you need to know about launching a successful, profitable software product.

Before you go any further, I really recommend you at least watch the first video on 2X speed - it completely changed the way I think about building monetized software.

Lastly, if you want to raise funding or get close mentorship for your project, check out this section of my other article ↗️.

Marc Lou is a solopreneur who has launched many failed startups and some highly successful ones.

🥊 Just ship it#

Seriously, just get it out there. Some famous quotes to inspire and encourage you:

1. Eighty percent of success is showing up.
2. If you’re not embarrassed by the first version of your product, you’ve launched too late.
3. Done is better than perfect.
4. The best time to plant a tree was 20 years ago. The second best time is now.
5. You don’t have to be great to start, but you have to start to be great.

✅ That being said, make sure your app is safe to ship, from a code and security perspective:

• Use tools like the Supabase production checklist or NextJS production checklist.
• Check out this excellent overview by ByteByteGo on shipping to production.

📣 Get eyes on your product#

The last step of shipping your app is to promote it. Some popular options include:

• Post on LinkedIn about it.
  • Note that LinkedIn made some changes to its algorithm in 2024 - read about that here.
• Post on Reddit or HackerNews.
• Launch on ProductHunt.
  • A lot of popular software like Notion and Figma were launched on ProductHunt.
• Run ads ($$$).
  • Pick a platform based on your target audience, e.g. Instagram for social apps targeting Gen Z, LinkedIn for B2B products, Google Ads for general products, etc.

🏁 Finish line#

I mean, kinda. Projects are a perpetual work-in-progress - there is no finish line (unless you give up, boo tomato tomato 🍅).

Make sure to enjoy the process though, celebrate your wins, and keep building.

If this article helped you build your first project, improve an existing project, or inspired you to launch something, please let me know 🥺

🧀 Gouda luck :-)