https://github.com/acheema90/currency-converter

currency converter app in react
https://github.com/acheema90/currency-converter

Last synced: about 1 month ago
JSON representation

currency converter app in react

• Host: GitHub
• URL: https://github.com/acheema90/currency-converter
• Owner: acheema90
• Created: 2019-09-17T18:02:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T10:36:30.000Z (almost 2 years ago)
• Last Synced: 2023-03-07T21:05:30.961Z (almost 2 years ago)
• Language: JavaScript
• Homepage:
• Size: 1.17 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

## IMPORTANT

**To run the deployed app on gh-pages must click on 'load unsafe scripts' in Chrome.**

*This is because Chrome blocks http on https, and the Fixer API is only http in free version.*

 => RUN the app here: https://acheema90.github.io/currency-converter/

Video of working app:

https://www.loom.com/share/7d8fa612cd2b4348b86c9f8c9037bcdf

## Notes

This project was scaffolded with create-react-app (react-scripts).

In implementing the requirements, I observed that a single-page React App was the best solution.

No need for Redux or any other state-management libraries.

Only major external dependency besides the react-script defaults is axios, which is an excellent library for ajax requests.

To meet the time constraints all the css is App.css; usually, I use proper SCSS with a meaningful directory stcucture.

The Directory Structure is flat: 

    all the source code is in src.

    the index.html and favicon are in public.

    Build output in build, and so on.

Within src, the app is bootsrapped from index.js and App.js.

The bulk of the code and template is in Converter.js, which can be re-factored into smaller views using functional react components.

Constants.js has all the config needed for ConversionService.js, which fetches data from the Fixer API.

Used a React Portal to create the Modal.js which is used to show the Disclaimer in Disclaimer.js.

No explicit content was given for disclaimer, so I took the first question from https://fixer.io/faq as my disclaimer content.

## TODO

Unit testing.

Refactor css into proper SCSS with meaningful hierarchy.

Refactor the template logic in Converter.js into separate functional React Components.

Re-organize the src folder into components and services.

## 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.

### `npm run build`

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.


### `npm run deploy`

This will deploy app to gh-pages.

Which has already been done.

Link here:

https://acheema90.github.io/currency-converter/