Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/crclothier/hello-react-front-end

Last synced: 13 days ago
JSON representation

Host: GitHub
URL: https://github.com/crclothier/hello-react-front-end
Owner: CRClothier
License: mit
Created: 2023-03-22T11:12:47.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-08-01T11:06:17.000Z (over 1 year ago)
Last Synced: 2024-10-24T17:12:17.718Z (2 months ago)
Language: JavaScript
Size: 210 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 📗 Table of Contents

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

- [📖 Hello React Frontend ](#-hello-react-frontend-)

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

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

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

  - [🚀 Live Demo ](#-live-demo-)

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

    - [Prerequisites](#prerequisites)

    - [Setup](#setup)

    - [Install](#install)

    - [Usage](#usage)

    - [Run tests](#run-tests)

    - [Deployment](#deployment)

  - [👥 Authors ](#-authors-)

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

  - [🤝 Contributing ](#-contributing-)

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

  - [🙏 Acknowledgments ](#-acknowledgments-)

  - [📝 License ](#-license-)

# 📖 Hello React Frontend 

**Hello React Frontend** is a simple React app that displays a random greeting when connecting to the API. It uses Redux to manage the global state, which is generated with data fetched from an API built with Ruby on Rails which you can find [here](https://github.com/crclothier/hello-rails-back-end).

## 🛠 Built With 

### Tech Stack 

  Client

  


    React.js

    Redux Toolkit

  


  Server

  


    Ruby on Rails

  


Database

  


    PostgreSQL

  


### Key Features 

- **Displays a random greeting** in a component.

- **Redux Toolkit** is used for state management.

- **Data fetch** is done using `createAsyncThunk` and requesting data from the API built with Rails.

(back to top)


## 🚀 Live Demo 

This is just an exercise for Microverse Bootcamp and won't be deployed.

(back to top)


## 💻 Getting Started 

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

### Prerequisites

To run this project you need:

- Ruby version 2.7.0+

- Rails version 7+

- PostgreSQL

- Node.js

- Npm or Yarn

### Setup

Clone this repository to your desired folder:

```

https://github.com/crclothier/hello-react-front-end.git

```

```

cd hello-react-front-end

```

### Install

Install this project's dependencies with:

```

npm install

```

or

```

yarn install

```

### Usage

To start the server run:

```

npm start

```

or

```

yarn start

```

This will start the server on http://localhost:4000/

### Run tests

N/A

### Deployment

N/A

(back to top)


## 👥 Authors 

👤 **Chris Clothier**

- GitHub: [@CRClothier](https://github.com/crclothier)

- LinkedIn: [LinkedIn](https://www.linkedin.com/in/crclothier)

(back to top)


## 🔭 Future Features 

*User greetings* - add a form so the user can suggest new random greetings.

*Add CSS animations* - Add animations for the greetings to appear on screen creatinga great user experience.

(back to top)


## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

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

(back to top)


## ⭐️ Show your support 

If you like this project please give it a star ⭐

(back to top)


## 🙏 Acknowledgments 

- Microverse Bootcamp

- Your name will be here if you contribute 😎

(back to top)


## 📝 License 

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

(back to top)