{"id":28938162,"url":"https://github.com/rubyhcm/rails7_vujs3_first","last_synced_at":"2026-05-07T13:46:55.441Z","repository":{"id":300544600,"uuid":"1006434638","full_name":"rubyhcm/rails7_vujs3_first","owner":"rubyhcm","description":"A simple and effective Todo List application built with a powerful combination of Vue.js 3 for the frontend and Ruby on Rails for the backend API.","archived":false,"fork":false,"pushed_at":"2025-06-22T09:27:15.000Z","size":8077,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-22T10:24:09.622Z","etag":null,"topics":["rails","vuejs"],"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/rubyhcm.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-22T09:04:48.000Z","updated_at":"2025-06-22T09:27:18.000Z","dependencies_parsed_at":"2025-06-22T10:34:43.654Z","dependency_job_id":null,"html_url":"https://github.com/rubyhcm/rails7_vujs3_first","commit_stats":null,"previous_names":["rubyhcm/rails7_vujs3_first"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rubyhcm/rails7_vujs3_first","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubyhcm%2Frails7_vujs3_first","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubyhcm%2Frails7_vujs3_first/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubyhcm%2Frails7_vujs3_first/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubyhcm%2Frails7_vujs3_first/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubyhcm","download_url":"https://codeload.github.com/rubyhcm/rails7_vujs3_first/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubyhcm%2Frails7_vujs3_first/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261374415,"owners_count":23148977,"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","vuejs"],"created_at":"2025-06-22T22:07:04.569Z","updated_at":"2026-05-07T13:46:55.436Z","avatar_url":"https://github.com/rubyhcm.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003c!-- You can change this to a real logo if you have one --\u003e\n  \u003ca href=\"https://github.com/your_username/vue3_122020\"\u003e\n    \u003cimg src=\"https://vuejs.org/images/logo.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003eVue 3 and Rails Todo List Manager\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    A simple and effective Todo List application built with a powerful combination of Vue.js 3 for the frontend and Ruby on Rails for the backend API.\n    \u003cbr /\u003e\n    \u003ca href=https://github.com/rubyhcm/rails7_vujs3_first/issues\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=https://github.com/rubyhcm/rails7_vujs3_first/issues\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n[![status](https://img.shields.io/badge/status-done-brightgreen)](https://shields.io)\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#-about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#-built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#-getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#-installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-running-tests\"\u003eRunning Tests\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#-author\"\u003eAuthor\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n## 📖 About The Project\n\nThis project serves as a practical example of how to integrate a modern JavaScript framework (Vue.js) with a robust backend framework (Ruby on Rails). It demonstrates RESTful API design, frontend state management, and component-based architecture.\n\n### ✨ Built With\n\nThis project was built with the following technologies:\n\n- [![Ruby][Ruby-shield]][Ruby-url]\n- [![Rails][Rails-shield]][Rails-url]\n- [![Vue.js][Vue.js-shield]][Vue.js-url]\n- [![Node.js][Node.js-shield]][Node.js-url]\n\n## 🚀 Getting Started\n\nThis section will guide a new developer to get a copy of the project up and running on their local machine for development and testing purposes.\n\n### Prerequisites\n\nMake sure you have the following software installed on your machine:\n\n- Ruby (check `.ruby-version` for the specific version)\n- Bundler (`gem install bundler`)\n- Node.js \u0026 npm\n\n### 🔧 Installation\n\n1.  **Clone the repository**\n\n2.  **Install Backend Dependencies**\n\n    ```sh\n    bundle install\n    ```\n\n3.  **Setup the Database**\n\n    ```sh\n    rails db:create\n    rails db:migrate\n    # Optional: Seed the database with initial data\n    # rails db:seed\n    ```\n\n4.  **Install Frontend Dependencies**\n    ```sh\n    cd frontend\n    npm install\n    ```\n\n## ▶️ Usage\n\nTo run the application, you will need to start both the Rails server and the Vue development server in separate terminal windows.\n\n1.  **Start the Rails API server**\n    (From the project root directory)\n\n    ```sh\n    rails s -p 3001\n    ```\n\n    The API will be running on `http://localhost:3001`.\n\n2.  **Start the Vue.js development server**\n    (From the `frontend` directory)\n    ```sh\n    npm run serve\n    ```\n    The frontend application will be available at `http://localhost:8080` (or another port specified in the output).\n\n## ✅ Running Tests\n\n- **Backend (RSpec/Minitest):**\n  ```sh\n  # From the project root\n  bundle exec rspec\n  ```\n- **Frontend (Jest/Cypress):**\n  ```sh\n  # From the /frontend directory\n  npm run test\n  ```\n\n## 🤝 Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1.  Fork the Project\n2.  Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3.  Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4.  Push to the Branch (`git push origin feature/AmazingFeature`)\n5.  Open a Pull Request\n\n## 📝 License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information. (You would need to create this file).\n\n## ✍️ Author\n\n**James** - _Software Engineer_\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[Ruby-shield]: https://img.shields.io/badge/Ruby-CC342D?style=for-the-badge\u0026logo=ruby\u0026logoColor=white\n[Ruby-url]: https://www.ruby-lang.org/\n[Rails-shield]: https://img.shields.io/badge/Ruby_on_Rails-CC0000?style=for-the-badge\u0026logo=ruby-on-rails\u0026logoColor=white\n[Rails-url]: https://rubyonrails.org/\n[Vue.js-shield]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge\u0026logo=vue.js\u0026logoColor=4FC08D\n[Vue.js-url]: https://vuejs.org/\n[Node.js-shield]: https://img.shields.io/badge/Node.js-339933?style=for-the-badge\u0026logo=nodedotjs\u0026logoColor=white\n[Node.js-url]: https://nodejs.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubyhcm%2Frails7_vujs3_first","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubyhcm%2Frails7_vujs3_first","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubyhcm%2Frails7_vujs3_first/lists"}