Implement Greeting Display Functionality (Front-End)

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+      "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-syntax-jsx"]
+}

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended"],
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
+    "react/react-in-jsx-scope": "off",
+    "import/no-unresolved": "off",
+    "no-shadow": "off"
+  },
+  "overrides": [
+    {
+       // feel free to replace with your preferred file pattern - eg. 'src/**/*Slice.js' or 'redux/**/*Slice.js'
+      "files": ["src/**/*Slice.js"],
+      // avoid state param assignment
+      "rules": { "no-param-reassign": ["error", { "props": false }] }
+    }
+  ],
+  "ignorePatterns": [
+    "dist/",
+    "build/"
+  ]
+}

.github/workflows/linters.yml

@@ -0,0 +1,45 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup ESLint
+        run: |
+          npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x  @babel/plugin-syntax-jsx@7.x @babel/preset-env@7.x  @babel/preset-react@7.x
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.eslintrc.json
+          [ -f .babelrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.babelrc
+      - name: ESLint Report
+        run: npx eslint "**/*.{js,jsx}"
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  nodechecker:
+    name: node_modules checker
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: Check node_modules existence
+        run: |
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+node_modules

.stylelintrc.json

@@ -0,0 +1,20 @@
+{
+    "extends": ["stylelint-config-standard"],
+    "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+    "rules": {
+      "at-rule-no-unknown": [
+        true,
+        {
+          "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+        }
+      ],
+      "scss/at-rule-no-unknown":  [
+        true,
+        {
+          "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+        }
+      ],
+      "csstree/validator": true
+    },
+    "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+  }

README.md

@@ -1,2 +1,114 @@
-# hello-react-front-end
-hello-react-front-end
+
+<a name="readme-top"></a>
+
+<div align="center">
+
+  <h3><b>Hello React Front-End</b></h3>
+
+</div>
+
+# 📗 Table of Contents
+
+- [📗 Table of Contents](#-table-of-contents)
+- [📖 Hello React Front-End](#about-project)
+  - [🛠 Project Requirements](#project-requirements)
+  - [🚀 Getting Started](#getting-started)
+    - [💻 API Endpoints](#integration-with-hello-rails-back-end)
+    - [Prerequisites](#prerequisites)
+    - [Setup](#setup)
+    - [Run the Project](#run-the-project)
+  - [👥 Author](#authors)
+  - [🔭 Issues](#issues)
+  - [🤝 Contributing](#contributing)
+  - [⭐️ Show Your Support](#️support)
+  - [📝 License](#license)
+
+<!-- PROJECT REQUIREMENTS -->
+
+# 📖 Hello React Front-End <a name="about-project"></a>
+
+*Hello React Front-End* is a React application that displays random greetings fetched from the Rails API endpoint. This project meets the following requirements:
+
+## 🛠 Project Requirements <a name="project-requirements"></a>
+
+- Create a React app called 'hello-react-front-end'.
+- Initialize the project with Git.
+- Create the `App` component with react-router.
+- Create the `Greeting` component that displays a greeting and set it up as a route in the `App` component.
+- Create a store, an action, and a reducer that connect to your API endpoint to get the random greeting.
+- Display the random greeting in your `Greeting` component.
+
+## 🚀 Getting Started <a name="getting-started"></a>
+
+To get the project up and running on your local machine, follow these steps.
+
+## 🔗 Integration with Hello Rails Back-End <a name="integration-with-hello-rails-back-end"></a>
+
+This front-end application is designed to work in conjunction with the [Hello Rails Back-End](https://github.com/PabloBona/hello-rails-back-end) project. The back-end project provides a server API, and this front-end application makes requests to `http://localhost:3000/api/greetings/random` to fetch random greetings. Ensure that the back-end server is running before using this front-end application.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+### Prerequisites
+
+Before you begin, make sure you have the following prerequisites installed on your system:
+
+- Node.js: You need Node.js to run the React application.
+- npm: npm is the package manager for JavaScript and comes with Node.js.
+
+### Setup
+
+Clone this repository to your desired folder:
+
+```sh
+git clone https://github.com/PabloBona/hello-react-front-end.git
+cd hello-react-front-end
+```
+
+Install dependencies:
+
+```sh
+npm install
+```
+
+### Run the Project
+
+To run the project, execute the following command:
+
+```sh
+npm start
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 👥 Author <a name="authors"></a>
+
+👤 **Pablo Bonasera**
+- GitHub: [@PabloBona](https://github.com/PabloBona)
+- LinkedIn: [Pablo Bonasera](https://www.linkedin.com/in/pablo-bonasera/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🔭 Issues <a name="issues"></a>
+
+Find a bug or have a feature request? [Open a new issue](https://github.com/PabloBona/hello-react-front-end/issues) here on GitHub.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🤝 Contributing <a name="contributing"></a>
+
+Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/PabloBona/hello-react-front-end/issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## ⭐️ Show Your Support <a name="️support"></a>
+
+If you find this project helpful, please consider starring the repository. Your support is greatly appreciated!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 📝 License <a name="license"></a>
+
+This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/PabloBona/hello-react-front-end/blob/feature/add-react/LICENSE) file for details.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>