Quickstarters
How to Create a Basic CRUD App with Preact?

48min
Overview
In this guide, you'll develop a CRUD (create, read, update, and delete) application using Preact. 
We will walk you through building a system that handles basic data operations, from initializing a Back4app project named Basic-CRUD-App-Preact to managing data effortlessly. This project provides a robust backend and a sleek, minimal frontend built with Preact.
We'll begin by setting up a new project on Back4app, then craft an efficient database schema—either manually or with the help of the Back4app AI Assistant. This design will support all essential CRUD functionalities.
Next, we introduce the Back4app Admin App, a drag-and-drop interface that simplifies data management. You can quickly add, modify, or remove records using this tool.
Finally, you will connect your Preact frontend to Back4app using REST/GraphQL , ensuring your backend is secure with advanced access rules.
By the end of this tutorial, you'll have a production-ready web application featuring user authentication and robust data management—all built with Preact and powered by Back4app.
Main Insights
Master building CRUD applications that efficiently manage data using a dependable backend.
Learn to design a scalable data model and integrate it with a Preact frontend for an optimal user experience.
Discover how the drag-and-drop Back4app Admin App simplifies create, read, update, and delete operations.
Understand deployment strategies, including containerization with Docker, to quickly launch your application.
﻿
Prerequisites
Before starting, please make sure you have:
A Back4app account and an initialized project.
For guidance, check out Getting Started with Back4app.
A Preact development environment.
Use tools like Preact CLI or equivalent, ensuring Node.js (v14 or later) is installed.
Basic knowledge of JavaScript, Preact, and REST APIs.
Refer to the Preact documentation if needed.
﻿
Step 1 – Setting Up Your Project
Initializing a Back4app Project
Sign in to your Back4app account.
Select the “New App” option on your dashboard.
Name your project: Basic-CRUD-App-Preact and follow the setup prompts.
Create New Project
﻿
After creation, your project will be visible on your Back4app dashboard, laying the groundwork for backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Structuring Your Data Model
For our CRUD app, you'll need several collections. Below are examples that outline the collections and fields essential for supporting CRUD operations.
1. Items Collection
This collection keeps details about each item.
Field
Data Type
Purpose
_id
ObjectId
Auto-generated primary key.
title
String
The name of the item.
description
String
A short description of the item.
created_at
Date
The creation timestamp.
updated_at
Date
Last update timestamp.
2. Users Collection
This holds user credentials and profile details.
Field
Data Type
Purpose
_id
ObjectId
Auto-generated primary key.
username
String
Unique username.
email
String
Unique email address.
password_hash
String
Hashed password for authentication.
created_at
Date
Account creation timestamp.
updated_at
Date
Last account update timestamp.
You can create these collections manually via the Back4app dashboard by adding a new class for each collection and defining the appropriate fields.
Create New Class
﻿
You can add columns by selecting a data type, naming the column, and setting default values and required flags.
Create Column
﻿
Using the Back4app AI Assistant for Schema Creation
The AI Assistant available in Back4app can auto-generate your schema based on a prompt describing your collections and fields. This feature expedites the setup and ensures consistency.
Steps to Use the AI Assistant:
Open the AI Assistant from your Back4app dashboard.
Input a detailed description of your data model.
Review the auto-generated collections and field definitions, then apply them to your project.
Sample Prompt:
Text
Create these collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create these collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
This approach saves time and guarantees a well-structured schema.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Introducing the Admin App
The Back4app Admin App provides a no-code interface to manage your backend data effortlessly. Its drag-and-drop functionality enables you to perform CRUD operations without hassle.
Activating the Admin App
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up your first admin user, which will also configure roles like B4aAdminUser and system collections.
Enable Admin App
﻿
After activation, log in to the Admin App to manage your data.
Admin App Dashboard
﻿
Performing CRUD Actions with the Admin App
Within the interface you can:
Add Records: Use the “Add Record” option in any collection (e.g., Items) to create new entries.
View and Edit Records: Select a record to see its details or modify its fields.
Remove Records: Delete entries that are no longer needed.
This intuitive tool enhances user experience by streamlining data management.
﻿
Step 4 – Connecting Your Preact Frontend to Back4app
With the backend in place, it’s time to integrate your Preact frontend.
Option A: Utilizing the Parse SDK
Install the Parse SDK:
Bash
npm install parse
npm install parse
﻿
Set up Parse in your Preact project. Create a file (e.g., src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Integrate Parse in a Preact component. For instance, build a component to fetch and display items:
JS
// src/components/ItemsList.js
import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import Parse from '../parseConfig';

const ItemsList = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };
    fetchItems();
  }, []);

  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ItemsList;
// src/components/ItemsList.js
import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import Parse from '../parseConfig';

const ItemsList = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Error fetching items:", error);
      }
    };
    fetchItems();
  }, []);

  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ItemsList;
﻿
Option B: Leveraging REST or GraphQL
If the Parse SDK is not viable, use REST or GraphQL for CRUD operations. For instance, to fetch items via REST:
JS
// Sample REST call to retrieve items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Sample REST call to retrieve items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
Integrate these API calls within your Preact components as required.
﻿
Step 5 – Enhancing Backend Security
Using Access Control Lists (ACLs)
Secure your data by assigning ACLs to your objects. For instance, to create a private item:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL: only the owner has read/write access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust CLPs for each collection to restrict access to authenticated or authorized users only.
﻿
Step 6 – Implementing User Authentication
Configuring User Accounts
Back4app utilizes Parse’s User class for managing authentication. In your Preact application, manage user sign-up and login as follows:
JS
// src/components/Auth.js
import { h } from 'preact';
import { useState } from 'preact/hooks';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import { h } from 'preact';
import { useState } from 'preact/hooks';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
A similar method can be used for login and managing sessions. Additional features like social authentication and password recovery can be set up via the Back4app dashboard.
﻿
Step 7 – Launching Your Preact Frontend with Web Deployment
Back4app’s Web Deployment feature lets you host your Preact application by linking a GitHub repository. In this part, you'll prepare your production build, commit your code, integrate with Web Deployment, and deploy your site.
7.1 Build Your Production Files
Open your project directory in a terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This generates a build folder with optimized static assets (HTML, JS, CSS, images).
3. Confirm that the build folder includes an index.html file and necessary assets.
﻿
7.2 Organize and Commit Your Source Code
Your repository should contain the complete Preact frontend source code. A sample directory structure:
Text
Basic-CRUD-App-Preact-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-Preact-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Example Files
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Enter your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Enter your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;
// src/App.js
import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;
﻿
Committing Your Code to GitHub
Initialize a Git repository (if not already done):
Bash
git init
git init
﻿
Stage your source files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of Preact frontend source code"
git commit -m "Initial commit of Preact frontend source code"
﻿
Create a new GitHub repository, for example, Basic-CRUD-App-Preact-Frontend.
Push your code:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Preact-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Preact-Frontend.git
git push -u origin main
﻿
﻿
7.3 Connecting Your Repository with Web Deployment
Go to the Web Deployment section in your Back4app dashboard, open your project (Basic-CRUD-App-Preact), and select Web Deployment.
Link your GitHub account as prompted, so Back4app can access your repository.
Select the repository (e.g., Basic-CRUD-App-Preact-Frontend) and choose the appropriate branch (e.g., main).
﻿
7.4 Deployment Configuration
Specify additional settings:
Build Command:
If a pre-built build folder is absent, set the build command (e.g., npm run build). Back4app will run this command during deployment.
Output Directory:
Define the output folder as build so that Back4app identifies the static files.
Environment Variables:
Add any necessary API keys or settings required by your application.
﻿
7.5 Containerizing Your Preact Application with Docker
If you prefer Docker, include a Dockerfile in your repository similar to:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the source code
COPY . .

# Build the app
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the source code
COPY . .

# Build the app
RUN npm run build

# Use Nginx to serve the built app
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Select the Docker deployment option in your Back4app Web Deployment settings.
﻿
7.6 Deploying Your Application
Click the Deploy button once configuration is complete.
Monitor the build process as Back4app fetches your code, builds, and deploys your application.
Once finished, Back4app will provide a URL where your application is hosted.
﻿
7.7 Verifying Your Deployment
Visit the provided URL to see your live site.
Test all functionalities to ensure every feature, including routes and assets, loads correctly.
If issues occur, review browser console logs and deployment logs in Back4app.
﻿
Step 8 – Wrap-Up and Future Directions
Great work! You've successfully developed a full CRUD application using Preact and Back4app. 
You set up a project named Basic-CRUD-App-Preact, defined robust database collections, and used the Admin App for efficient data management. 
You then connected your Preact frontend to your backend and implemented strict access controls.
What’s Next?
Enhance your Preact app with additional features such as detailed views, search capabilities, and real-time updates.
Incorporate more advanced backend logic like Cloud Functions or third-party API integrations.
Consult the Back4app documentation and other resources for deeper insights into optimization and custom configurations.
By following this tutorial, you’ve gained the skills to build a scalable, secure CRUD backend for your Preact applications using Back4app. Enjoy coding and exploring new features!
Field	Data Type	Purpose
_id	ObjectId	Auto-generated primary key.
title	String	The name of the item.
description	String	A short description of the item.
created_at	Date	The creation timestamp.
updated_at	Date	Last update timestamp.
Field	Data Type	Purpose
_id	ObjectId	Auto-generated primary key.
username	String	Unique username.
email	String	Unique email address.
password_hash	String	Hashed password for authentication.
created_at	Date	Account creation timestamp.
updated_at	Date	Last account update timestamp.
Updated 21 Feb 2025
Did this page help you?
Back4app Tutorials
How to Build a CRUD App with Ionic?