Quickstarters
How to Create a CRUD Application with Remix?

34min
Overview
In this walkthrough, you'll learn how to build a CRUD (create, read, update, delete) application using Remix JS. 
We'll be using Back4app as our backend service to handle data storage seamlessly. This guide covers setting up a Back4app project, designing a dynamic data schema, and wiring up CRUD operations in your Remix JS application.
Initially, you'll set up a Back4app project, which we'll call Basic-CRUD-App-Remix, providing a scalable non-relational data store. 
You'll then create a data model by manually establishing collections and fields via the Back4app dashboard, or even use the integrated AI Agent for an automated setup.
Next, you'll explore the Back4app Admin App—a user-friendly interface that lets you easily manage your data using drag and drop operations. 
Finally, you'll connect your Remix JS application to Back4app through REST API calls, ensuring that your CRUD functionalities, along with user authentication, are robust and secure.
By the end of this tutorial, you'll have a production-ready Remix JS application capable of performing basic CRUD operations along with secure user management.
What You Will Learn
How to build a CRUD app with Remix JS and a reliable backend.
Best practices for structuring your backend and integrating it with a Remix JS frontend.
How to use the Back4app Admin App to simplify data management tasks.
Techniques for deploying your Remix JS application, including containerization with Docker.
﻿
Prerequisites
Before you begin, make sure you have:
A Back4app account with a new project ready.
Need help? Visit Getting Started with Back4app.
A working Remix JS development environment.
You can use any modern code editor like VS Code. Node.js (version 14 or later) should be installed.
Basic knowledge of JavaScript, React, and RESTful APIs.
For a refresher, check out the Remix documentation.
﻿
Step 1 – Setting Up Your Project
Launching a New Back4app Project
Log in to your Back4app account.
Hit the “New App” button from your dashboard.
Name your project: Basic-CRUD-App-Remix and follow the steps to complete the creation process.
Create New Project
﻿
Once your project is ready, it will appear on your dashboard, providing the foundation for your backend.
﻿
Step 2 – Crafting Your Data Model
Establishing Data Structures
For this CRUD application, you'll define several collections in Back4app. Below are examples of the main collections and fields that will support your CRUD functionalities.
1. Items Collection
This collection will store details about each item.
Field
Data Type
Description
_id
ObjectId
Automatically generated unique identifier.
title
String
The name or title of the item.
description
String
A brief summary describing the item.
createdAt
Date
Timestamp for when the item was added.
updatedAt
Date
Timestamp for the last modification.
2. Users Collection
This collection manages user credentials and authentication information.
Field
Data Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique username for the user.
email
String
Unique email address of the user.
passwordHash
String
Hashed password for secure authentication.
createdAt
Date
Timestamp for when the account was created.
updatedAt
Date
Timestamp for when the account was updated.
You can create these collections and add fields directly from the Back4app dashboard.
Create New Class
﻿
To add a new field, simply choose a data type, input the field name, and set default values or mandatory options as needed.
Create Column
﻿
Using the Back4app AI Agent for Schema Generation
The AI Agent integrated into Back4app can auto-generate your schema based on your description, streamlining the initial setup.
How to Use the AI Agent:
Access the AI Agent:
Log into your Back4app dashboard and find the AI Agent in your project settings.
Describe Your Data Model:
Provide a detailed explanation of the collections and fields you need.
Review and Confirm:
The AI Agent will present a proposed schema. Verify the details and confirm the setup.
Example Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
This AI-assisted method speeds up the process and ensures your schema is perfectly tailored to your app's needs.
﻿
Step 3 – Activating the Admin App & Handling CRUD Operations
Overview of the Admin App
The Back4app Admin App provides a no-code interface that simplifies backend data management. Its drag-and-drop features make CRUD operations—like adding, editing, and deleting records—more intuitive.
Enabling the Admin App
Head over to the “More” menu in your Back4app dashboard.
Select “Admin App” and click on “Enable Admin App.”
Set up your admin account by entering your credentials. This will also configure roles (e.g., B4aAdminUser) and system classes.
Enable Admin App
﻿
After activation, log into the Admin App to manage your data with ease.
Admin App Dashboard
﻿
Performing CRUD Tasks via the Admin App
Inside the Admin App, you can:
Insert New Records:
Use the “Add Record” button within a collection (such as Items) to create new entries.
Inspect and Modify Records:
Click on any record to see its details and make edits.
Delete Records:
Remove any records that are no longer required.
This intuitive interface greatly enhances your data management experience.
﻿
Step 4 – Connecting Your Remix JS Application with Back4app
Now that your backend is set up, it’s time to integrate your Remix JS app with Back4app.
Using REST API Calls in Remix JS
Since the Parse SDK is not typically used with Remix JS, you'll perform CRUD operations via REST API requests.
1. Setting Up Your Remix JS Project
If you haven’t already, create a new Remix project:
Bash
npx create-remix@latest
npx create-remix@latest
﻿
Follow the prompts to choose your deployment target.
2. Making API Requests from Remix
Create API route files under the app/routes directory to handle CRUD operations. For example, you might have a file called items.server.js that includes functions for fetching, creating, updating, and deleting items.
Example: Fetching Items
Text
// app/routes/items.server.js
import { json } from "@remix-run/node";

export async function loader() {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  const data = await response.json();
  return json(data);
}
// app/routes/items.server.js
import { json } from "@remix-run/node";

export async function loader() {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  const data = await response.json();
  return json(data);
}
﻿
Similarly, you can create POST, PUT, and DELETE routes to handle item creation, updates, and deletions.
3. Connecting UI Components
In your Remix components, you can use hooks like useLoaderData to fetch data and fetch API or action functions to send data back to Back4app.
For example, in your React component:
Text
// app/routes/items.jsx
import { useLoaderData, Form } from "@remix-run/react";

export default function Items() {
  const data = useLoaderData();

  return (
    <div>
      <h1>Items List</h1>
      {data.results.map((item) => (
        <div key={item.objectId}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}

      <Form method="post">
        <input type="text" name="title" placeholder="Item Title" required />
        <textarea name="description" placeholder="Item Description" required />
        <button type="submit">Add Item</button>
      </Form>
    </div>
  );
}
// app/routes/items.jsx
import { useLoaderData, Form } from "@remix-run/react";

export default function Items() {
  const data = useLoaderData();

  return (
    <div>
      <h1>Items List</h1>
      {data.results.map((item) => (
        <div key={item.objectId}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}

      <Form method="post">
        <input type="text" name="title" placeholder="Item Title" required />
        <textarea name="description" placeholder="Item Description" required />
        <button type="submit">Add Item</button>
      </Form>
    </div>
  );
}
﻿
Integrate similar API calls for update and delete operations in your Remix actions.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Strengthen data security by setting ACLs for your objects. For instance, to create an item that is accessible only by its creator:
Text
// Example API call to create a private item using ACLs
async function createPrivateItem(title, description, userSessionToken) {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
      "X-Parse-Session-Token": userSessionToken,
    },
    body: JSON.stringify({
      title,
      description,
      ACL: {
        "*": { "read": false, "write": false },
        "USER_OBJECT_ID": { "read": true, "write": true }
      },
    }),
  });
  return response.json();
}
// Example API call to create a private item using ACLs
async function createPrivateItem(title, description, userSessionToken) {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
      "X-Parse-Session-Token": userSessionToken,
    },
    body: JSON.stringify({
      title,
      description,
      ACL: {
        "*": { "read": false, "write": false },
        "USER_OBJECT_ID": { "read": true, "write": true }
      },
    }),
  });
  return response.json();
}
﻿
Class-Level Permissions (CLPs)
Adjust CLPs in your Back4app dashboard to enforce default security policies, ensuring that only authenticated users can access specific collections.
﻿
Step 6 – Adding User Authentication
Configuring User Management
Back4app utilizes Parse’s built-in User class for managing authentication. In your Remix application, handle user registration and login using API calls.
Example: User Registration Endpoint
Text
// app/routes/signup.server.js
import { json, redirect } from "@remix-run/node";

export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get("username");
  const password = formData.get("password");
  const email = formData.get("email");

  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username, password, email }),
  });

  if (!response.ok) {
    throw new Error("Signup failed");
  }

  return redirect("/login");
}
// app/routes/signup.server.js
import { json, redirect } from "@remix-run/node";

export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get("username");
  const password = formData.get("password");
  const email = formData.get("email");

  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username, password, email }),
  });

  if (!response.ok) {
    throw new Error("Signup failed");
  }

  return redirect("/login");
}
﻿
Implement similar endpoints for login, session management, and password resets.
﻿
Step 7 – Deploying Your Remix JS Application
Back4app supports seamless deployment. You can deploy your Remix JS app using various strategies, including Docker.
7.1 Building Your Remix JS Application
Compile and Bundle:
Use your package manager and build scripts (e.g., via npm run build) to compile your app.
Verify the Output:
Ensure your build output contains all necessary files.
7.2 Project Structure Example
A typical Remix JS project may look like:
Text
Basic-CRUD-App-Remix/
|-- app/
|   |-- routes/
|   |   |-- items.jsx
|   |   |-- items.server.js
|   |   |-- signup.server.js
|   |-- components/
|       |-- ItemForm.jsx
|-- public/
|-- package.json
|-- remix.config.js
|-- README.md
Basic-CRUD-App-Remix/
|-- app/
|   |-- routes/
|   |   |-- items.jsx
|   |   |-- items.server.js
|   |   |-- signup.server.js
|   |-- components/
|       |-- ItemForm.jsx
|-- public/
|-- package.json
|-- remix.config.js
|-- README.md
﻿
7.3 Dockerizing Your Application
If you choose containerization, add a Dockerfile in your project’s root:
Dockerfile
# Use an official Node.js runtime as a base
FROM node:16-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Remix app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "start"]
# Use an official Node.js runtime as a base
FROM node:16-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Remix app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "start"]
﻿
7.4 Deploying via Back4app Web Deployment
Connect Your Repository:
Host your Remix JS source code on GitHub.
Configure Deployment:
In your Back4app dashboard, select the Web Deployment feature, link your repository (e.g., Basic-CRUD-App-Remix), and choose the correct branch.
Set Build and Output Commands:
Specify your build command (like npm run build) and the output directory.
Deploy Your App:
Click Deploy and monitor the logs until your app is live.
﻿
Step 8 – Wrapping Up and Future Directions
Well done! You’ve now built a CRUD application using Remix JS integrated with Back4app. 
In this guide, you set up a project called Basic-CRUD-App-Remix, defined collections for Items and Users, and managed data through the Back4app Admin App. 
You then connected your Remix JS app to Back4app via REST API calls, and implemented secure user authentication and data protection measures.
Next Steps:
Enhance Your Application:
Consider adding more features like search functionality, detailed item views, or real-time updates.
Expand Backend Capabilities:
Look into cloud functions, external API integrations, or more advanced access control.
Keep Learning:
Visit the Back4app documentation and explore additional Remix JS tutorials to further optimize your app.
Happy coding and best wishes on your Remix JS journey!
Field	Data Type	Description
_id	ObjectId	Automatically generated unique identifier.
title	String	The name or title of the item.
description	String	A brief summary describing the item.
createdAt	Date	Timestamp for when the item was added.
updatedAt	Date	Timestamp for the last modification.
Field	Data Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique username for the user.
email	String	Unique email address of the user.
passwordHash	String	Hashed password for secure authentication.
createdAt	Date	Timestamp for when the account was created.
updatedAt	Date	Timestamp for when the account was updated.
Updated 18 Feb 2025
Did this page help you?
How to Build a Basic CRUD App with Solid?
How to Create a CRUD App with Gatsby?