https://github.com/rubyhcm/rails7_vujs3_first
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.
https://github.com/rubyhcm/rails7_vujs3_first
rails vuejs
Last synced: 26 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/rubyhcm/rails7_vujs3_first
- Owner: rubyhcm
- Created: 2025-06-22T09:04:48.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2025-06-22T09:27:15.000Z (12 months ago)
- Last Synced: 2025-06-22T10:24:09.622Z (12 months ago)
- Topics: rails, vuejs
- Language: Ruby
- Homepage:
- Size: 7.7 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vue 3 and Rails Todo List Manager
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.
Report Bug
·
Request Feature
[](https://shields.io)
Table of Contents
## 📖 About The Project
This 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.
### ✨ Built With
This project was built with the following technologies:
- [![Ruby][Ruby-shield]][Ruby-url]
- [![Rails][Rails-shield]][Rails-url]
- [![Vue.js][Vue.js-shield]][Vue.js-url]
- [![Node.js][Node.js-shield]][Node.js-url]
## 🚀 Getting Started
This 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.
### Prerequisites
Make sure you have the following software installed on your machine:
- Ruby (check `.ruby-version` for the specific version)
- Bundler (`gem install bundler`)
- Node.js & npm
### 🔧 Installation
1. **Clone the repository**
2. **Install Backend Dependencies**
```sh
bundle install
```
3. **Setup the Database**
```sh
rails db:create
rails db:migrate
# Optional: Seed the database with initial data
# rails db:seed
```
4. **Install Frontend Dependencies**
```sh
cd frontend
npm install
```
## ▶️ Usage
To run the application, you will need to start both the Rails server and the Vue development server in separate terminal windows.
1. **Start the Rails API server**
(From the project root directory)
```sh
rails s -p 3001
```
The API will be running on `http://localhost:3001`.
2. **Start the Vue.js development server**
(From the `frontend` directory)
```sh
npm run serve
```
The frontend application will be available at `http://localhost:8080` (or another port specified in the output).
## ✅ Running Tests
- **Backend (RSpec/Minitest):**
```sh
# From the project root
bundle exec rspec
```
- **Frontend (Jest/Cypress):**
```sh
# From the /frontend directory
npm run test
```
## 🤝 Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If 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".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📝 License
Distributed under the MIT License. See `LICENSE.txt` for more information. (You would need to create this file).
## ✍️ Author
**James** - _Software Engineer_
[Ruby-shield]: https://img.shields.io/badge/Ruby-CC342D?style=for-the-badge&logo=ruby&logoColor=white
[Ruby-url]: https://www.ruby-lang.org/
[Rails-shield]: https://img.shields.io/badge/Ruby_on_Rails-CC0000?style=for-the-badge&logo=ruby-on-rails&logoColor=white
[Rails-url]: https://rubyonrails.org/
[Vue.js-shield]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D
[Vue.js-url]: https://vuejs.org/
[Node.js-shield]: https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white
[Node.js-url]: https://nodejs.org/