DEV Community

Cover image for Web App MVP in 5 Minutes
ZhiHong Chua
ZhiHong Chua

Posted on

Web App MVP in 5 Minutes

This one's for those who have a wonderful business idea, yet are concerned with their lack of tech understanding (hint: it's not that hard!).

Most ideas today thrive on Web Apps. Mobile Apps are quite restrictive (read: even Instagram decided to pivot to Web apps)

HOLD UP!

Before going further, consider your use case. If you are only hosting static content (and optionally integrate a Credit Card payment function), such as a blog or blogshop, you could consider a simpler WixSite and Stripe Payments API.

Read on only if you need to store data on a server like user information, which is:

  • editable, and
  • (almost) real-time

Essence of Web Apps

In a Web App, the key ingredients are:

  • Front End for User Interface (UI)
  • Back End for Database

Front End: React and open-source UI libraries

To start a React project, follow this guide. Once set up, you can choose any of the open-source UI libraries that remove the need to understand code (technically CSS + HTML). One popular example is material-ui.

Material UI Component example

Usually, these UI libraries will have a Components page. Just find the component that is closest to what you need, and you're good to go.

Optional:

Back End: Firebase Cloud Firestore with Google Authentication

MongoDB + React in MERN stack was pretty popular one year ago, but Firestore seems to be a much simpler way to do things. Here's how to get started.

The Firestore stores data in JSON format, which is pretty simple so you don't need to code Back End. The way for the Front End code to connect with Back End is also neatly summarized in Firebase's guide.

What is even better is that you can easily write rules to limit read / write access to the database to users who are registered with a valid userID. A decently strong, but simple rule is explained in this YouTube video.

That's it!

Look forward to seeing what everyone builds 🤗

Top comments (0)