In this guide, we'll walk through how to build a backend system for a creative agency using Xano, a no-code platform. The system will allow clients to create projects, upload assets, and submit them for the agency's review. The agency can then accept the project, upload their own assets, and mark the project as complete. Let's get started!
Step 1: Set up the Data Model
The first step is to create a data model to represent the project and its associated data. In Xano, you can do this by navigating to the "Data" section and creating a new table.
- Create a new table called "Project."
- Add the following fields:
- `title` (Text)
- `customer` (Link to User table)
- `creativeID` (Link to User table)
- `state` (Enum with values: "draft," "pending," "accepted," "complete")
- `customerAttachments` (List of File attachments)
- `creativeAttachments` (List of File attachments)
The `state` field represents the current stage of the project, while the `customerAttachments` and `creativeAttachments` fields store the files uploaded by the client and the agency, respectively.
Step 2: Create the API Endpoints
Next, you'll need to create API endpoints to handle the various actions in the project lifecycle. In Xano, you can do this by navigating to the "APIs" section and creating new API groups and endpoints.
Create a New Project (Draft)
- Create a new API group called "Project."
- Create a new endpoint called "Create Project Draft."
- Set the input fields to `title` and `customer` (linked to the authenticated user).
- Set the `state` to "draft" by default.
This endpoint allows clients to create a new project in the "draft" state, with just a title and their user ID.
View Draft Projects
- Create a new endpoint called "My Draft Projects."
- Add a condition to filter for projects where `customer` is equal to the authenticated user and `state` is "draft."
This endpoint displays a list of the client's draft projects.
Upload Customer Attachments
- Create a new endpoint called "Project Upload Customer Attachment."
- Get the `projectID` and a `fileResource` (file upload) as input.
- Retrieve the project record and verify that the `customer` matches the authenticated user.
- Convert the `fileResource` to a file attachment metadata object.
- Update the project record by appending the new attachment metadata to the `customerAttachments` list.
This endpoint allows clients to upload files to their draft projects.
Mark a Project as Pending
- Create a new endpoint called "Mark Project Pending."
- Get the `projectID` as input.
- Retrieve the project record and verify that the `customer` matches the authenticated user.
- Update the project record by setting the `state` to "pending."
This endpoint allows clients to submit their draft project for the agency's review by marking it as "pending."
View Pending Projects (for Agency)
- Create a new endpoint called "Pending Projects for Creative."
- Add a condition to filter for projects where `state` is "pending."
This endpoint displays a list of pending projects for the agency to review.
Accept a Project (for Agency)
- Create a new endpoint called "Accept Project for Creative."
- Get the `projectID` as input.
- Retrieve the project record and verify that the `state` is "pending."
- Update the project record by setting the `state` to "accepted" and assigning the `creativeID` to the authenticated user.
This endpoint allows the agency to accept a pending project and assign themselves as the creative team for that project.
Upload Creative Attachments
- Create a new endpoint called "Project Upload Creative Attachment."
- Get the `projectID` and a `fileResource` (file upload) as input.
- Retrieve the project record and verify that the `creativeID` matches the authenticated user.
- Convert the `fileResource` to a file attachment metadata object.
- Update the project record by appending the new attachment metadata to the `creativeAttachments` list.
This endpoint allows the agency to upload files to an accepted project.
Mark a Project as Complete
- Create a new endpoint called "Mark Project Complete."
- Get the `projectID` as input.
- Retrieve the project record and verify that the `creativeID` matches the authenticated user and the `state` is "accepted."
- Update the project record by setting the `state` to "complete."
This endpoint allows the agency to mark a project as complete once they have finished their work.
View Completed Projects (for Client)
- Create a new endpoint called "My Completed Projects."
- Add a condition to filter for projects where `customer` is equal to the authenticated user and `state` is "complete."
This endpoint displays a list of completed projects for the client to review and download the final assets.
Step 3: Test and Debug
As you create each endpoint, you can use Xano's built-in "Run and Debug" feature to test it with sample data. You can also use the Swagger documentation to test the endpoints with different input values and see the responses.
Step 4: Save and Share as a Snippet
Finally, you can save your project as a "Snippet" in Xano, which allows you to share it with others or quickly spin up a new instance of the project. We've included a link to the Snippet for this project below, so you can try it out and experiment with it yourself.
[Link to Snippet]
Congratulations! You've now built a fully functional backend system for a creative agency project management workflow using Xano's no-code platform. Feel free to customize and extend this project to fit your specific needs.