Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahammad-mostafa/hello-rails-react
This is the first project in the full stack capstone module of the Microverse program. It is an exercise for using Rails with React through jsbundling-rails gem & WebPack.
https://github.com/mahammad-mostafa/hello-rails-react
api babel es6-javascript eslint gitflow-workflow jsbundling-rails jsx microverse microverse-projects microverse-students postgresql rails-api react-redux react-router reactjs redux-toolkit rubocop ruby-on-rails stylelint webpack
Last synced: about 1 month ago
JSON representation
This is the first project in the full stack capstone module of the Microverse program. It is an exercise for using Rails with React through jsbundling-rails gem & WebPack.
- Host: GitHub
- URL: https://github.com/mahammad-mostafa/hello-rails-react
- Owner: mahammad-mostafa
- License: mit
- Created: 2024-01-17T12:57:20.000Z (12 months ago)
- Default Branch: development
- Last Pushed: 2024-01-19T22:37:18.000Z (12 months ago)
- Last Synced: 2024-10-19T02:45:07.993Z (3 months ago)
- Topics: api, babel, es6-javascript, eslint, gitflow-workflow, jsbundling-rails, jsx, microverse, microverse-projects, microverse-students, postgresql, rails-api, react-redux, react-router, reactjs, redux-toolkit, rubocop, ruby-on-rails, stylelint, webpack
- Language: Ruby
- Homepage:
- Size: 200 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 🏷️ Hello Rails React
This is the first project in the full stack capstone module in the **Microverse** program.
Check the below contents for further details about this project.
# 📗 Contents
- [Description](#description)
- [Instructions](#instructions)
- [Authors](#authors)
- [Future](#future)
- [Contributions](#contributions)
- [Support](#support)
- [Acknowledgements](#acknowledgements)
- [License](#license)
# 📖 Description
This repository is about a simple greeting text in a single page.
This project configured `Rails` to use `jsbundling` gem which allows using `React`.
It also connects with `PostgreSQL` database & follows the `GitFlow` workflow.
State management in `React` is implemented using `Redux` & `Redux Toolkit`.
Remote data fetching from the backend is done with `Thunk` api.
Navigation inside the app is implemented using `React Router`.
Linters are used for (`Ruby` / `JavaScript` / `CSS`).
📌 **Tech Stack:**
- Backend language is `Ruby`
- Backend Framework used is `Rails`
- Frontend language is `JavaScript`
- Frontend Framework is `React`
- Database used is `PostgreSQL`
📌 **Key Features:**
- Single page application
- Responsive layout with all screen sizes
- Basic header & footer structure
- Button to generate random greeting
- Not found page for invalid pages
- Special route for API endpoints
# 🛠️ Instructions
You can easily download or fork this repository and work on it immadiately!
📌 **Prerequisites:**
- `Ruby` language
- `NodeJS` framework
- `PostgreSQL` database
📌 **Installation:**
- To get all required gem dependencies run
```
bundle install
```
- Create all required databases with
```
rails db:create
```
- Build all table schemas with
```
rails db:migrate
```
- Populate table data with
```
rails db:seed
```
📌 **Development:**
- Run backend server using
```
rails server
```
- Run frontend server using
```
npm run watch
```
- Manipulate & process models data through
```
rails console
```
# 👥 Authors
📌 **Mahammad:**
- [GitHub](https://github.com/mahammad-mostafa)
- [Twitter](https://twitter.com/mahammad_mostfa)
- [LinkedIn](https://linkedin.com/in/mahammad-mostafa)
# 🔭 Future
Some additional features I may implement in the project:
- [ ] Use some animations or transitions
- [ ] Implement (dark / light) theme switch
# 🤝🏻 Contributions
Wish to contribute to this project?
Contributions, issues, and feature requests are more than welcome!
Feel free to check the [issues](../../issues) page too.
# ⭐️ Support
Like this project? Show your support by starring!
# 🙏🏻 Acknowledgements
I thank everyone at **Microverse** for guiding me through this project.
# 📝 License
This project is [MIT](LICENSE.md) licensed.