Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fmanimashaun/hello-rails-react
This is a simple Rails and React application that displays a random greeting message.
https://github.com/fmanimashaun/hello-rails-react
full-stack-web-development rails-api reactjs webpack5
Last synced: 14 days ago
JSON representation
This is a simple Rails and React application that displays a random greeting message.
- Host: GitHub
- URL: https://github.com/fmanimashaun/hello-rails-react
- Owner: fmanimashaun
- License: mit
- Created: 2024-01-25T10:23:23.000Z (10 months ago)
- Default Branch: dev
- Last Pushed: 2024-01-26T14:06:08.000Z (10 months ago)
- Last Synced: 2024-10-09T07:41:29.906Z (about 1 month ago)
- Topics: full-stack-web-development, rails-api, reactjs, webpack5
- Language: Ruby
- Homepage:
- Size: 109 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hello Rails React
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [💻 Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Usage](#usage)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
This is a simple Rails and React application that displays a random greeting message using redux-toolkit and react-router.
Programming Language
- Ruby 3.2.2
- JavaScript
Web Application Framework
- Rails 7.1.3
Database
- PostgreSQL (pg gem)
Web Server
- Puma
JavaScript Modules
- Webpack (jsbundling-rails gem, webpack and webpack-cli in package.json)
UI Library
- React (react and react-dom in package.json)
Hotwire
- Turbo (turbo-rails gem, @hotwired/turbo-rails in package.json)
- Stimulus (@hotwired/stimulus in package.json)
APIs
- Jbuilder
Performance Optimization
- Bootsnap
Testing
- Debug
- Capybara
- Selenium Webdriver
Development Tools
- Web Console (web-console gem)
- Babel (@babel/core, @babel/preset-env, @babel/preset-react, babel-loader in package.json)
- [x] **Random Greeting:** Displays a random greeting message from a selection of 5 different greetings stored in the database.
- [x] **React Components:** Uses React to create dynamic UI components.
- [x] **API Endpoint:** Includes an API endpoint that selects a random greeting from the database.
- [x] **Redux Store:** A store, an action, and a reducer are created that connect to the API endpoint to get the random greeting.
To get started with the project, follow the steps below.
### Prerequisites
To run this project, ensure you have the following installed:
- [Git](https://git-scm.com/)
- [Ruby](https://www.ruby-lang.org/en/)
- [rails](https://rubyonrails.org/)
- A code editor (e.g., [VsCode](https://code.visualstudio.com/))
### Setup
Clone the repository to your local machine:
```bash
git clone https://github.com/fmanimashaun/hello-rails-react.git
cd hello-rails-react
bundle install
yarn install
```
## Database Setup
This application uses PostgreSQL as the database. Here are the steps to set it up:
1. Ensure PostgreSQL is installed on your machine and running.
2. Update the config/database.yml file with your PostgreSQL username and password in the default section.
3. Create the database:
```bash
rails db:create
```
4. Run migrations to set up the database schema:
```bash
rails db:migrate
```
5. Load sample data into database:
```bash
rails db:seed
```
### Usage
To run the program, you can use a Ruby interpreter. For example, to interact with the code, use the following:
1. Start the server
```bash
bin/dev
```
2. Access the Blog app in your web browser at `http://localhost:3000`.
👤 **Fisayo Michael Animashaun**
- GitHub: [@fmanimashaun](https://github.com/fmanimashaun)
- Twitter: [@fmanimashaun](https://twitter.com/fmanimashaun)
- LinkedIn: [Fisayo Michael Animashaun ](https://linkedin.com/in/fmanimashaun)
- Add more functionality...
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
[Issue Page](https://github.com/fmanimashaun/myblog/issues)
If you like this project leave a start for it.
- I'd like to thank Microverse for helping us in the journey to become a Fullstack developer.
This project is [MIT](./LICENSE) licensed.