WDTech Frontend Code Challenge

Welcome to WDTech's frontend coding challenge! This repo contains a basic Vue + Typescript app to help get you started on this challenge.

To get started, clone this repo and then run:

cd frontend-code-challenge
npm install
npm run dev

Tech Stack

The following has been setup already:

• Vue 3
• Typescript
• VueRouter
• Pinia
• Vite

You are more than welcome to add any other packages/libraries that you want to use.

Challenge

Goal:

This exercise has three main parts to it:

1. Create a grid of cards that display information about video game franchises.
2. Store "favorite" video game franchises in a store.
3. Build a form with basic validation in order to create a new item to display in the grid of cards.

Requirements:

Part 1: Create a Grid of Cards with Provided Data

Use the provided data set (list of video game franchises) in (src/data.json) to create a grid of cards that display the following information:

• Name
• Release Date
• Platform
• Genre
• Publisher
• Logo (image)
• Description
• a "favorite" button

The grid should display three (3) cards per row. How you design the individual cards is up to you. You will not be evaluated on your design skills, however, we'd like to see how you place various elements in a card using CSS.

The important thing is that the above information is displayed for each card.

Part 2: Store "Favorite" Video Game Franchises in a Store

Each card in the grid should have a button that adds the respective card into a "favorites" list. This list should be managed in a Pinia store so when users "favorite" or "unfavorite" a card, the list is updated accordingly.

Users should be able to view "favorites" by navigating to a separate route (e.g., /favorites). Each of the cards in this view must have the same information displayed as the cards in the main grid. There must also be a button or clickable element to "unfavorite" the respective card.

Part 3: Build a Form to Add a New Item to the Grid of Cards

Create a form that is data driven in order to minimize the amount of duplicated HTML in the template. All fields are required. The form should have the following fields along with their respective labels:

• Name (text input)
• Release Date (date input)
• Platform (select dropdown)
  • Options: PC, PlayStation, Xbox, Nintendo, Mobile
• Genre (text input)
• Publisher (text input)
• Description (text input)

When submitting a valid form, the new item must be added to the grid of cards. You do not need to add a new image for the new items.

Acceptance Criteria:

• Use Vue Router to navigate between the main grid and the favorites view.
• Iterate through the provided data set to display the cards in a 3-up grid.
• Form fields must be generated dynamically based on component reactive data.
  • Each form field be required and valid before submission.
• Upon clicking the submit button:
  • The user is navigated to the main page with the new item added to the list when valid.
  • The user is displayed an error message or an alert when the form is invalid.

Optional Bonus Features:

• Composition API is preferred but not required.
  • You can use the Options API if you prefer.
• Implement the ability to remove a card from the main grid.
• Implement some accessibility features:
  • Keyboard navigation.
  • Visually hidden labels that screen readers can still see.
• Ability to upload an image for the new item.
• Write unit tests for components and or logic.
• Implement custom validation logic (e.g., text fields could have length constraints or a regex pattern).