How to Build a SaaS Application From Scratch

In this SaaS tutorial, we will learn How to Build a SaaS Application From Scratch. Over the last year and a half, I've been reading a lot about micro-SaaS, indie hacking, and building a profitable side project online.

It all inspired me to start something on the side as well, so in the last four months, I started working on a side project in my free time.

Initially, the project's scope was pretty small, but as time went on, I discovered more and more features I'd need to include to make it usable.

In this article, I want to share my journey, learnings, tools, and obstacles I faced while building out the project.

Finding an idea to work on

Coming up with a good idea was and is hard. I've never done something like this, and I wanted to make sure that it would be worth my time.

For months I would keep a list of product ideas to validate, but none of them really convinced me.

Here are some of them:

  • A music player for guitar practice
  • A service that notifies you about NPM package updates
  • Web push notifications as a service
  • A cross-posting tool for blog platforms
  • Embeddable feedback widgets as a service

It is common advice that you should first validate your idea before writing any code. But with some products, it's more straightforward than with others.

I could've certainly created a landing page for all of these ideas, promoted them, and seen what had the most traction—I knew the whole theory.

However, I'm not good at marketing. I've never done anything like that, so even if one of the ideas was good, the validation might fail due to other factors.

In the end, I decided to go with the idea I was most excited about and which solved a problem I had myself. Worst case, I'd spend a bunch of time on something no one but myself is using, learning a few things on the way.

The idea I'd be working on was a tool for embeddable polls and reactions.

Verizon feedback

This is probably the ugliest survey tool out there.

But if they can make money with this, why can't I?

Forms from other competitors were either looking like they had been created 20 years ago, didn't support voting on multiple pages, or didn't allow to collect additional feedback.

To be honest, I could have probably found something that checked all these boxes, but I just wanted to work on something. So that's what I went with.

Building the MVP

After selecting an idea, it was now time to start building.

I wanted to focus on creating a tool that would allow me to embed polls on my blog (the one you're reading right now).

MVP Widget

The final version of the embeddable widget for the MVP.

Getting started

I had started building a small product previously, so for this one, I decided to reuse some of the code.

Instead of copying the whole project, I created a small MERN-Boilerplate project so that it could be more easily used in the future.

It turned out, however, that a lot of features were missing.

Looking back, I could have saved a lot of time if I had invested in a boilerplate project or used one of the open-source solutions out there.

Design

As a frontend developer, I'm used to implementing designs, but I rarely get to think creatively about how I would design an application.

Creating my own application was quite challenging, and it got me to appreciate the work my colleagues do even more.

I just drew a few mock-up screens on paper for the initial designs.

For the landing page, I graduated to Figma, which I quite enjoyed using.

I also discovered websites like Dribbble or marketingexamples.com, which gave me inspiration for designs and copywriting.

Choosing a tech stack

For the tech stack, I chose what I already knew. I'm a frontend developer with a bit of experience in the backend with Node.js, so that is reflected in the technologies I chose for this project.

Let's have a look into the tech stack and some of the decisions around it.

Frontend

PollPilot frontend

Screenshot of PollPilot's dashboard

Frontend tech stack:

  • React.js
  • Material UI
  • Webpack
  • TypeScript
  • ESlint + Prettier - Code formatting

I kept the frontend tech stack fairly minimal to get started as fast as possible.

On both the backend and frontend, I use TypeScript as this allows me to rely more on my code, especially since I didn't write any unit tests.

It also makes me more productive as it catches stupid errors early on—like accessing a property that doesn't exist during development instead of in production.

State management

Note that I didn't include any state management solution. That is because React context, and React's useState are already powerful enough to power most applications.

So far, there's nothing I miss from Redux, MobX, and alike.

Material UI

Material UI is a component library. It saved me an incredible amount of time as it provided me with all the building blocks I needed to create something useful.

I customized the components with a custom theme and used styled components syntax to customize them even further.

The components include a bunch of features and animations that would take ages to replicate while building an application.

Webpack

Webpack is a module bundler that compiles my code into a few JS files that are compatible with most browsers.

It is highly flexible and enables code-splitting, among many other features.

Backend

  • Node.js
  • Express.js
  • Webpack
  • MongoDB
  • Docker
  • TypeScript
  • ESlint + Prettier - Code formatting

The backend stack was also fairly standard, and it is what I believe most JavaScript programmers are familiar with.

Initially, I included Docker to run the whole application, but now I'm just using it to run services like MongoDB during development.

Authentication

When building the first version of the MVP, I used Passport on the backend to handle authentication.

While it comes with a lot of plugins (or strategies), it takes some time to implement them correctly and hook them up to the database.

When I wanted to add authentication with Google, I decided to switch to Auth0, a managed solution that is pretty much plug-and-play.

Adding Auth0, however, came with its own set of challenges, as I needed to synchronize the users to my database somehow.

In any case, I'll definitely use a managed solution like Auth0 or Supabase for my next application again.

Payments

Taking payments online nowadays is made easy through services like Stripe.

Integrating Stripe subscriptions with my application to only give access to paid users was a little more complicated, but it was fun learning how all of this works.

I'm thinking of creating a tutorial on that topic, so make sure to subscribe to my email newsletter, so you get notified.

Landing page

I later noticed that I needed a landing page, which I decided to create using GatsbyJS.

The reason was that Gatsby websites are generally fast, I wanted to customize it, and I wanted to have a blog on it as well.

Gatsby is a static site generator that turns React code into static HTML and CSS for production.

It also includes a bunch of interesting features, like pre-loading content when hovering over links.

Since it would allow me to keep using React, I naturally gravitated toward this solution.

Serverless hosting and infrastructure

Hosting was the next big point. I was considering multiple options, including setting up my own Kubernetes cluster 🤯

In the end, though, I went with the easiest setup possible.

This meant using Cloudflare Pages for the SPA frontend, Heroku for the backend, and MongoDB Atlas for the database.

All of these platforms have the advantage that they don't require me to manage servers or any other parts of the underlying infrastructure.

The setup was incredibly easy, and with just a few clicks, everything was ready.

 

The great thing about all these tools is that you can start using them for free. If you want to get more serious, I recommend upgrading Heroku for $25/month.

Getting users

Now, this is actually the hard part. Creating software is something that all developers are comfortable with.

This is also the point that separates a side project from a business—and I'm not sure whether this has the potential to become a business.

I was lucky to get one early user, who was Tiago from The Stack Junction. He tried out the application and provided me with good feedback.

Other than that, I got a few users from posting to BetaList.com and Blogging for Devs, but only a few of them stuck around and tried out the application.

You can see that I can count my active users on the fingers of one hand.

I initially created the application with bloggers in mind, so my goal is to talk to some of them and see what their needs are.

What would I do differently next time?

For my next project, I want to do it the other way around and start exploring the market and validating before writing any code.

Although doing these things is outside my comfort zone, this is most likely the best approach to create a product that people would like to use.

When it gets to coding a web application, I will try to focus more on using no-code or low-code solutions to avoid spending too much time on coding.

What's next?

There are a lot of features and tweaks that I still have in mind. From the early feedback I received, I can see that there are a few things missing to make the product valuable.

The vision for the product is to enable content creators to collect feedback and engage with their audience.

For now, I'll take a break from adding more features, so I can improve the core functionality while at the same time putting more emphasis on user feedback.

Conclusion

I hope you enjoyed this breakdown of my side project. Are you working on any side projects as well? Feel free to share your own experience in the comment section below!


Original article sourced at: https://felixgerschau.com

#saas 

What is GEEK

Buddha Community

How to Build a SaaS Application From Scratch

Hire Dedicated SaaS Developer

Are you looking for custom software development that works off the cloud?

SaaS is the abbreviation for the ‘Software-as-a-service’ application. SaaS development process includes design, development, unit testing, and integration. Hire Dedicated SaaS Developer from HourlyDeveloper.io, With years of experience and excellence, we offer the best quality services and create scalable, flexible, and user-friendly SaaS solutions or websites using SaaS application.

Consult with our experts- https://bit.ly/2A8L4vz

#hire dedicated saas developer #saas developer #saas development company #saas development services #saas development #saas

Tarun Nagar

Tarun Nagar

1596529197

The Main Thing That Has To Be Taken Seriously With Saas Apps Is Security

As Cloud software is getting popular, the danger of them getting attacked is increasing too. Companies who were previously using traditional on-premise software solutions are shifting to SaaS.

This makes it important for companies that develop SaaS products for enterprises to focus on security.

SaaS apps need to be safe because they contain a lot of sensitive and confidential data and if it is leaked it can create big problems.

This is not just a problem for the client enterprise but also for the SaaS development company as their image will be tarnished.

In this article, there are all the main things that developers can focus on to develop secure SaaS apps.

This is not an option but a necessity for all the development companies. There are so many hackers and even if companies use different methods to block un-authorized activities, they find some way.

SaaS is one of the best choices for enterprise software development needs to be the safest.Now, as the technology is developing, the methods of securing the apps are improving as well.

Earlier there were basic methods like securing the firewall and all but now the measures have increased as well.

What Are The Threats To The SaaS Apps

Before fixing all the security issues, Saas developers need to know what are the threats that they have to deal with. Having clarity of the things that need to be done makes the work easy.

More than half of the work is done when developers or testers are able to find out all the potential threats to the SaaS apps.

Below are some threats that are faced by most of the cloud-based applications and it is important to find and fix them.

  • Breach To Capture Data
  • Change In Controls And Configurations
  • Weak Architecture In Cloud Application Development
  • Loopholes in authorization policies
  • Insider Threats
  • Hijacking Accounts
  • Weak Control Panel
  • Limited Visibility Of Cloud And Its Usage
  • Cloud Services Abuse And Misuse
  • Insecure API’s And Interfaces

All the aspects mentioned above are there in the top tier of the threat list. These are common and dangerous.

There can be many other threats that developers need to find by doing proper research. Risks and threats differentiate with the nature of the application.

The category of the application also changes how the application can be vulnerable.

What Are The Best Practices That Can Protect Your SaaS Application

There are some practices that development companies can apply to increase the security of the developed applications.

After knowing the risks the team of SaaS developers can figure out the activities that they need to do to tackle them.

The applications that are hosted on the cloud are vulnerable to a lot of threats and those threats need to be tackled with care and precision.

Below are the practices that they can follow to ensure that the apps are safe and the enterprises or the owners stay satisfied:

  1. Keep A Checklist To Review Security
  2. Educate And Train The Employees
  3. Educate The Customers About The Risks
  4. Created Policies For Storing And Deleting Data
  5. Protecting The Data That Is Sensitive

1.Keep A Checklist To Review Security

Make a checklist that ensures that all departments and parts of the apps are safe. There are many vertices in an organization that might be using this application and it is important to keep all of them in check.

All of this ensures that everything that is done is done according to the security measures.

There should be a record that says who is authorized and at what level. Any changes to these should also be recorded to find inconsistencies in the network if some problem occurs.

The list of the review can change according to the organizations, the application in use, and other factors.

2.Educate And Train The Employees

Provide training to the employees so they know the basics and some important concepts of security. This is important so they can know what are the problems and how to handle them.

It is not only the job of a SaaS development employee or security personnel to make sure if everything in the network is fine.

The security of the applications also depends on the people who use it. Teach the employees how they need to use the app, what they should share, how much they can get inside.

All this will keep them aware of how their data and authority can be misused if they reveal it to anyone. There should be workshops to let them know about the risks that are there.

3.Educate The Customers About The Risks

The customers who will use the application should also be told about all the risks. They must be told about how they should access their accounts, what they should believe, what they should report.

These might look small but these things have a great impact on people. There are companies who have started special workshops just so their customers are aware of security threats and they can keep themselves safe.

This should be done by all the companies that are using mobile application development services.

4.Created Policies For Storing And Deleting Data

There should be properly made policies that state how the data will be stored on the application and in what situations it will be deleted.

This is something that should be done for both, companies and customers. This keeps clarity between the customers and the organization and also keeps the data managed in the servers.

5.Protecting The Data That Is Sensitive

Companies have data that is confidential and sensitive on their applications and if that gets leaked or damaged they might have to face great losses.

They need to protect the data from the attacks that hackers do. There are various methods to do that.

SaaS development needs to be secure so that the data stays safe from all possible threats.

Conclusion

Custom software development is not as easy and as smooth as people think. There are many issues related to security and the architecture that have to be managed.

The world is full of risks and they increase more when an organization is on the internet.

Cloud computing is one of the fastest-growing technologies and SaaS software is taking place of traditional software in many sectors. This can be only maintained when the apps are secure and reliable.

#saas development company #saas development #saas software development #saas application development #saas developers

Willa Anderson

Willa Anderson

1605791076

Here Are The Features That A Cloud Based SaaS Application Requires

Fast setup and slick UIs create incredible first impressions on users. However, enterprise managers are aware of the fact that they are at the tip of the iceberg. One of the features of a SaaS is interoperability, and such aspects are the ones that business owners need to lay a solid foundation.

Are you aware of the term “Software as a Service (SaaS)?” You probably heard it several times, but you may not know what it’s all about. Well, a SaaS, designed by a cloud-based application development company, is a cloud-based service that helps consumers gain access to software applications over the web. These applications remain hosted on the cloud and used for various purposes by companies as well as individuals.

SaaS created by a cloud-based application development company is the best alternative to traditional software installation systems. You may compare it with a TV channel that’s available for subscription. The user connects to a remotely-located base on a central server and uses a license to access data.

In other words, SaaS offers a method of software delivery by which you can access data from any device connected to the internet. Of course, this particular device should have a web browser. Software vendors host everything associated with the application, including servers, code, and databases.

Explore more: https://www.moontechnolabs.com/blog/here-are-the-features-that-a-cloud-based-saas-application-requires/

#mobile-application-development #cloud-based-saas-application #on-demand-applications #moontechnolabs #application-development-services

Luis  Rodrigues

Luis Rodrigues

1604465145

How to Develop Successful Cloud-Based SaaS Application in 2020

Cloud-based SaaS is relatively a new approach for businesses to provide software solutions on a subscription basis and it has become one of the most admired industry trends in recent times. According to multiple reports, approximately 85% of small businesses have already invested in SaaS and it is expected to generate a market share of 105 billion USD in 2020. Before we jump into the development phase of SaaS application, let’s first understand what exactly SaaS is, its advantages, and why so many businesses are tweaked towards it.

What Is the Cloud-Based Software as a Service (SaaS) Model?

In simple words, these are the same applications or software as we use but instead of installing and storing data on our own computer, it stores data on web-clouds which can be accessed by anyone having your account credentials. And these services can be purchased on a monthly or yearly subscription basis just like your Netflix account. This is quite a simple progression as you can think of but it offers very useful features and due to this, many businesses are inclined to invest in a cloud-based SaaS model. If you want to dig further, here are some related terms – IaaS and PaaS that you can opt to explore.

#cloud #tutorial #saas #saas development #saas architecture #saas apps

The Best Way to Build a Chatbot in 2021

A useful tool several businesses implement for answering questions that potential customers may have is a chatbot. Many programming languages give web designers several ways on how to make a chatbot for their websites. They are capable of answering basic questions for visitors and offer innovation for businesses.

With the help of programming languages, it is possible to create a chatbot from the ground up to satisfy someone’s needs.

Plan Out the Chatbot’s Purpose

Before building a chatbot, it is ideal for web designers to determine how it will function on a website. Several chatbot duties center around fulfilling customers’ needs and questions or compiling and optimizing data via transactions.

Some benefits of implementing chatbots include:

  • Generating leads for marketing products and services
  • Improve work capacity when employees cannot answer questions or during non-business hours
  • Reducing errors while providing accurate information to customers or visitors
  • Meeting customer demands through instant communication
  • Alerting customers about their online transactions

Some programmers may choose to design a chatbox to function through predefined answers based on the questions customers may input or function by adapting and learning via human input.

#chatbots #latest news #the best way to build a chatbot in 2021 #build #build a chatbot #best way to build a chatbot