CASE | PICPAY FRONTEND

react, typescript, styled-componets, storybook, jest, heroku and more...

---

ABOUT THIS PROJECT

This project contains the entire frontend of the PayFriends application. This application was designed to meet the company's frontend development test PICPAY.

This application is also available at the links:

• Frontend https://case-picpay-frontend.netlify.app/
• Storybook https://case-picpay-frontend-storybook.netlify.app/
• API https://case-picpay-api.herokuapp.com/

// access credentials are:
  { 
    user: "usuario@gmail.com",
    password: "usuario"
  }

---

AVALIABLE SCRIPTS

At first, in the project directory, you need run:

// installing the dependencies
yarn install

// run json-server on http://localhost:8000/
yarn start:api

you can see the server in production at the link: https://case-picpay-api.herokuapp.com/.

// run project on http://localhost:3000/
yarn start

run the app in the development mode by opening http://localhost:3000 to view it in the browser. The page will reload if you make edits.

if you prefer, you can see the frontend application in production at the link: https://case-picpay-frontend.netlify.app/.

// creates .jest-test-results.json file to @storybook/addon-jest
yarn test:generate-output

// runs storybook on http://localhost:6006/
yarn storybook

OTHER SCRIPTS AVAILABLE

// runs the linter in all components and pages
yarn lint

// runs jest to test all components and pages
yarn test

// runs jest in watch mode
yarn test:watch

// creates a new component. to create a Button component, for example, run: yarn generate Button
yarn generate component <ComponentName>

// creates a new icon. to create a Arrow icon, for example, run: yarn generate icon Arrow
yarn generate icon <IconName>

// build project
yarn build

Learn how to install yarn through the official documentation.

---

MAIN TECHNOLOGIES USED

axios

To make queries on external API's.

typescript

To give more power to my JavaScript code.

react-router-dom

To manage the application routing system.

styled-components

To stylize my app as components.

---

ABOUT ME