Quickstarters
Building a CRUD Application with Qwik: A Comprehensive Tutorial

41min
Overview
In this guide, you'll learn to craft a fully functional CRUD (create, read, update, delete) application using Qwik. 
We’ll demonstrate essential operations for managing data while connecting your app to Back4app. Initially, you'll set up a Back4app project titled Basic-CRUD-App-Qwik to serve as the backend for data management.
Next, you'll configure a scalable database by defining collections and fields—either manually or with the assistance of the Back4app AI Agent. This ensures that your data model is optimized for handling CRUD tasks efficiently.
You'll then utilize the Back4app Admin App, a user-friendly drag-and-drop interface, to manage your collections seamlessly. This tool simplifies data operations by offering an intuitive way to create, update, and delete records.
Finally, you’ll integrate your Qwik frontend with Back4app using REST or GraphQL APIs, along with implementing robust security controls. 
By the end of this tutorial, your production-ready application will not only handle CRUD operations but also support user authentication and secure data access.
Essential Insights
Master the art of developing CRUD applications that effectively handle data using a reliable backend.
Discover methods to design an adaptable backend and merge it with a Qwik frontend for enhanced user interactivity.
Explore the advantages of a drag-and-drop admin interface (Back4app Admin App) to streamline CRUD functions.
Learn about deployment strategies, including Docker containerization, to swiftly launch your web application.
﻿
Prerequisites
Before starting, please ensure you have:
A Back4app account with a new project setup.
Visit Getting Started with Back4app for assistance.
A Qwik development environment.
Set up your project using the Qwik documentation. Ensure you have Node.js (version 14 or later) installed.
A basic understanding of JavaScript, Qwik, and REST APIs.
Consult the Qwik docs if you need a refresher.
﻿
Step 1 – Project Initialization
Establishing a New Back4app Project
Sign in to your Back4app account.
Click on “New App” in your dashboard.
Input the project name: Basic-CRUD-App-Qwik and follow the instructions to create your project.
Create New Project
﻿
Your new project will then appear on your dashboard, forming the backend foundation for your application.
﻿
Step 2 – Designing Your Database Schema
Crafting Your Data Model
For this CRUD app, you’ll define several collections. Below are examples outlining the necessary fields and types to help you create an effective database schema for handling CRUD operations.
1. Items Collection
This collection holds details for each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary key.
title
String
Name of the item.
description
String
Brief details about the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp of the last update.
2. Users Collection
This collection stores user details and authentication info.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary key.
username
String
Unique identifier for the user.
email
String
User’s unique email address.
password_hash
String
Encrypted password for login.
created_at
Date
Account creation timestamp.
updated_at
Date
Last update timestamp for the user account.
You can manually add these collections through the Back4app dashboard by creating new classes and configuring each column as needed.
Create New Class
﻿
Easily add fields by selecting the type, providing a name, and configuring default values and constraints.
Create Column
﻿
Leveraging the Back4app AI Agent for Schema Creation
The Back4app AI Agent can automatically generate your schema based on a descriptive prompt. This feature accelerates project setup and ensures consistency.
How to Operate the AI Agent:
Access the AI Agent:
Locate it in your Back4app dashboard or within your project settings.
Detail Your Data Model:
Provide a prompt that describes the collections and fields you require.
Review and Implement:
Evaluate the generated schema suggestions and apply them to your project.
Sample Prompt
Text
Create the following 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 the following 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 tailored for your application.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Introduction to the Admin App
The Back4app Admin App provides a no-code interface for managing backend data. Its intuitive drag-and-drop functionality lets you easily perform CRUD operations.
How to Enable the Admin App
Access the “More” menu from your Back4app dashboard.
Select “Admin App” and then click “Enable Admin App.”
Set up your admin credentials by creating an admin user, which will automatically establish roles and system collections.
Enable Admin App
﻿
After activation, sign in to the Admin App to manage your data effortlessly.
Admin App Dashboard
﻿
Performing CRUD Actions via the Admin App
Add Records: Use the “Add Record” button within any collection (e.g., Items) to create new entries.
View/Edit Records: Click on any record to inspect its details or make updates.
Remove Records: Utilize the delete function to eliminate obsolete entries.
This tool streamlines data operations, ensuring a smooth user experience.
﻿
Step 4 – Connecting Qwik with Back4app
Now that your backend is configured, it's time to integrate your Qwik frontend with Back4app.
Option: Using REST or GraphQL APIs
We'll employ REST API calls to interact with Back4app.
Example: Fetching Items via REST in Qwik
Create a Qwik component (e.g., src/components/ItemsList.tsx) that retrieves and displays items:
Text
// src/components/ItemsList.tsx
import { component$, useTask$ } from '@builder.io/qwik';

export const ItemsList = component$(() => {
  const items = [];

  useTask$(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();
      items.push(...data.results);
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  });

  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map((item: any) => (
          <li key={item.objectId}>
            {item.title} — {item.description}
          </li>
        ))}
      </ul>
    </div>
  );
});
export default ItemsList;
// src/components/ItemsList.tsx
import { component$, useTask$ } from '@builder.io/qwik';

export const ItemsList = component$(() => {
  const items = [];

  useTask$(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();
      items.push(...data.results);
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  });

  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map((item: any) => (
          <li key={item.objectId}>
            {item.title} — {item.description}
          </li>
        ))}
      </ul>
    </div>
  );
});
export default ItemsList;
﻿
This component uses the fetch API to call Back4app’s REST endpoint, retrieving the list of items.
For other CRUD operations (create, update, delete), integrate similar REST calls into your Qwik components.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Enhance your data security by setting ACLs on your objects. For instance, to restrict access to a specific item:
Text
async function createPrivateItem(itemData: { title: string; description: string }, ownerId: string) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          '*': { read: false, write: false }
        }
      })
    });
    const result = await response.json();
    console.log('Created private item:', result);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
async function createPrivateItem(itemData: { title: string; description: string }, ownerId: string) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          '*': { read: false, write: false }
        }
      })
    });
    const result = await response.json();
    console.log('Created private item:', result);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust CLPs for each collection to enforce default access policies, ensuring only authorized users can interact with sensitive data.
﻿
Step 6 – User Authentication
Establishing User Accounts
Back4app utilizes Parse’s User class for managing authentication. In your Qwik app, implement user sign-up and login as shown below.
Example: Sign-Up Component in Qwik
Text
// src/components/Auth.tsx
import { component$, useStore } from '@builder.io/qwik';

export const SignUp = component$(() => {
  const store = useStore({
    username: '',
    password: '',
    email: ''
  });

  const handleSignUp = async (e: Event) => {
    e.preventDefault();
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: store.username,
          password: store.password,
          email: store.email
        })
      });
      const data = await response.json();
      alert('User successfully registered!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  };

  return (
    <form onSubmit$={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={store.username}
        onInput$={(e) => (store.username = (e.target as HTMLInputElement).value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={store.password}
        onInput$={(e) => (store.password = (e.target as HTMLInputElement).value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={store.email}
        onInput$={(e) => (store.email = (e.target as HTMLInputElement).value)}
      />
      <button type="submit">Register</button>
    </form>
  );
});
// src/components/Auth.tsx
import { component$, useStore } from '@builder.io/qwik';

export const SignUp = component$(() => {
  const store = useStore({
    username: '',
    password: '',
    email: ''
  });

  const handleSignUp = async (e: Event) => {
    e.preventDefault();
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: store.username,
          password: store.password,
          email: store.email
        })
      });
      const data = await response.json();
      alert('User successfully registered!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  };

  return (
    <form onSubmit$={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={store.username}
        onInput$={(e) => (store.username = (e.target as HTMLInputElement).value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={store.password}
        onInput$={(e) => (store.password = (e.target as HTMLInputElement).value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={store.email}
        onInput$={(e) => (store.email = (e.target as HTMLInputElement).value)}
      />
      <button type="submit">Register</button>
    </form>
  );
});
﻿
A similar approach can be applied to login and session management. Additional options such as social authentication, email verification, and password recovery can be configured via Back4app.
﻿
Step 7 – Deploying Your Qwik Frontend via Web Deployment
Back4app’s Web Deployment service enables seamless hosting of your Qwik frontend by linking your GitHub repository. Follow these steps to deploy your site:
7.1 Create Your Production Build
Open your project folder in the terminal.
Run the build command:
Bash
npm run build
npm run build
﻿
This generates a build folder containing optimized static assets.
Confirm the Build:
Ensure the build folder has an index.html file along with associated asset directories.
﻿
7.2 Organize and Commit Your Code to GitHub
Your repository should include the full source for your Qwik frontend. A typical structure might be:
Text
Basic-CRUD-App-Qwik-Frontend/
|-- node_modules/
|-- public/
|   └── index.html
|-- src/
|   ├── root.tsx
|   ├── entry.tsx
|   └── components/
|       ├── ItemsList.tsx
|       └── Auth.tsx
|-- package.json
|-- README.md
Basic-CRUD-App-Qwik-Frontend/
|-- node_modules/
|-- public/
|   └── index.html
|-- src/
|   ├── root.tsx
|   ├── entry.tsx
|   └── components/
|       ├── ItemsList.tsx
|       └── Auth.tsx
|-- package.json
|-- README.md
﻿
Example: src/root.tsx
Text
// src/root.tsx
import { component$ } from '@builder.io/qwik';
import ItemsList from './components/ItemsList';

export default component$(() => {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>CRUD Application</h1>
      <ItemsList />
    </div>
  );
});
// src/root.tsx
import { component$ } from '@builder.io/qwik';
import ItemsList from './components/ItemsList';

export default component$(() => {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>CRUD Application</h1>
      <ItemsList />
    </div>
  );
});
﻿
Committing Your Code:
Initialize Git (if not already done):
Bash
git init
git init
﻿
Stage your files:
Bash
git add .
git add .
﻿
Commit your changes:
Bash
git commit -m "Initial commit of Qwik frontend code"
git commit -m "Initial commit of Qwik frontend code"
﻿
Create a GitHub repository:
For instance, name it Basic-CRUD-App-Qwik-Frontend.
Push your code to GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Qwik-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Qwik-Frontend.git
git push -u origin main
﻿
﻿
7.3 Connecting Your Repository to Web Deployment
Access Web Deployment:
Log into your Back4app dashboard, select your project (Basic-CRUD-App-Qwik), and navigate to the Web Deployment section.
Link to GitHub:
Follow on-screen prompts to connect your GitHub account.
Select the Repository and Branch:
Choose your repository (e.g., Basic-CRUD-App-Qwik-Frontend) and the relevant branch (e.g., main).
﻿
7.4 Deployment Configuration
Specify additional settings:
Build Command:
If a pre-built build folder isn’t included, set the command (e.g., npm run build).
Output Directory:
Define the output directory as build.
Environment Variables:
Insert any necessary variables like API keys.
﻿
7.5 Containerizing Your Qwik App with Docker (Optional)
If you opt for Docker, include a Dockerfile similar to:
Dockerfile
# Use Node for building the app
FROM node:16-alpine as build

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve the built app with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use Node for building the app
FROM node:16-alpine as build

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve the built app with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Then, select the Docker option in your Web Deployment settings.
﻿
7.6 Deploying Your Application
Click the Deploy button:
Once configuration is complete, hit Deploy.
Watch the Build:
Back4app will pull your code, build it, and deploy the container.
Receive Your URL:
After deployment, a URL will be provided where your app is hosted.
﻿
7.7 Verifying Your Deployment
Visit the URL:
Open the provided link in your browser.
Test the Functionality:
Check that all routes and assets load correctly.
Debug if Necessary:
Use browser developer tools and Back4app logs to troubleshoot issues.
﻿
Step 8 – Wrapping Up and Future Enhancements
Well done! You have successfully built a full-fledged CRUD app using Qwik and Back4app. 
You established the project Basic-CRUD-App-Qwik, crafted a detailed database schema for Items and Users, and managed data with the Admin App. 
Moreover, you connected your Qwik frontend to the backend and applied strong security measures.
Next Steps:
Expand Your Frontend:
Enhance your Qwik app with features like detailed item views, search functionalities, or real-time updates.
Add More Functionality:
Consider integrating advanced backend logic, third-party APIs, or role-based access control.
Explore Additional Resources:
Refer to the Back4app documentation and further Qwik tutorials for in-depth knowledge on performance improvements and custom integrations.
By following this tutorial, you now possess the know-how to create
Field	Data Type	Description
_id	ObjectId	Auto-generated primary key.
title	String	Name of the item.
description	String	Brief details about the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp of the last update.
Field	Data Type	Description
_id	ObjectId	Auto-generated primary key.
username	String	Unique identifier for the user.
email	String	User’s unique email address.
password_hash	String	Encrypted password for login.
created_at	Date	Account creation timestamp.
updated_at	Date	Last update timestamp for the user account.
Updated 25 Feb 2025
Did this page help you?
Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough
Building a Basic CRUD Application with Lit?