{"id":15561938,"url":"https://github.com/ebyrds/fixer-react","last_synced_at":"2025-03-29T04:43:23.633Z","repository":{"id":158105981,"uuid":"118678611","full_name":"EByrdS/fixer-react","owner":"EByrdS","description":"A React app that displays a summary of FX rates.","archived":false,"fork":false,"pushed_at":"2018-01-31T02:24:40.000Z","size":626,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-03T14:33:13.701Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EByrdS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-23T22:28:48.000Z","updated_at":"2018-01-27T00:49:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"8164756c-d37d-4c9c-9923-c0de95771809","html_url":"https://github.com/EByrdS/fixer-react","commit_stats":{"total_commits":67,"total_committers":1,"mean_commits":67.0,"dds":0.0,"last_synced_commit":"d37248f7082980e194ae30adde43a8955609c78f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EByrdS%2Ffixer-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EByrdS%2Ffixer-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EByrdS%2Ffixer-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EByrdS%2Ffixer-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EByrdS","download_url":"https://codeload.github.com/EByrdS/fixer-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246140541,"owners_count":20729797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T16:10:45.937Z","updated_at":"2025-03-29T04:43:23.617Z","avatar_url":"https://github.com/EByrdS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fixer-react\nA React app that displays a summary of FX rates.\n\nIt uses [fixer.io](fixer.io) API\n\u003e Fixer is an open-source, simple, and lightweight API for current and\nhistorical foreign exchange (forex) rates published by the European\nCentral Bank.The API updates rates daily around 4PM CET every working day.\nHistorical rates go back to 1st January, 1999.\n\n## Disclaimer\nThis app was created as an individual proyect to understand the groundings\nof SPAs, React, SASS, gulp and other dependencies. Due to the large\nammount of information, the tools used may not be fully exploited or may contain\nbizarre inconsistencies to the expert eye, comments and Pull Requests are very\nmuch welcomed.\n\nThis application comes with **no warranty** of any kind. Its data is obtained\nthrough [fixer.io](fixer.io) which in turn comes with **no warranty** as well.\n\n## Using the app\nOnce you have access to the code, and have installed `npm` (C9 have it installed\nby default), you need only to execute the following commands.\n\nFirst install `gulp` and `jest`, as they are needed in the process.\n```shell\nnpm install -g gulp\nnpm install -g jest\n```\n\u003e NOTE: You may need to prefix `sudo` for this commands to work:\n`sudo npm install -g gulp`.\n\nDownload the corresponding `npm` packages. These packages are specified in the\n`package.json` file. The command will create a `node_modules` directory.\n```shell\nnpm install\n```\n\nCreate the `dev` folder and open a listening port.\n```shell\nnpm start\n```\n\nOr create the production's `dist` folder and open a listening port.\n```shell\ngulp production\n```\n\n### Begin the Test Driven Development (TDD) cycle.\n```shell\nnpm test\n```\n\u003e NOTE: This npm command is defined in the `package.json`, it will run\n`jest --watch`. Changes to `.js` and `.test.js` files will trigger the execution\nof their individual tests. Run all test with `jest` or pressing `a` while its\ninterface is open.\n\n### Development\nBuild *dev* directory and listen with browserSync:\n```shell\nnpm start\n```\nThis will transform all JSX into JS, and SASS into CSS.\nThe resulting JS is inserted in a `build.js` file.\nThe resulting CSS is inserted in a `styles.min.css` file.\nThe corresponding changes to the `index.html` tags are made automatically.\n\u003e NOTE: `npm start` will execute the `gulp` script, which in turn\nexecutes gulp's `'default'` task. You can see this task in the `gulpfile.js`\nfile. This command behaves exactly as `gulp` or `gulp default`.\nA port to listen and display this directory is created\nthrough `browsersync`. The `gulpfile.js` is instructed to refresh all browsers\nwhen there is a change in the `app` directory, getting live feedback o changes.\n\n### Production\nBuild *dist* directory and listen with browserSync:\n```shell\ngulp production\n```\nThis will transform all JSX into JS, and SASS into CSS. It will\nconcatenate and minify all `.js` files into a single `build.min.js` file.\nIt will also concatenate and minify all `.css` files (previously transformed\nfrom `.scss` files) into a single `styles.min.css` file. The corresponding\nchanges to the `index.html` file, regarding `\u003cscript\u003e` and `\u003clink\u003e` tags are\nautomatically made to match the created compact version.\n\n## Gulpfile explained\nThe process of code transformation is carried out with `gulp`, the instructions\nare found in the `gulpfile.js` file. The tool\n[pump](https://www.npmjs.com/package/pump) is used for easier\ndebugging of the `gulpfile.js`.\n\n### 'default'\nThis is the process executed with the shell command `gulp`, in this proyect\nit is executed also with `npm start`.\n\nThe tasks executed are:\n1. `'sass'`\n2. `'transform'`\n3. `'replaceHTML-dev`\n4. `'copy-public-dev'`\n5. `'serve'`\n\n### 'sass'\nTake all the files in the `app/css` directory with a `.scss` file extension.\n\nThe files will be compacted and minified, a sourcemap is needed to debug this\nfile, otherwise errors will be shown as relative to the minified `.css` file\nwhich are useless for development intentions. This is done with\n`sourcemaps.init()` and `sourcemaps.write()`.\n\nTake all `.scss` files and transform them into readable CSS code.\n\n`gulp-clean-css` is used to eliminate unnecesary code in the resulting `.css`\nfile, making it lighter and thus faster to load for the browser.\n\nConcatenate all the code into a single file called `styles.min.css`. Finally\nplace this file in the `dev` folder and reload all browsers with `browsersync`\nto see their effect.\n\n### 'transform'\nA `'watcher'` is created with `watchify` and `browserify`. This watcher needs\nonly to receive the first `.js` file and will find all the other ones through\nthe `import` instructions.\n\nAll the JSX code is transformed into readable JS with `babelify`. Babelify in\nturn uses the presets `react` and `env` (in `package.json`) to know how to\nbehave.\n\nDebug is set to `true` and the options `cache`, `packageCache` and `fullPaths`\nare needed for watchify to properly work.\n\nWhen there is an `'update'`, the `bundle` function will be executed. This\nfunction contains the same code as the `'transform'` gulp task.\n\nThe `'transform'` task creates a \"bundle\" of these JS files and writes the\noutput inside the `dev` directory, with the filename `build.js`.\n\n### 'replaceHTML-dev'\nAs JS and CSS files are concatenated into new compact versions, the `index.html`\nfile needs to know where they are located and how they are named.\n\nThe `index.html` file is taken, and the code inside the `\u003c!-- build:js --\u003e`\nand `\u003c!-- build:css --\u003e` tags is changed to point to the correct created files.\n\n### 'copy-public-dev'\nThis process takes all files inside the `public` directory and copies them\nexactly into the `dev` folder.\n\n### 'serve'\nA server is connected with `gulp-connect`. `browser-sync` is initialized.\n\nGulp will watch changes with the `gulp.watch` commands. Changes to SCSS files\nwill trigger the transformation of SCSS into the single CSS file and reload\nbrowserSync. Changes to JS files trigger only the browserSync to reload, as its\ntransformation process is handled with the `watcher.on('change', bundle)`\ninstruction.\nChanges to the `index.html` file trigger its copy and tag replacement, followed\nby the reload of browserSync.\n\n### 'production'\nThe production process is very similar to the default.\n\nThe JS build process is\ndifferent: it will create an uglified version for a lighter file and faster\nbrowser performance.\n\nThe CSS does not need sourcemaps for debugging (as debugging is unnecesary in\nthe production environment), and so they are not created.\n\nThe difference of copying the `index.html` and `public` files is only in the\ndestination directory `dist`.\n\nA server is connected to show files in the `dist` directory and browserSync\ninitialized. No watching and reloading tasks are used in production.\n\n## App Context\n### Creation\nYou can recreate the behavior of this app by installing its corresponding\npackages individually. Packages were managed with `npm`. The app was created\nfrom scratch in a C9 environment, with a 'blank' template.\n\n1. npm install -g gulp\n2. npm install -g jest\n3. npm init\n4. npm install --save react react-dom\n5. npm install --save-dev babel-cli babel-preset-env babel-preset-react\n6. npm install --save-dev pump\n7. npm install --save-dev gulp\n8. npm install --save-dev gulp-sass\n9. npm install --save-dev browser-sync\n10. npm install --save-dev gulp-sourcemaps\n11. npm install --save-dev gulp-uglify\n12. npm install --save-dev gulp-clean-css\n13. npm install --save-dev gulp-html-replace\n14. npm install --save-dev gulp-connect\n15. npm install --save-dev vinyl-source-stream\n16. npm install --save-dev browserify\n17. npm install --save-dev watchify\n18. npm install --save-dev gulp-streamify\n19. npm install --save-dev babelify\n20. npm install --save-dev gulp-concat\n21. npm install --save-dev babel-jest\n22. npm install --save-dev jest\n23. npm install --save-dev jest-cli\n24. npm install --save-dev enzyme\n25. npm install --save-dev enzyme-adapter-react-16\n26. npm install --save-dev envify\n27. npm install --save-dev fusioncharts react-fusioncharts\n\n### References\n* [Gettin started with React](https://reactjs.org/docs/add-react-to-an-existing-app.html#installing-react)\n* [Getting started with Babel](https://babeljs.io/docs/setup/#installation)\n* [Getting started with Gulp](https://css-tricks.com/gulp-for-beginners/)\n* [Easier gulpfile debugging with pump](https://www.npmjs.com/package/pump)\n* [Building React applications with Gulp and Browserify](https://tylermcginnis.com/react-js-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/)\n* [Display and reload the app with Browsersync](https://browsersync.io/)\n* [Getting started with Jest](https://facebook.github.io/jest/docs/en/getting-started.html)\n* [Expand Jest test suite with Enzyme](http://airbnb.io/enzyme/)\n* [Color pallete creation with coolors.co](https://coolors.co/)\n* [FusionCharts with React](https://www.fusioncharts.com/react-charts/#/demos/ex1)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febyrds%2Ffixer-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Febyrds%2Ffixer-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febyrds%2Ffixer-react/lists"}