Skip to content

Latest commit

 

History

History
112 lines (76 loc) · 4.5 KB

Fullstack.md

File metadata and controls

112 lines (76 loc) · 4.5 KB

Finmid Full-Stack Challenge

The goal for this project is to update and use the provided APIs (in the package api) to build a very simple dashboard where users can see their company's (also referred to as SME, Small/Medium Enterprises) card transactions.

The dashboard should not be accessible to the general public, and the user must login first using a json web token provided by the API.

Specification

  • Must use Typescript and React.
  • Authentication
    • User must be able to login and logout
    • If the token expires, user must be logged out

Backend

  • Finish migrating the API to GraphQL
    • We have already set up the GraphQL server and migrated the users endpoint. You will need to migrate the sme-data and transactions endpoints.
    • The auth service does not need to be migrated to GraphQL

Frontend

  • Create a simple dashboard
    • Should not be accessed by unauthenticated users
    • In the header of the dashboard, please display the legal name of the SME, the name of the user currently logged in, and allow them to logout
    • Display the transaction feed.
      • Display only current SME's transactions
      • Each transaction item must display:
        • Merchant name
        • Merchant icon
        • Formatted date (dd.mm.yyyy format, so something like 16.03.2021)
        • Formatted value with the correct currency
  • When making requests to the API make sure to have the proper query states setup - show loading states when appropriate

Evaluation

Your code will be evaluated by the following criteria:

Correctness:

  • Are all the requirements fulfilled?
  • Is the user able to perform the actions described in the specification?

Usability:

  • Is it easy to use for the user?
  • Is the UI responsive?
  • Does it communicate properly when it's loading data or when there's an error?

Code quality:

  • Is the code well organized and easily readable?
  • Is it consistent with the rest of the code in the repository?

Bonus

You are not required to tackle these, but if you do we will take it into consideration:

  • unit, rendering or end-to-end tests
  • deployment configuration
  • beautiful and clean interface

We do recommend that you use a UI library like @mui/material-ui to make everything look consistent, but it's not required.

There's also a security flaw in the API, can you identity what it is?

Submission

Clone this repository, and create a private repo with your submission in the main or master branch. The final solution must be merged into main branch. Please avoid pull requests. Next step is to add @finmid-hr as collaborator. We will do our best to look into your code as soon as possible, but if for some reason we don't get back to you, please send us an email to people@finmid.com.

The API

The API contains a few endpoints that you'll need to use (or migrate to GraphQL) to build the dashboard. The available endpoints are:

  • POST /login
  • GET /users
  • GET /smes
  • GET /transactions

We have a Swagger UI available and runs alongside the API at http://localhost:3000/docs. There's also a simple GraphQL playground available at http://localhost:3000/graphql.

Packages

Package name Description Available at Swagger Docs
api Simple Express.js API http://localhost:3000 http://localhost:3000/docs
client React application, bootstrapped using Vite.js http://localhost:3300 N/A
lib-common Common types shared by the API and potentially the client N/A N/A

Mock data and run the services

pnpm run create-data

The data for the API is stored in packages/api/src/data, in the form of json files. Run this command before the other ones, to generate the data and get started with the API.

$ pnpm run create-data

✨ Created Users: packages/api/src/data/users.json
   Users and passwords:
      gandalf.the.grey@test.com / 123code
      frodo.baggins@test.com / 123code
      gollum@test.com / 123code
✨ Created SMEs: packages/api/src/data/smes.json
✨ Created Transactions: packages/api/src/data/transactions.json

pnpm run start

Serves the React application using Vite.

pnpm run backend

Starts the Node API.