Build a full-stack Web App without creating a server using MongoDB’s Atlas GraphQL API

Learn how to perform Authentication, Authorization, CRUD operations, Analytics & Web App Deployment by building an Expense Manager in React.js using MongoDB’s Atlas App Services

I am Sourabh Bagrecha from the City of Lakes, Udaipur. One of the things I like the most is building full-stack apps using Node.js, React.js, and MongoDB. Every time I get a billion-dollar idea, I immediately start building it using the tech stack I mentioned. No matter what idea I am working on, there are a few things that are common to every app:

• Authentication & Authorization: Login, Signup, and Access Controls
• Basic CRUD(Create, Read, Update and Delete) operations
• Some analytics capabilities
• Web App deployment

And without a doubt, all of them play an essential role in any full-stack application but still, they take a lot of time and energy to build and are mostly repetitive in nature. Therefore, we are left with significantly less amount of time to build the features that our customers are waiting for.

In an ideal scenario, our time as a developer should be spent on implementing features that matter to our customers and not reinventing the wheel on our own.

With MongoDB Atlas App Services, we don’t have to worry about that. All we have to do is just plug Realm Web into our React app and we are all set to rock!

For the past 8 days, I have been blogging about how you can utilize MongoDB Atlas App Services to build your full-stack application end-to-end without writing a single line of server code.

An Expense Manager built using React.js and Atlas App Services

In this part of the series, we are going to summarize each one of the 8 blogs and it will act as a guide to help you navigate through the complete process of building a full-stack web app called Expengo — an expense manager.

All the headings are hyperlinked 🔗 with their respective blogs.

Step 1: Configure Email-Password Authentication on MongoDB’s Atlas App Services Authentication

Implementing authentication in our apps usually requires us to create and deploy a server while making sure that emails are unique, passwords are encrypted and sessions/tokens are managed securely.

Wouldn’t it be nice, if we can offload this responsibility and focus on features that matter the most to our users?

In this blog, we will learn how we can configure Email Password Authentication on App Services Authentication.

Step 2: Implement Email-Password Authentication in React using MongoDB’s Atlas App Services Authentication

In continuation with the previous blog, we will see how we can utilize the Email Password Authentication Service provided by App Services Authentication in our React.js App.

In this blog, we will be building React Components, Authentication Forms & Pages, we will also take a look at how we can utilize React context to manage user’s access tokens and other data that we can use throughout the app and create reusable states across different components.

Step 3: Configure MongoDB’s Atlas GraphQL API to perform CRUD operations in our app

Adding the ability to perform CRUD: Create, Read, Update and Delete operations on your application’s data requires you to create and expose APIs that your client will consume to interact with the data stored in your database

GraphQL gives clients(Mobile/Desktop/Web Apps) the ability to request exactly the data they need, nothing more and nothing less. GraphQL is an alternative to REST APIs.

In GraphQL, to provide this flexibility to the clients, the server-side of things becomes very complex. In this blog, we won’t be writing a single line of server-side code and yet we will be creating a fully functional GraphQL CRUD API using Atlas GraphQL API.

We will discuss:

• Our Data Model for this App
• Adding sample data to our collection via Atlas
• Configuring permissions and access rules for our data

Step 4: Set up your React app for CRUD operations using MongoDB’s Atlas GraphQL API — Part 1

Now, it’s time to implement CRUD features in our App. We will be implementing React components for the List expenses page & Create expense page in our app.

After that, we are going to write some GraphQL queries and mutations to:

• Fetch a list of all the expenses
• Create an expense
• Delete an expense

To make our pages look consistent across the app, we will implement a PageContainer component as well.

Step 5: Set up your React app for CRUD operations using MongoDB’s Atlas GraphQL API — Part 2

In continuation with the previous blog, we will be implementing the EditExpense page in this blog. We will also learn how to write a mutation to update data in our collections.

We are going to create a few reusable components that can be used across different pages, like Custom Date Picker and ExpenseForm which can be used for updating as well as creating expenses.

Step 6: Implement an analytics dashboard using Custom Resolvers for MongoDB’s Atlas GraphQL API

You may want to perform some advanced analytics on your data that requires you to write a long MongoDB aggregation pipeline that processes documents and returns the computed results. This is something that’s beyond the ability of the default GraphQL API provided by Atlas. But this doesn’t mean we are restricted to performing basic CRUD operations only.

Custom Resolvers for GraphQL is exactly the feature we need to perform advanced querying and computations we just discussed.

In this blog, we will learn how to create 2 Custom Resolvers for GraphQL, we will start by creating Atlas Functions, then we will create Custom Resolvers that will use those functions.

Step 7: Implement an analytics dashboard in React using Custom Resolvers for MongoDB’s Atlas GraphQL API

Data is useless, at least on its own.
It is really difficult to understand the real meaning of raw data without extracting meaningful insights and information through proper visualizations.

In the last part of our blog series, we learned how to create custom resolvers for GraphQL that allow us to perform advanced analytics. In this part, we will learn how to implement an analytics dashboard to display those insights from our database in a React.js app using GraphQL.

Step 8: Host/Deploy your React.js Web-App on MongoDB Atlas App Services Static Hosting

Whenever I want to host my side projects’ Frontend, I find myself hosting a Netlify site or maybe uploading it on AWS S3. But I use them only to host my front-end(client) and this adds a lot of operational overhead, as I have to manage my front-end on one tool and my back-end on the other.

Wouldn’t it be convenient if there was a tool where I could manage my back-end and front-end hosting in a single place? MongoDB’s Atlas provides website hosting out of the box in the same dashboard which we used to create and configure Authentication and GraphQL APIs for our app.

In this blog, we will be looking at how we can utilize this website hosting facility provided by MongoDB’s Atlas App Services Static Hosting. In just 5 easy steps we will have a live website with a URL that can be accessed from anywhere in the world.

Conclusion

That’s it, we have implemented all the major features in our app that we wanted to build:

• Authentication and authorization
• CRUD: Create, Read, Update and Delete
• Analytics Dashboard
• Deploy our React App

And the best part is we didn’t even need to create or manage a server for this. Basically, we created a full-stack app without worrying about servers at all. All we needed to do was:

• Define our schema
• Make some configurations
• Hit deploy

and that is it, our backend is ready.

If you have any doubts or concerns, please feel free to reach out to us on Community Forums. I have created a dedicated Forum Topic for this blog where we can discuss anything related to this Blog-series.

And before you ask, here’s the GitHub Repository for this tutorial series.