How to Build a Backend using Claude?
17 min
traditional backend development frequently requires extensive coding, infrastructure management, and significant development resources however, leveraging modern backend as a service platforms can dramatically streamline this process back4app simplifies this process by providing a comprehensive set of tools designed to accelerate your workflow one of these tools is back4app’s model context protocol (mcp) server , which allows you to build an entire backend from an llm like claude using only natural language in this tutorial, you will learn how to build the backend and the user interface (ui) for a personal expense tracker using the back4app mcp server through claude and deploy it on back4app containers key takeaways you can view the live personal expense tracker built in this tutorial using this link discover how to scaffold a backend on back4app in minutes using claude prompts and the mcp server see cloud code hooks in action as they secure owner only writes and keep monthly summaries accurate without extra infrastructure learn to spin up a responsive frontend that connects to your parse apis through the javascript sdk, all generated by claude explore one click deployment with back4app containers, pushing your github repo to production with zero operational overhead prerequisites to follow this tutorial, you need to have the following a back4app account you can sign up for free if you don’t have one claude desktop installed on your system basic familiarity with backend development concepts project overview personal expense tracker you’ll build an expense tracking backend that claude can query and update in real time your expense tracker can record your expenses organized by categories, and provides monthly and yearly summaries of your spending habits the project has 4 data models users this table stores account credentials and the overall monthly spending limit for each person the fields include email, password, monthly budget, and timestamps expense this table store each purchase here date, amount, categorypointer, and a description category this table stores user defined labels for grouping expenses fields include id, user id, name, and timestamps monthly summaries this table caches pre agregated totals for fast dashboard and budget checks fields include user id , month , total spent , and timestamps every time you record an expense, a beforesave cloud code trigger finds (or creates) that month’s monthlysummary and increments its totals and deducts the amount from your monthly budget here’s an entity relationship diagram to help you visualize the schema now that you have a rough idea of what you'll be building, in the next section you will set up the back4app mcp server with claude desktop and start writing prompts that will create the app described in this section connecting back4app and claude desktop to connect the back4app mcp server to claude desktop, first you need a back4app account key to retrieve it, log in to your back4app account and on your user dashboard, click the dropdown on the navbar and select account keys on the account keys page, give your account key a name, copy the generated key, and store it securely next, you need to modify the claude desktop config file to include the back4app mcp server by default, the claude desktop config file doesn't exist on your system you can create the config file by navigating to the claude desktop settings on your system, selecting the developer option, and clicking the edit config button, or you can follow this guide this will create a configuration file at (if you don’t already have one) macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …and will display the file in your file system open the config file with any text editor of your choice and add the configuration below { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } replace \<account key> with your account key, save the file and restart claude desktop if you are following this tutorial on a windows machine, change the command key’s value to npx cmd with these configurations in place, you are ready to start building your back4app backend with the back4app mcp server and claude desktop creating the backend with claude desktop to create the backend of the project described earlier, you have to create a new app on back4app and on the app, create the appropriate database tables you can achieve this using claude desktop and a prompt your prompt should instructs claude to create a new application named “personal expense tracker,” define four mongodb classes ( user, category, expense, and monthlysummary) with the required fields, pointer relationships, default values, and access controls, and embed cloud code hooks that update monthly summaries whenever an expense changes, block unauthorized writes, and prevent duplicate category names for a user an example prompt that achieves this is provided below create a new back4app app named “personal expense tracker” class \\\\ user email string, required, unique passwordhash string, required monthlybudget number, required, default 0 (smallest currency unit) add a unique index on email class category user pointer<\\\\ user>, required (owner) name string, required acl public read, owner write add a compound unique index on {user, name} class expense user pointer<\\\\ user>, required category pointer\<category>, optional amount number, required currency string (length 3), required, default “usd” spentat date, required note string, optional isdeleted boolean, required, default false acl public read, owner write add indexes on {user, spentat} and {user, isdeleted} class monthlysummary user pointer<\\\\ user>, required month date, required (store the first day of the month) totalspent number, required acl public read, owner write add a unique index on {user, month} cloud code 1\ aftersave on expense if isdeleted is false, upsert the matching monthlysummary row (month = first day of spentat) and increment totalspent by amount if an expense is soft deleted (isdeleted toggled to true), decrement totalspent accordingly 2\ beforesave on expense reject writes when the authenticated user is not equal to user 3\ beforesave on category enforce the per user unique {user, name} combination create all classes, fields, indexes, clps, and cloud code hooks exactly as specified when you send the prompt, you will receive a series of pop ups from claude requesting permission to perform specific tasks, such as creating the app the pop ups provide an opportunity to review and authorize each potentially irreversible action, such as creating a new app or adding classes, ensuring that nothing is deployed, billed, or exposed without your explicit consent they act as a safeguard against accidental changes, ensuring you stay in control of your back4app resources next, implement user authentication in your app by giving claude a series of prompts that instruct it to add token based sign up and log in cloud functions, remove public access to the user class, keep public read but owner only write on category, expense, and monthlysummary, and create beforesave guards that reject any write when the request is unauthenticated a list of example prompts for each functionality is listed below sign up update the back4app application “personal expense tracker” to include a cloud code function called signupuser inputs email, password, monthlybudget (optional, default 0) if a user with the same email already exists, throw an error otherwise create the user record with those values and return the session token this prompt creates the sign up cloud code log in update the back4app application “personal expense tracker” to include a cloud code function called loginuser inputs email, password call parse user login with those credentials and return the session token on success this prompt creates a corresponding login for the cloud code class level permissions update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary this prompt ensures that only the owners of the category, expense, and monthly summary can modify it executing these prompts concludes all of your backend logic in the next section, you will generate a frontend for your backend generating the frontend since claude created your back4app backend, it remembers what the schema and responses look like taking advantage of that context, you can ask it to create a ui that matches the schema of the created app an example prompt is provided below generate a minimal frontend that matches the schema and implements all the functionality of the personal expense tracker on my back4app account and connect the frontend to the backend using the javascript parse sdk you should get a full ui copy the provided code into an ide like vs code and push the code to github in the next section, you will deploy your frontend on back4app containers deploying your app on back4app containers back4app containers allow you to deploy your apps easily using a dockerfile and a github repository to deploy your app on back4app containers, you need to first include a dockerfile in your repository you can ask claude to generate one using the prompt below generate a docker file for the ui of my personal expense tracker or you could use the dockerfile provided below \# start from the official lightweight nginx alpine image from nginx\ alpine \# remove default content run rm rf /usr/share/nginx/html/ \# copy your static site (html, css, assets) into the container copy /src /usr/share/nginx/html/ \# expose port 80 expose 80 \# start nginx in the foreground cmd \["nginx", " g", "daemon off;"] after adding the dockerfile and pushing it to github, navigate to your back4app apps dashboard, click the dashboard dropdown, and select the web deployment platform option on the deployment page, click the “deploy a web app” button and give back4app access to the repository you want to deploy select the app you wish to deploy, fill out the deployment details, and click the deploy button clicking the button starts the deployment process, and after it is done, you will get a live url to the app you can view the live personal expense tracker built in this tutorial using this link conclusion in this article, you built an app that tracks your expenses using the back4app mcp server and claude, then you deployed it using back4app containers this showcases back4app’s full suite of tools that allows you to build apps from ideation to launch with minimal overhead as a next step, you can extend the project with features like recurring expense templates, csv imports, or push notifications for budget overruns all of these enhancements fit naturally into the same back4app workflow define new classes or cloud functions with claude, secure them with beforesave hooks, and roll out updates through back4app containers this approach lets you improve your app without disrupting users or changing hosting providers