Cards Challenge

Single Page Application that allows users to interact with a playground of cards.

---

Table of Contents

Installation
Summary
What libraries are used?
How does it look?
Scripts

Setup

To execute the project you will need open two terminals and run the following commands:

Clone the repository

git clone https://github.com/guilean/cards.git

Change to cards path

cd cards

Install node dependencies

yarn install

Server

Change to server path cd server

cd server

Install server dependencies

yarn install

Execution

Run dev script to run concurrently server and client locally

yarn dev

Once the above commands are executed, you will be able to interact with the application. The server runs on port 4000 and the client on 3000.

Summary

Create a Single Page Application to display a list of cards, users should be able to perform following actions:

• Delete
• Edit
• Search
• Navigate

Delete

User should be able to remove a card from the list.

Edit

User should be able to edit a card in a different page. Image and name are required.

Search

User should be able to search cards by name.

Navigate

User should be able to navigate across different pages.

Libraries

This project has been created using Create React App. This project uses the following dependencies:

• @craco/craco: used to create alias path without ejecting CRA
• @heroicons/react: used to have icons
• @reduxjs/toolkit
• @testing-library: used to test the application in a user-centric way
• react-lazy-load-image-component: used to lazy load images and other components
• axios: used to fetch HTTP in the browser
• lodash/debounce: used to debounce search on type
• react-router-dom: used to split the application in different pages/routes
• redux-persist: used to persist the data in local storage through a middleware
• tailwindcss: used to have utility classes

Responsive UI

Show

Desktop

Mobile

Scripts

To run the application in local

yarn start

To run tests

yarn test