Giter VIP home page Giter VIP logo

frontend-take-home-assignment's Introduction

Origin Frontend Take-Home Assignment

Origin is a platform that helps our customers' employees put their financial lives on track.

One key to financial well-being is planning & saving for your goals. Users can have many saving goals (e.g. go to college or throw a wedding party) and it is our job to help them accomplish it.

You will build a piece of our savings feature by creating the savings plan simulation screen.

The Saving Goal Plan Simulation Screen

Saving Goal Plan Mockup Desktop

You will build a screen where the user will simulate saving towards the "Buy a house" savings goal. In it, the users choose (i) the value they want to save and (ii) the date they plan to reach the goal.

When the users change the value of any of the inputs, the monthly deposit value is calculated and displayed to them.

Development Instructions

We expect you to:

  1. Develop the page as close as possible to the mockups, both on mobile & desktop.
  2. Implement business rules.
  3. Test the codebase.

Assets

You can find the layout mockups here on our Figma project: Layout mockups

Once you have opened the link you must sign up and log in so you can have access to the colors, fonts, margins and assets information.

Money input

The money input component should:

  • Allow only numbers
  • Display the value formatted as money (e.g 3500.45 should be 3,500.44)

Date input

The date input component should:

  • Allow only future dates
  • When clicking on the arrow buttons it should go up and down month by month
  • The users should be able to move the months by typing the Left and Right arrow key on the keyboard

Confirm button

You don't need to add any action on the confirmation button

Project structure

We've added a project structure (build system with react, redux, jest, styled-components and typescript) so you don't waste your time with configuration. If you are more comfortable with a different stack, feel free to change it.

Delivery Instructions

We expect you to deliver your final code with one of these options:

  • You can open a Pull Request to this Github repository.
  • You can send to us the link for your repository (make sure to make it public)

Usage

This project requires Node >=12 and NPM >= 6.

After you have cloned this repo, install the dependencies with:

npm install

You can then start the application running:

npm run dev

That's it. Just Access http://localhost:1234 in your browser.

Linting

npm run lint

Testing

npm run test

frontend-take-home-assignment's People

Contributors

matheuspoleza avatar vagfsantos avatar joaodepaula avatar maryfsc avatar dependabot[bot] avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.