Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env
.env.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
8 changes: 8 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
src/@generated
build
convertImportsCodemod.js
convertRelativeImports.js
createMapping.js
deleteIndex.js
testBenchmark.js
updateIndexImports.js
2 changes: 1 addition & 1 deletion CNAME
Original file line number Diff line number Diff line change
@@ -1 +1 @@
2140.dev
2140-dev
29 changes: 29 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](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.

## Evaluations
### How much time did you end up spending on it?
I ended up spending 6-7 hours on it. Mostly because of later refactoring and general clean-up of the code. I also spent some time playing with styling, because I personally enjoy working with SCSS.

### What are some of the design decisions you made?
I took inspiration from some of the other currency exchange sites and decided to have default values already on first load; in this case, I chose EUR to USD. Additionally, I thought a basic, yet convenient feature would be a "Reverse/Swap" button to quickly and easily reverse the direction of the exchange rate.
Lastly, I did some reading and noticed the standard graph to represent exchange rates over time is a candlestick graph, so I decided to use this and not change the default green/red colors, since they are standard practice.

### What do you like about your implementation?
I like the use of React Hook form, it helps updating and managing input values; plus, I can easily access the form values from the parent component through the `useForm()` hook and pass them down to its children. I am also satisfied with the way I was able to organise the code. The `Result` and `FXChart` component are completely independent from one another and are in charge of calling their own API endpoints; any changes, deletions or improvements to one component will have no impact on the other.

### What would you improve next time?
I would definitely implement a more detailed and comprehensive error handling solution. I would also add a loader or some kind of UI element to let users know the data is being fetched. Lastly, I think it'd be nice to format the exchange rate float according to each user's local settings, i.e. 4.56 for US users and 4,56 for Europeans.
46 changes: 46 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
rules: {
// TypeScript specific rules
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/no-explicit-any': 'on',
'@typescript-eslint/no-empty-function': 'off',

'react/jsx-filename-extension': [
'warn',
{ extensions: ['.jsx', '.tsx', '.ts'] },
], // Allow jsx syntax in .jsx and .tsx files
'react/jsx-props-no-spreading': 'off',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',

// General JavaScript/ESLint rules
'no-console': 'warn',
eqeqeq: ['error', 'always'],
curly: 'error',
'no-trailing-spaces': 'error',
'eol-last': ['error', 'always'],
indent: ['error', 2, { SwitchCase: 1 }],
quotes: ['error', 'single'],
semi: ['error', 'always'], // Require
},
settings: {
react: {
version: 'detect',
},
},
};
1 change: 0 additions & 1 deletion index.html

This file was deleted.

Loading