Let's find the cat!

Dengun Frontend Exercise Level 2

See here joaovbrandon.github.io/lets-find-the-cat.

To login use a GitHub user and any password longer than 4 characters

Example with my GitHub user

Username: joaovbrandon

Password: 1234

Prerequisites

You need Node.js and Yarn (or use NPM) to run it.

Run

Run yarn or npm i then npm start.

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Build

Run yarn build or npm run build.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Deploy to Github Pages

Run yarn deploy or npm run deploy.

The Exercise

Front-end Exercise Level 2 "Let's find the cat"

Goals of the exercise

The main goal of this exercise is to create a web app to donate money to find lost pets. With this app, it will be possible to see lost and found pets and to simulate the donation to support them.

Page sections

The page will have 3 main sections:

• Header: fixed to the _viewport, it will have the app logo (with a link to the root) and a button to show the following info:
  • if the user isn't logged it should show a form with 2 fields (username and password). After we submit the form we assume that everything is correct and the page state should change without refresh.
  • if the user is logged it should show a list of the donations already made by that user.
• Central section with the lost and found pets: Should have the title 'Lost and Found Pets', a filter and order, the animal cards list and a pagination section.
• Footer: section with generic information such as copyright, social media icons with the respective link.

Details about the Central Section

• Each animal should be represented in the component 'card' that was done on the previous exercise if needed it can suffer some adaptations.
• Only 6 cards should be shown at each time, with 3 cards per line. In smaller dimensions such as <=768px it should show one card per line.
• Filters and order fields should be in a panel above the cards. Each field should have a proper label and they must include:
• Filter by region.
• Order by the date the pet was lost.
• Order by pets name.
• Below the cards list the pagination component should be included. This pagination should include next and previous page if those are available.
• For each card, the donate button should open a dialog box with a form with a field where we can enter the amount we want to donate (The maximum amount should be 10.00 dollars). After the submission, a donation should be created for the respective animal and user. If the user isn't logged in this button should be disabled.

Interactions and App State

None of the main interactions should imply the refresh of the page, the application should update each time its state changes. Whenever one of the following interactions occurs, a warning should appear that should disappear after 1 second. This warning can be a screen with a preloader or a dialog/modal and should have a message appropriate to the action ('loading', 'on', 'donating', etc.). None of the actions below should be possible while this message or screen is displayed.

• login - should occur when a login form (in the header) is submitted. It is not necessary to simulate an interaction with an API, simply update the state of the application to reflect the connected user. This will have an 'id' of 1 and the user name defined in the form
• donate - creates a donation corresponding to the user and the associated animal. After a successful donation, animation should be applied to the card in question
• display animals - the displayed cards must match the filter values (page number and region) and sort fields (disappearance date, animal name) reflected in the listing section. By default, missing cards must be sorted in descending order of disappearance date, and display the first 6 results.

App state

Each animal is defined by the following fields:

• id, a string or unique number for each animal
• type, which can be 'cat', 'dog' or 'other'
• dataPerdido, an object composed of three properties:
  • year: (eg 2019),
  • month: (can go from 1 to 12),
  • day: (can go from 1 to 31)
• owner, text with name of the person in charge of the animal
• owner number, text for owner's phone number
• locality, text with the name of the city

Already users require an 'id' (which can be 1, associated after login) and a user name. The password need not be taken into account.

Donations, in turn, are characterized by three key characteristics. However, the user is free to associate them with another entity, as he deems appropriate:

• idAnimal: identification of the animal
• idUser: identification of the donor (user)
• amount: the monetary value of the amount

General requirements

• With the exception of the library React.js it's not allowed to use other libraries, frameworks or external stylesheets.
• the event's association should be done in the script and not directly in the element by 'on' attributes' such as 'onClick'.
• the id attribute shouldn't be used for styling except in the forms field and list items.
• don't use the element
  
• should be cross-browser compatible (Google Chrome, Mozilla Firefox e Microsoft Edge).

License

This project is licensed under the MIT License - see the LICENSE.md file for details.