Open Source Exchange Application based on Open Exchange Rate
This project was bootstrapped with Create React App.
- Conversion between 3 different currencies: USD, EUR and GBP
- Exchange Rate based on Open Exchange Rate
- Save Pocket amount between session by using Local Storage API.
- Responsive and Simple Design
- Recoil: State Management
- Grommet: Design System powered by styled-components
- Typescript: Project compiler
- Jest: Test runner
- react-testing-library: Testing library
- Es-lint: Project linter
- Prettier: Code formatter
- Travis CI: CI setup
In the project directory, you can run:
Runs the app in the development mode.
Open 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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Run eslint with react-app configuration
Thanks to Grommet responsiveness, the application is able to adapt very well to several screen sizes.
| Desktop | Tablet | Mobile |
|---|---|---|
 |
 |
 |
 |
 |
 |
Travis will execute the following commands in all the branches of the project:
- yarn lint
- yarn test
- yarn build
Every time a commit is pushed to master it will deploy the website to Github Pages.
For more information about the Travis CI configuration, refer to .travis.yml.
When running the project locally, there is a warning that exists on every component using useRecoilState or useRecoilValue. The error has the following information:
1.chunk.js:99662 Warning: Cannot update a component (`Batcher`) while rendering a different component (`ExchangePanel`). To locate the bad setState() call inside `ExchangePanel`, follow the stack trace as described in https://fb.me/setstate-in-render
in ExchangePanel (at App.tsx:37)
in div (created by StyledBox)
in StyledBox (created by Box)
in Box (at App.tsx:31)
in div (created by StyledBox)
in StyledBox (created by Box)
in Box (at App.tsx:30)
in form (created by Form)
in Form (at App.tsx:29)
in main (created by StyledBox)
in StyledBox (created by Box)
in Box (created by Main)
in Main (at App.tsx:18)
in App (at src/index.tsx:13)
in div (created by StyledGrommet)
in StyledGrommet (created by Grommet)
in Grommet (at src/index.tsx:12)
in RecoilRoot (at src/index.tsx:11)
in StrictMode (at src/index.tsx:10)
This issue has already been reported and the recoil team is working on it. To know more about this issue, please follow this thread.
MIT.