joaorpereira / loan-app

Loan Application

---

About • Technologies • How to download the project • License

---

🔖 About

Loan Application is a website developed to allow the user to submit their loan application. Also, after the user do their submition, he/she are able to see the available loan options in the application.

This project was done as a technical challenge to improve my skills as a Frontend Developer and learn to use Typescript, React JS, React Testing Library and StoryBook. Also it was a part of With Clutch company assignment process.

Their data is from Unplash API: https://clutch-interview-service.herokuapp.com/

---

💻 FrontEnd

--- ### 🛠 Technologies

The following technologies/tools were used:

• Typescript;
• ECS6+;
• ReactJs;
• CSS3;
• Material UI;
• HTML5;
• React Testing Library;
• Jest;
• Storybook;

---

📎 How to download the project

👉 Tools needed:

• Vscode was used in this project;
• Node.Js - Installed on your machine;
• Git - Installed on your machine;

👉 Install dependencies:

#->In the terminal:

# Install dependencies:
$ yarn

# Start the project
$ yarn start

# After loading the project it will automatically open a tab in the default browser.

# To run the tests
$ yarn test

# To run the tests in watch mode
$ yarn test:watch

# To run storybook
$ yarn storybook

---

📜 License

This project is under the MIT license. See the LICENSE file for more details.

loan-app's Issues

unit test - header

Mobile Design

storybook - button

add storybook

integration test - Confirmation Screen

Loan Information Screen

• Loan Purpose: It's a selector with the following options: Debt Consolidation, Personal, API error

• Amount: It's a positive number meaning the amount requested for the personal loan. (Number should be enforced here or have a validation for it)

• Loan term: It's a selector with the following options: 12 months, 24 months, 36 months, 48 months (only the number value is sent to the api without the word months)

• Display the offer information
  POST https://clutch-interview-service.herokuapp.com/offers

• If there's any error, display an error message in red in the UI.

• Submit button
  POST https://clutch-interview-service.herokuapp.com/submissions

create input

integration test - Loan Information Screen

add material ui and setup global theme

add husky

storybook - input

add prettier

create button

unit test - button

Desktop Design

unit test - card

Confirmation Screen

• Get upsell opportunities data passing the userId received in the submission endpoint
  https://clutch-interview-service.herokuapp.com/api/#/default/LoansController_getLoans

• Show expanded header

• Show Savings Available Button

• Add title

• Render upsell opportunities list

add eslint

unit test - input

add react router dom

add jest

create header

• simple header
• expanded header

storybook - header

create card

• add title
• add price
• add image
• add content
• add loan percentage
• add time remaining
• add button 'start saving'

storybook - card