VueJS Challenge #1:  Create a 3-page app to create/display loyalty cards
Tags: vue, javascript, challenge, tutorial
Published: 2021-07-04 09:23:11

## 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](https://dev.to/raphael_jambalos/challenge-1-create-a-simple-app-in-lambda-dynamodb-serverless-framework-of6) 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](https://dev.to/raphael_jambalos/challenge-1-create-a-simple-app-in-lambda-dynamodb-serverless-framework-of6), 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](https://www.vuemastery.com/) (or its equivalent on other platforms) to have a solid grasp of the VueJS Concepts required for this challenge:

- [Intro to Vue 2](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/)
- [Real World Vue 2](https://www.vuemastery.com/courses/real-world-vue-js/real-world-intro/)

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](https://dev.to/raphael_jambalos/user-review-learning-vuejs-from-vuemastery-com-2fp5).

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7k98o27fw3cahij3n42r.gif)

## 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](https://bulma.io/).

#### 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](https://bulma.io/documentation/form/) 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.

```json
[
    {
        "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:

```js
<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](https://bulma.io/documentation/components/card/) 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.

```json
{
    "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."
}
```

## Show off your work!

Comment a screencap of your work below. Or better yet, create a blog post here in dev.to explaining how you did it. 

If you have any questions or are stuck somewhere, comment below or send me a pm, and I'd be happy to help you.


Photo by <a href="https://unsplash.com/@christinhumephoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Christin Hume</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>