Demo Application

We gained hands-on experience with the Marqeta API endpoints in the previous chapter. Let's integrate those endpoints into a functional application.

Workflow

Our demo application is a digital wallet that can send and receive money. We also get a VISA debit card to make payments using the pay-by-card method. The workflow of the application is as follows:

1. When we run the application, the first page we see is the landing page of our application.

2. From there, we can either go to the "Sign In" or the "Sign Up" page.

   1. Sign In: The sign-in page requires an email and password from the user to sign in to the account.

   2. Sign Up: The signup page requires first name, last name, email, and password to sign up the user. This page calls the create user endpoint and makes a GPA order of $100 to the user's account.

3. After successful sign-in or signup, the user's wallet appears. This page displays the user's balance and a user card. It also provides quick links to send, deposit, and receive money in a sandbox using simulated transactions and GPA order endpoints. 

4. If we click the "Transaction" button in the vertical nav bar, the "Transaction" page appears, where we can see all user transactions.

5. If we click the name button on the top right of the screen, the "Profile" page is loaded, which is responsible for displaying the user's information and other account settings.

6. The logout button in the bottom left section logs out the user and takes the user back to the landing page.

Demo application

The widget below contains the code for our application. Press the "Run" button to see the React application in action.