{"id":18638784,"url":"https://github.com/starsheriff2/hello-rails-react","last_synced_at":"2026-05-10T02:39:06.630Z","repository":{"id":46440328,"uuid":"416100599","full_name":"StarSheriff2/hello-rails-react","owner":"StarSheriff2","description":"App created with the react-rails and webpacker gems. The app loads a different greeting message every time you reload the page.","archived":false,"fork":false,"pushed_at":"2021-10-13T01:37:50.000Z","size":665,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2024-12-27T09:28:46.189Z","etag":null,"topics":["rails","react-rails","react-redux","webpack"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StarSheriff2.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}},"created_at":"2021-10-11T22:05:51.000Z","updated_at":"2021-10-13T01:37:20.000Z","dependencies_parsed_at":"2022-08-28T16:23:48.116Z","dependency_job_id":null,"html_url":"https://github.com/StarSheriff2/hello-rails-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2Fhello-rails-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2Fhello-rails-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2Fhello-rails-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StarSheriff2%2Fhello-rails-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StarSheriff2","download_url":"https://codeload.github.com/StarSheriff2/hello-rails-react/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239436263,"owners_count":19638279,"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":["rails","react-rails","react-redux","webpack"],"created_at":"2024-11-07T05:43:37.723Z","updated_at":"2025-11-04T16:30:26.396Z","avatar_url":"https://github.com/StarSheriff2.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eMy First React/Redux Rails App!\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Microverse-blueviolet\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Academic-blue\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/HTML-red\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/JavaScript-yellow\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/CSS-blue\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Rails-maroon\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/React-purple\"\u003e\n \u003cimg src=\"https://img.shields.io/badge/Redux-violet\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003eI built this app using the \u003ci\u003ewebpacker\u003c/i\u003e and \u003ci\u003ereact-rails\u003c/i\u003e gems. This app is for learning purposes only, to understand how to build a Rails app integated with React and Redux. I used the following tutorial to help me along: \u003ca rel=\"noopener noreferrer\" target=\"_blank\" href=\"https://www.freecodecamp.org/news/how-to-create-a-rails-project-with-a-react-and-redux-front-end-8b01e17a1db/\" \u003ehttps://www.freecodecamp.org/news/how-to-create-a-rails-project-with-a-react-and-redux-front-end-8b01e17a1db/\u003c/a\u003e.\nThe app loads a different greeting message every time you reload the page. The controller gets the message from a query made to a local PostgreSQL db.\u003c/p\u003e\n\u003cbr\u003e\n\n## About\nThis app shows a different greeting message when you refresh the page. It uses redux to handle the global state of the app and webpacker to compile JavaScript code.\n\nAPI calls are made directly from the component to the Rails API endpoint.\n\n### Live Demo\n\nDeployed to Heroku: [Live Demo](https://shrouded-tor-79384.herokuapp.com/#/)\n\n### Built With\n- HTML, CSS, JavaScript (ES6)\n- Ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [arm64-darwin20]\n- Rails 6.1.4.1\n- gem 'react-rails'\n- gem 'webpacker', '~\u003e 5.0'\n- gem 'spring'\n- PostgreSQL\n- react 17.0.2\n- react_ujs 2.6.1\n- react-redux 7.2.5\n- react-router-dom 5.3.0\n- redux 4.1.1\n- redux-logger\n- redux-thunk\n- Linters: Rubocop, ESLint\n- Mac OS\n- VS Code\n\n## Getting Started\n\nTo get a local copy up and running, follow these simple example steps.\n\n### Prerequisites\n- A browser to open the main file\n- Ruby 3.0.1p64 or higher\n- Node.js\n- NPM\n- Yarn\n\n### Get files\n1. Open your terminal or command prompt.\n2. If you do not have git installed in your system, skip this step and go to step 3; otherwise, go to the directory where you want to copy the project files and clone it by copying this text into your command prompt/terminal: `git clone git@github.com:StarSheriff2/hello-rails-react.git`.\n\u003cbr\u003eNow go to the ***\"Install Dependencies\"*** section\n3. Download the program files by clicking on the green button that says “**Code**” on the upper right side of the project frame.\n4. You will see a dropdown menu. Click on “**Download ZIP**.”\n5. Go to the directory where you downloaded the **ZIP file** and open it. Extract its contents to any directory you want in your system.\n\n### Install Dependencies\n1. If you are not in your system terminal/command prompt already, please open it and go to the directory where you cloned the remote repository or extracted the project files.\n2. While in the project root directory, type `bundle install`. This command will install all the necessary gems in your system.\n3. Then you can type \u003ccode\u003eyarn install --check-files\u003c/code\u003e.\n\n### Database Setup\n\n- In your terminal, while in the root dir of your Rails project, type \u003ccode\u003ebin/rails db:setup\u003c/code\u003e to create your local databases, load the schema, and initialize with the seed data.\n\nYou are all set now!\n## Usage\n\n1. In your terminal, run \u003ccode\u003ebin/rails server\u003c/code\u003e while inside the root directory of the repository files\n2. Go to your browser of choice and enter this URL: [http://localhost:3000](http://localhost:3000)\n3. \\[Optional\\] if you want to make changes to the JavaScript file and see changes immediately, run `./bin/webpack-dev-server`\n4. Refresh the page to see a different greeting message! 😸\n\n**Note:\u003cbr\u003e_ These commands will not stop on their own. If you change something in your project files, it will recompile and reload the page in your browser. To exit, hit \"ctrl + c\"_**\n\n## Linters\nTo run the linters included in this repository, go to the root directory of your repository and copy/paste the following commands into your terminal:\n(**Note:** Make sure you run `npm install` before you do this)\n- for ESlint, `npx eslint \u003cpath of file\u003e`\n- for Rubocop, `rubocop .`\n\n## Author\n👤 **Arturo Alvarez**\n- Github: [@StarSheriff2](https://github.com/StarSheriff2)\n- Twitter: [@ArturoAlvarezV](https://twitter.com/ArturoAlvarezV)\n- Linkedin: [Arturo Alvarez](https://www.linkedin.com/in/arturoalvarezv/)\n\n## 🤝 Acknowledgements\n\nTutorial:\n - FreecodeCamp tutorial by [Mark Hopson](https://www.freecodecamp.org/news/how-to-create-a-rails-project-with-a-react-and-redux-front-end-8b01e17a1db/)\n\n## Show your support\n\nGive a ⭐️ if you like this project!\n\n## 📝 License\n\nThis project is [MIT](https://github.com/StarSheriff2/hello-rails-react/blob/development/LICENSE) licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarsheriff2%2Fhello-rails-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarsheriff2%2Fhello-rails-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarsheriff2%2Fhello-rails-react/lists"}