Using React, Firebase, and Ant Design to Quickly Prototype Web Applications

In this guide I will show you how to use Firebase, React, and Ant Design as building blocks to build functional, high-fidelity web applications. To illustrate this, we’ll go through an example of building a todo list app.

These days, there are so many tools available for web development that it can feel paralyzing. Which server should you use? What front-end framework are you going to choose? Usually, the recommended approach is to use the technologies that you know best. Generally, this means choosing a battle-tested database like PostgreSQL or MySQL, choosing a MVC framework for your webserver (my favourite is Adonis), and either using that framework’s rendering engine or using a client-side javascript library like ReactJS or AngularJS.

Using the above approach is productive – especially if you have good boilerplate to get you started – but what if you want to build something quickly with nearly zero setup time? Sometimes a mockup doesn’t convey enough information to a client; sometimes you want to build out an MVP super fast for a new product.

The source code for this example is available here. If you’re looking for a good IDE to use during this guide, I highly recommend Visual Studio Code.