CRUD app with data


ā± This guide takes less than 10 minutes.

Hello there, Beginner!

This guide is meant to show you around Begin's CRUD app which demonstrates how to build a simple todo app using Begin Data.

āœ‹šŸ½ You will need git, node.js and a GitHub account to follow along.


Create your CRUD app


First click the Deploy to Begin button below

Deploy to Begin

Next name your app and click the "Create..." button to have Begin create a new app and GitHub repo for it.

Name your Begin app and repo


Check out your apps' activity feed!

Now click the Staging link in the upper left corner to see your app running in your staging environment.

Begin Activity view


You should see something like the image below: CRUD Starter


Way to go!

Now go back to Begin and follow the prompts on the intro cards to see the system in action.

šŸ’” Learn more about CI/CD environments


Project structure

If you followed the intro cards in the activity view you are ready to review your project's structure on your local machine.

.
ā”œā”€ā”€ public/
ā”‚   ā”œā”€ā”€ 404.html
ā”‚   ā””ā”€ā”€ index.html
ā””ā”€ā”€ todos/
    ā”œā”€ā”€ create/
    ā”‚   ā””ā”€ā”€ index.js
    ā”œā”€ā”€ delete/
    ā”‚   ā””ā”€ā”€ index.js
    ā”œā”€ā”€ read/
    ā”‚   ā””ā”€ā”€ index.js
    ā””ā”€ā”€ update/
        ā””ā”€ā”€ index.js

Let's go over each of the directories in the project.

public/

The public directory is where we serve our static assets from. For this project the file to look at is /public/index.html.

šŸ“ Look for the <form> tags and inspect their action attribute to see what HTTP Function they make requests to.

todos/

This folder is where we keep HTTP Functions for the apps CRUD actions.

todos/create/

Create

POST requests to the /todos route are processed by the handler function inside index.js in this folder. This handler creates todos by storing form data posted to it with Begin Data.

todos/read/

Read

GET requests to the /todos route are processed by the handler function inside index.js in this folder. This handler gets all the stored todos from Begin Data.

todos/update/

Update

POST requests to the /todos/:id route are processed by the handler function inside index.js in this folder. This handler updates the todo with the same id as the one passed in from the URL parameter.

todos/delete/

Delete

POST requests to the /todos/delete route are processed by the handler function inside index.js in this folder. This handler deletes a todo with the same id as the one passed in from the form data.

Congratulations!

You've just built a CRUD todo app and API, and seen how Begin Data can persist data for your application's storage needs.

Now go show it off ā€“ people need to see this thing!


Learn more about DynamoDB

AWS DynamoDB is a fully managed, highly durable, non-relational key value and document database for applications that need performance at any scale.

Learn more about DynamoDB here!


Additional resources