Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kidd254/hello_react_on_rails

Last synced: 27 days ago
JSON representation

Host: GitHub
URL: https://github.com/kidd254/hello_react_on_rails
Owner: Kidd254
License: mit
Created: 2023-10-30T13:03:37.000Z (about 1 year ago)
Default Branch: dev
Last Pushed: 2023-11-04T15:05:27.000Z (about 1 year ago)
Last Synced: 2023-11-04T16:22:32.427Z (about 1 year ago)
Language: Ruby
Size: 141 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        



  Hello API | Ruby on Rails & ReactJS



# 📗 Table of Contents

- [📗 Table of Contents](#-table-of-contents)

- [Hello API ](#hello-api-)

  - [🛠 Built With ](#-built-with-)

    - [Tech Stack ](#tech-stack-)

    - [Key Features ](#key-features-)

  - [💻 Getting Started ](#-getting-started-)

    - [Prerequisites](#prerequisites)

    - [Setup](#setup)

    - [Install](#install)

    - [Usage](#usage)

    - [Run linters](#run-linters)

  - [👥 Authors ](#-authors-)

  - [🔭 Future Features ](#-future-features-)

  - [🤝 Contributing ](#-contributing-)

  - [⭐️ Show your support ](#️-show-your-support-)

  - [🙏 Acknowledgments ](#-acknowledgments-)

  - [📝 License ](#-license-)

---

# Hello API 

**"Hello App"** This is a simple application for displaying random greetings, made with Ruby on Rails. The application consists of an API in the backend, which has a single endpoint that is consumed from a frontend made with ReactJS and Redux toolkit to manage the global state of the application.

---

## 🛠 Built With 

### Tech Stack 

  Backend

  


    Ruby on Rails (v7.0.8)

    PostgreSQL

  


  Frontend

  


    HTML5

    CSS

    ERB template

    ReactJS

    React Router v6

    Axios

    Redux Toolkit

  


### Key Features 



  Ruby on Rails framework

  

    Use Linters to check code quality

    

      Rubocop

      Stylelint

    

  

  MVC architectural/design pattern

  Data persistent in PostgreSQL

  Frontend with Reactjs, Redux and Webpack

  RESTful API



(back to top)


---

## 💻 Getting Started 

To get a local copy up and running, follow these steps.

### Prerequisites

In order to run this project you need:



    A code editor (we recommend Visual Studio Code)





    Git and a GitHub account



### Setup

Clone this repository to your desired folder by using this 👇️ command :

```

git clone https://github.com/Kidd254/Hello_React_on_Rails.git

```

### Install

Go to the project directory:

```

 cd hello-rails-react

```

Before to run the program, verify that you have Ruby on Rails installed on your OS running the following command:

```

 rails --version

```

It should show you the version of ruby on rails installed. If this does not happen and only an error message is displayed, then you should either verify your installation or install Ruby on Rails from scratch.

[Download and Install Ruby on Rails](https://guides.rubyonrails.org/getting_started.html)

Once you have verified that you have Ruby on Rails installed, run the following command to install the necessary gems:

```

 bundle install

```

After installing the gems, run the following command to create the database:

```

 rails db:create

```

Then run the following command to migrate the database:

```

 rails db:migrate

```

Then run the following command to install React, Redux, and all the Node packages:

```

 npm install

```

if you have any problem with the previous command, try to run the following command:

```

 yarn install

```

### Usage

Run the following command inside the project folder to start the application:

```

  npm run build

  rails s

```

if you have any problem with the previous command, try to run the following command:

```

 ./bin/dev

```

Those commands will start the application on your local server. You can now open your browser and go to http://localhost:3000/ to see the application running.

### Run linters

To verify that the ruby and CSS code is written without errors and meets good practice standards, run the following command inside the project folder:

- **ruby linter:**

```

 rubocop

```

- **CSS linter:**

```

 stylelint "**/*.{css,scss}"

```

(back to top)


---

## 👥 Authors 

👤 **Lawrence Muema Kioko**

- GitHub: [@githubhandle](https://github.com/Kidd254)

- Twitter: [@twitterhandle](https://twitter.com/lawrenc98789206)

- LinkedIn: [LinkedIn](https://www.linkedin.com/in/lawrence-muema-kioko)

(back to top)


---

## 🔭 Future Features 

Upcoming improvements:

- [ ] Add the endpoints to create, update and delete a greeting

- [ ] Add CSS styles to the app

- [ ] Deploy the application

(back to top)


---

## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/NitBravoA92/hello-rails-react/issues).

(back to top)


---

## ⭐️ Show your support 

If you like this project and know someone who might find it helpful, please share it.

Or give it a **star** ⭐️ if you like this project!

(back to top)


---

## 🙏 Acknowledgments 

I thank Microverse for this fantastic opportunity, and the code reviewers for their advice and time.

(back to top)


---

## 📝 License 

This project is [MIT](./LICENSE) licensed.

(back to top)


---