{"id":19042377,"url":"https://github.com/yaairfernando/crypto-calculator","last_synced_at":"2026-04-10T16:32:02.993Z","repository":{"id":40187304,"uuid":"231013404","full_name":"yaairfernando/Crypto-Calculator","owner":"yaairfernando","description":"Cryptocurrency calculator with react and ruby and rails","archived":false,"fork":false,"pushed_at":"2023-01-19T16:38:00.000Z","size":323,"stargazers_count":1,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"development","last_synced_at":"2025-06-21T17:44:56.903Z","etag":null,"topics":["react","ruby","ruby-on-rails"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yaairfernando.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-31T02:43:18.000Z","updated_at":"2020-03-25T23:09:57.000Z","dependencies_parsed_at":"2023-02-01T07:01:23.253Z","dependency_job_id":null,"html_url":"https://github.com/yaairfernando/Crypto-Calculator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/yaairfernando/Crypto-Calculator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaairfernando%2FCrypto-Calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaairfernando%2FCrypto-Calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaairfernando%2FCrypto-Calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaairfernando%2FCrypto-Calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yaairfernando","download_url":"https://codeload.github.com/yaairfernando/Crypto-Calculator/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaairfernando%2FCrypto-Calculator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270191647,"owners_count":24542279,"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","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","ruby","ruby-on-rails"],"created_at":"2024-11-08T22:37:03.746Z","updated_at":"2026-04-10T16:32:02.952Z","avatar_url":"https://github.com/yaairfernando.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![LinkedIn][linkedin-shield2]][linkedin-url2]\n[![Hireable][hireable]][hireable-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n \u003ch2 align=\"center\"\u003e CryptoCurrency Calculator\u003c/h2\u003e\n\n  \u003cp align=\"center\"\u003e\n      In this project We'll put together a CryptoCurrency Calculator with Ruby and Rails and React \n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/YairFernando67/Crypto-Calculator\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/YairFernando67/Crypto-Calculator\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/YairFernando67/Crypto-Calculator/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/YairFernando67/Crypto-Calculator/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\n\u003c/p\u003e\n\n## Table of Contents\n* [About the Project](#about-the-project)\n  * [JSX](#JSX)\n  * [Html vs JSX](#Differences-between-html-and-jsx)\n  * [Class Components](#Class-Components)\n  * [Reusable Components](#Reusable-Components)\n  * [Component Nesting](#Component-Nesting)\n  * [Component Resuability](#Component-Resuability)\n  * [Component Configuration](#Component-Configuration)\n  * [Built With](#built-with)\n* [Required Installations](#Required-Installations)\n  * [Prerequisites](#Prerequisites)\n  * [Installing](#Installing)\n  * [Instructions](#Instructions)\n  * [Serve Project](#Serve-Project)\n* [Contact](#contact)\n* [Contributing](#Contributing)\n* [Show your support](#Show-your-support)\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\n![Screenshot Image](app/assets/images/logoRepo.png) \n\n### JSX\n\u003cp\u003e \n  JSX is essentially pure JavaScript but browsers do not know how to read JSX\n  so that's why we use Babel to convert it into JavaScript.\n\u003c/p\u003e\n\n### Differences between html and jsx:\n* Adding custom stying to an element uses different syntax\n* Adding a class to an element uses different syntax-\u003e Use className=\"btn\"\n* JSX can reference JS variables very easly.\n* Diferent syntax for the for property on labels use this syntax htmlFor=\"name\"\n\n### Class Components\n\n\u003ch4\u003eBenifits\u003c/h4\u003e\n  \n* Easier code organization\n* Can use 'state'(another React system) --\u003eMake it easier to handle user input\n* Understands lifecycle events --\u003e Make it easier to do things when the app first starts\n\n\u003ch4\u003eState\u003c/h4\u003e\n\n* It its only usable with class base components --\u003e Technically can be used with functional components using the \"hooks\" system\n* You will confuse props with state\n* 'State' is a JS object that contains data relevant to a component\n* Updating 'state' on a component causes the component to (almost) instantly rerender\n* State must be initialized when a component is created\n* State can only be updated using the function 'setState'\n\n### Reusable Components\n\n- PROPS\n  \u003cp\u003e \n  It is a system for passing data from a parent \n  component to a child component\n  Its goal is to customize or configure a child\n  component\n  When we use the props system, there are two\n  stages.\n  The first one is when we want to provide information\n  from the parent to the child\n  The second one is when the child makes use to this\n  information.\n  \u003c/p\u003e\n\n### Some concepts of a component in REACT:\n\n#### Component Nesting\n\n- A component can be shown inside of another\n\n#### Component Resuability\n\n- We want to make components that can be easily reused through out application\n\n#### Component Configuration\n\n- We should be able to configure a component when it is created\n\n### Built With\nThe project was developed using the following technologies:\n- [React](https://es.reactjs.org/)\n- [JSX](https://reactjs.org/docs/introducing-jsx.html)\n- [Axios](https://github.com/axios/axios)\n- [Ruby](https://www.ruby-lang.org/es/)\n- [Ruby on Rails](https://rubyonrails.org/)\n\n## Required Installations\n\n### Prerequisites\n\nThis project runs on [Ruby](https://www.ruby-lang.org/en/documentation/installation/), and [Rails](http://installrails.com/)\n\n* Node\n* NPM\n* Ruby\n* Rails\n\nAfter installation, run `ruby -v` to make sure Ruby installed correctly. Example\n```\n$ ruby -v\nruby 2.6.4p104 (2019-08-28 revision 67798) [x86_64-linux]\n```\n\nAlso make sure that Rails is installed, but running `rails -v`. \nExample\n```\n$ rails -v\nRails 6.0.2.1\n```\n\n### Installing\n\n\u003cp\u003eInstall the following to get this project running in your machine:\u003c/p\u003e\n\n### Instructions\n\n\u003cp\u003eFollow these steps:\u003c/p\u003e\n\nClone the Repository\n\n```Shell\nuser@pc:~$ git clone https://github.com/YairFernando67/Crypto-Calculator\n```\n\nClick on the console and to go to the folder that was created\n\n```Shell\nuser@pc:~$ cd Crypto-Calculator\n```\n\nThis project uses [Postgresql](https://tecadmin.net/install-postgresql-server-on-ubuntu/)\n\nInstalling dependencies\n\n```Shell\nuser@pc:~/Crypto-Calculator$ bundle install --without production\n```\n\n```Shell\nuser@pc:~/Crypto-Calculator$ rails db:create\n```\n\n```Shell\nuser@pc:~/Crypto-Calculator$ rails db:migrate\n```\n\nRun this command if you encountered a problem runing rails db:migrate\n\n```Shell\nuser@pc:~/Crypto-Calculator$ bundle exec rails db:migrate\n```\n\n### Serve Project\n\nOpen two tabs on the console on the same folder Crypto-Calculator\n\nStart the local server with rails:\n\n```Shell\nuser@pc:~/Crypto-Calculator$ rails s\n```\n\nStart the local server with react:\n\n```Shell\nuser@pc:~/Crypto-Calculator$ ./bin/webpack-dev-server\n```\n\nOpen your browser on [http://localhost:3000](http://localhost:3000)\n\n\n\n## Contact\n\n👤 **Yair Fernando Facio**\n\n\u003ca href=\"https://yairfernando67.github.io/Portfolio/\" target=\"_blank\"\u003e\n    \n  ![Screenshot Image](app/assets/images/logo.jpg) \n\n\u003c/a\u003e\n\n- Github: [@YairFernando67](https://github.com/YairFernando67)\n- Twitter: [@YairFernando18](https://twitter.com/YairFernando18)\n- Linkedin: [softwaredeveloperyairfacio](https://www.linkedin.com/in/softwaredeveloperyairfacio/)\n- Email: [yair.facio11@gmail.com](https://mail.google.com/mail/?view=cm\u0026fs=1\u0026tf=1\u0026to=yair.facio11@gmail.com)\n- Portfolio: [softwaredeveloper](https://yairfernando67.github.io/Portfolio/)\n\n\u003cp align=\"center\"\u003e\n\n  Project Link: [https://github.com/YairFernando67/Crypto-Calculator](https://github.com/YairFernando67/Crypto-Calculator)\n\n\u003c/p\u003e\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\n\nFeel free to check the [issues page](https://github.com/YairFernando67/Crypto-Calculator/issues).\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n[contributors-shield]: https://img.shields.io/github/contributors/YairFernando67/Crypto-Calculator.svg?style=flat-square\n[contributors-url]: https://github.com/YairFernando67/Crypto-Calculator/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/YairFernando67/Crypto-Calculator.svg?style=flat-square\n[forks-url]: https://github.com/YairFernando67/Crypto-Calculator/network/members\n[stars-shield]: https://img.shields.io/github/stars/YairFernando67/Crypto-Calculator.svg?style=flat-square\n[stars-url]: https://github.com/YairFernando67/Crypto-Calculator/stargazers\n[issues-shield]: https://img.shields.io/github/issues/YairFernando67/Crypto-Calculator.svg?style=flat-square\n[issues-url]: https://github.com/YairFernando67/Crypto-Calculator/issues\n[license-shield]: https://img.shields.io/github/license/YairFernando67/Crypto-Calculator.svg?style=flat-square\n[license-url]: https://github.com/YairFernando67/Crypto-Calculator/blob/master/LICENSE.txt\n[linkedin-shield2]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square\u0026logo=linkedin\u0026colorB=555\n[linkedin-url2]: https://www.linkedin.com/in/softwaredeveloperyairfacio/\n[hireable]: https://cdn.rawgit.com/hiendv/hireable/master/styles/flat/yes.svg\n[hireable-url]: https://www.linkedin.com/in/softwaredeveloperyairfacio/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaairfernando%2Fcrypto-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyaairfernando%2Fcrypto-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaairfernando%2Fcrypto-calculator/lists"}