/ startups

I was asked, how to setup a web app fast?

Preface: Let me clarify that this is not about a static page but a web app with User/Account Management, localization, email, etc. It is perfectly fine to use any website builder or CMS and some can even provide account management, however I prefer the flexibility that my own stack provides rather than 3rd parties but of course this is not targeted towards anyone who does not have any technical skills.


So let's break down what you need and how we can achieve maximum speed but in the same robustness. Click here for short summary

Requirements:

  • 🌐Website domain
  • 🖥️Application Host
  • 📂Code storage
  • 👋Communication with Users
  • 🔍Tracking / Analytics
  • 👗Design

It might seem like an extensive list but that is until you know which tool to use and how to combine them.

🌐Website Domain

So assuming you want your website to be accessible by others you will need to assign a domain and for that you will need to purchase one from some of the popular providers. I personally use either GoDaddy or NameCheap. It is not a matter of which one is best but which one you find more intuitive.
The name, first leve etc are all up to you to decide, the only step afterwards is to setup the DNS.
DNS is like the global phonebook and you need to point the domain you purchased to the IP of the Application Host. This can take from minutes to hours and it can become more confusing the deeper you dive into it however for simplicity sake, we assume a simple domain to ip binding. 
This can be done through the Domain Provider.
My favorite tool for this is the DNS Checker which allows you to see when your changes have reached the world.

🖥️Application Host

This topic is surrounded by a magnitude of controversy. 
Selecting your Application host can be a matter of preference, speed, familiarity, resources provided.
A simple list would be first the cloud providers AWS, Azure, GCloud and then going to cloud servers such as DigitalOcean, Scaleway. 
Pick and choose what you feel more comfortable with there is no wrong decision.
I personally use Azure because I was part of the Microsoft Bizspark and had for more than a year almost free hosting, this gave me the time get to know Azure and feel comfortable with it.
Nevertheless, choose what you want and either go with a Virtual VM or a hosted application (for the more daring, you could try Serverless).

📂Code Storage

Here we are. The backbone of every web app. It's code! 
It is common practice to use a code storage provider such as GitHub, BitBucket, GitLab. Just like the Application host, you will find people arguing about the best tool. Again use which one you feel that it fits your needs.
I personally use BitBucket, it provides nice repository grouping with private repos for free.

We are slowly getting there, setup up until now should not have taken more tha 30 mins.

👋Communication with Users

Ah the holy grail of every successful project (as long as it does require users).
How to reach your users, before/after sign up or manage social media.
Here we have a few different aspects. Lets start with social media.

👪Apart from having to set up your accounts, posting content and engaging with your followers is key. For content management I use Buffer. It handles the major social media (Facebook, Twitter, Instagram, LinkedIn) with a very good free plan and an amazing transparent work ethos.

💬 An amazing kind of recent adoption was the usage of live chats on any page and for that you can use Crisp or Intercom, although Intercom has a wider range of tools to handle your sales funnel and leads.

📧Last but not least, constant engagement with your current userbase creates a lot of value and the easiest way to do that is through newsletter.

I cannot say newsletter without thinking of MailChimp. It is a powerful tool to gather, manage and keep in touch with your users, and without any cost towards design.

I do not believe that it is a coincidence that most of the services I have suggested up until now have an eye for design and do not (to my knowledge) sacrifice their design standards.

🔍Tracking / Analytics

So you wanna know what people are doing on your website?

In user tracking you have 3 different levels.

Top level such as tracking basic information, "how many people reached your page", "where are they coming" etc. For this there is nothing better and easier to use than Google Analytics. The setup is dead-easy and you will get more information than you thought you would.

Second level such as tracking user's behavior, here we are talking about knowing where did your visitor focus the most, did one picture specifically captured his mind? These are the so called heatmaps and you can get services providing either whole videos or just static images. The one I have used and again dead simple to add is CrazyEgg (dont ask me why they choose that name).

Third level, here we get nerdy 🤓. After having setup all the other tracking, you realize there are some events that cannot be tracked unless you explicitly and actively track them. A silly example would be them triple clicking on a button. Surely you might be able to see it in a heatmap, but it is easier to use something like googleanalytics.js to send custom events from your side to GA.

Ofcourse if you do not like GA, a good alternative is Woopra.

And well this is it, except your page probably looks like 1990 and it still keeps tracking everyone and annoying them.

👗Design

Page Look

So you need some slick website and visuals.

I will not go deep in page design, you can choose any bootstrap template, go minimal or use any of the myriads of frameworks. I personally use Bulma.io as I find their syntax and components always suitable to my needs and you cannot really make an ugly page with it.

Visuals

An image speaks 1000 words, and that is why you can use Pexels to get free stock images, or Giphy to spicy things up.

If you are feeling adventurous you can use Canva to create your own, do simple editing, or create better suitable content for your social media such as facebook page banner.

If you are also on the hunt for a loggo, Logojoy has a really neat generation platform that will definitely serve your first product well.

For any file transformations dont forget CloudConvert because FB cant handle SVGs.

Bullet point summary:

  • Buy domain at NameCheap
  • Store your code on BitBucket
  • Host your code on DigitalOcean
  • Use Crisp for live chat
  • Spread your content using Buffer
  • Engage with your customers using newsletters through Mailchimp
  • Use a combination of Woopra/CrazyEgg to track your users
  • Find images/designs on Pexels, format them using Canva, make your logo using Logojoy

Conclusion

Will this guide make your product better? Dout it. Will it make it easier to bootstrap faster? I hope so!

There are many many tools out there and at the end of the day it all comes down to which one you prefer, which one has the best suitable pricing for you and gets the job done.

I will be releasing a second article that includes more technical information. I will be sharing my Code templates / snippets and techniques that I used for mainly any web app that I start.


😳 My lastest project is Moovoo (https://moovoo.space/) if you are interested in indie movies then you might wanna check it out.

⭐PS: I am not affiliated with any of the companies mentioned in this article, unless explicitly indicated.