VueJS Challenge #1: Create a 3-page app to create/display loyalty cards

About the challenge

A few months back, some of my friends asked me to teach them about developing serverless applications with AWS Lambda. In response, I created the Serverless Challenge for them to complete. These challenges give them a problem to solve and some resources to act as hints. Since these challenges are not a step-by-step walkthrough, they would have to comb through the resources I have provided and develop their own solution. After two weeks, we meet about the solution over a 30min call and discuss.

I decided to use the same pattern to help everyone out there to learn another technology, VueJS. Like the Serverless challenge, we present a scenario and its requirements, along with helpful hints and resources to help you get started.

Scenario

You are the dev lead (aka 'the only dev') of a chain of restaurants. In the previous challenge series, we created an API of a loyalty application to automate creating loyalty cards. This app makes the waiters call the API manually (via Postman) to send requests to create loyalty cards. While they appreciate it's a step up from the paper-based method, they are starting to complain about how tedious it is.

In the Serverless challenge, we created an API that:

Creates a loyalty card
Displays all the loyalty cards in the database
Displays one selected loyalty card.

In the VueJS challenge series, we aim to create a frontend VueJS application that fully integrates with the backend we created in the Serverless Challenge. But for this first VueJS challenge, let's just focus on the front end.

Recommended Prerequisites

I highly suggest that you complete the following video course from VueJS Mastery (or its equivalent on other platforms) to have a solid grasp of the VueJS Concepts required for this challenge:

VueJS Mastery is a great place to learn VueJS. It is paid though, but I assure you it's a great place to spend your 20USD. You can see my full review of VueJS Mastery in this post.

Feel free to browse the contents of each course first to see if you already know them. If you do, let's get started :D

Specifications

In this challenge, we will create three pages:

CREATE CARD: A page to create a loyalty card
DISPLAY ALL CARDS: A page to see all the loyalty cards we just created
DISPLAY ONE CARD: On the display all cards page, you can click on a specific card to show more details.

You don't need a backend just yet, but I will provide sample data for each page for the front end to be ready for the next challenge.

To make your frontend development more effortless, we will use Bulma CSS.

Create Card (/cards/new)

On this page, create a form that asks for the following information:

First Name
Last Name
Membership Tier (Gold, Silver, Platinum values only)
Description of the user (long text field)

After submitting the form, the website must redirect the user to the display all cards page (/cards).

Use the form elements of Bulma for a clean form.

Display All Cards (/cards)

On this page, we show all the loyalty cards we have created. Since the backend is not yet integrated, just use this sample data to display three cards.

[
    {
        "card_number": "4444-1000-2000-1000",
        "first_name": "Jose",
        "last_name": "Rizal",
        "membership_tier": "gold"
    },
    {
        "card_number": ">",
        "first_name": "Juan",
        "last_name": "Luna",
        "membership_tier": "silver"
    },
    {
        "card_number": "4444-1000-2000-3000",
        "first_name": "Marcelo",
        "last_name": "Del Pilar",
        "membership_tier": "bronze"
    }
]

With this sample data, use the VueJS's v-for syntax to loop through this list and display data in your VueJS as below:

<template>
  <div>
    <div v-for="card in cards" :key="card.card_number">
      <p>{{ card.card_number }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        {...},
        {...}
      ]
    }
  }
}
</script>

Each card must have a clickable link that allows the user to see more details about the card, redirecting him to the display one card page (/cards/{card_number}, for example: /cards/4444-1000-2000-2000)

You can use Card Components of Bulma CSS to render this (or not; you can also choose another component type!)

Display One Card (/cards/{card_number})

On this page, we display more information about one specific card. You don't have to take note of the card_number specified in the path for this challenge yet.

{
    "card_number": "4444-1000-2000-3000",
    "first_name": "Marcelo",
    "last_name": "Del Pilar",
    "membership_tier": "bronze",
    "user_description": "Marcelo is a very particular customer. He knit-picks everything but he tips very well if you induldge all of his requests."
}