Final Review - Car Booking Website Project (Frontend)

.babelrc

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

.env

@@ -0,0 +1 @@
+PORT = 1234

.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "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",
+    "quotes": "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,23 @@
+# 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*

.stylelintrc.json

@@ -0,0 +1,39 @@
+{
+  "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 +1,198 @@
-# final-capstone-frontend
+<a name="readme-top"></a>
+
+# 📗 Table of Contents
+
+- [📗 Table of Contents](#-table-of-contents)
+- [📖 Final group capstone - Book an Appointment To rent a car ](#-final-group-capstone---book-an-appointment-to-rent-a-car-)
+  - [🚀 Backend App ](#-backend-app-)
+  - [🛠 Built With ](#-built-with-)
+    - [Tech Stack ](#tech-stack-)
+    - [Key Features ](#key-features-)
+  - [🚀 Live Demo ](#-live-demo-)
+  - [💻 Getting Started ](#-getting-started-)
+    - [Prerequisites](#prerequisites)
+    - [Install](#install)
+    - [Usage](#usage)
+  - [👥 Authors ](#-authors-)
+  - [📆 Kanban Board ](#-kanban-board-)
+  - [🔭 Future Features ](#-future-features-)
+  - [🤝 Contributing ](#-contributing-)
+  - [⭐️ Show your support ](#️-show-your-support-)
+  - [🙏 Acknowledgments ](#-acknowledgments-)
+    - [Acknowledgments](#acknowledgments)
+      - [Development Team](#development-team)
+      - [Institution](#institution)
+      - [Reference Design](#reference-design)
+  - [📝 License ](#-license-)
+
+<!-- PROJECT DESCRIPTION -->
+
+# 📖 Final group capstone - Book an Appointment To rent a car <a name="about-project"></a>
+
+**[Description]**
+
+The project we built for the Final Project is based on an app to book an appointment of a Car in the world.
+
+## 🚀 Backend App <a name="back-end"></a>
+
+- [Click here to navigate to the Backend ](https://github.com/hmunish/final-capstone-backend)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🛠 Built With <a name="built-with"></a>
+
+### Tech Stack <a name="tech-stack"></a>
+
+- Ruby on Rails >=7
+- React
+- Postgres
+
+### Key Features <a name="key-features"></a>
+
+- Connection between Ruby on Rails and React in different apps
+- Book an appointment to try a Car
+- Cars that you selected as a theme
+- Reserve form
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LIVE DEMO -->
+
+## 🚀 Live Demo <a name="live-demo"></a>
+
+- [Live Demo](https://car-booking-frontend.onrender.com/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+
+## 💻 Getting Started <a name="getting-started"></a>
+
+### Prerequisites
+
+- [Ruby on Rails >=7](https://rubyonrails.org/)
+- [React](https://reactjs.org/)
+- [Postgres](https://www.postgresql.org/)
+- [Git](https://git-scm.com/downloads)
+
+### Install
+
+```
+git clone https://github.com/hmunish/final-capstone-backend.git
+cd final-capstone-backend
+bundle install
+```
+
+```
+git clone https://github.com/hmunish/final-capstone-frontend.git
+cd final-capstone-frontend
+npm install
+```
+
+### Usage
+
+\`\`\`
+rails s
+\`\`\`
+\`\`\`
+npm start
+\`\`\`
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- AUTHORS -->
+
+## 👥 Authors <a name="authors"></a>
+
+👤 **Abdourahmane Jalloh**
+
+- GitHub: [aradradev](https://github.com/aradradev)
+- LinkedIn: [LinkedIn](https://www.linkedin.com/in/abdul-jalloh)
+
+👤 **Faranosh Amini**
+
+- GitHub: [FaranoshAmini](https://github.com/FaranoshAmini)
+- LinkedIn: [LinkedIn](https://www.linkedin.com/in/faranosh-amini-9b925b23a/)
+
+👤 **Munish Halai**
+
+- GitHub: [hmunish](https://github.com/hmunish)
+- LinkedIn: [LinkedIn](https://www.linkedin.com/in/munish-halai/)
+
+👤 **Sunga Thawethe**
+
+- GitHub: [sunga12](https://github.com/sunga12)
+- LinkedIn: [LinkedIn](https://www.linkedin.com/in/sungabanja-thawethe/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- Kanban Board -->
+
+## 📆 Kanban Board <a name="kanban-board"></a>
+
+- [Our kanban board](https://github.com/hmunish/final-capstone-backend/projects/1)
+- [Kanban board initial state image](https://user-images.githubusercontent.com/121902704/278095332-df4fd7fb-f38b-4213-9175-4cf6c4edef52.PNG)
+- We are a team of 4 members as stated in the authors section
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🔭 Future Features <a name="future-features"></a>
+
+- Add different categories of cars
+- Add online shopping
+- Add extra styling
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- CONTRIBUTING -->
+
+## 🤝 Contributing <a name="contributing"></a>
+
+Contributions, issues, and feature requests are welcome!
+
+Check the [issues page](../../issues/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- SUPPORT -->
+
+## ⭐️ Show your support <a name="support"></a>
+
+If you found this project helpful, consider giving a ⭐️!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- ACKNOWLEDGEMENTS -->
+
+## 🙏 Acknowledgments <a name="acknowledgements"></a>
+
+### Acknowledgments
+
+We would like to express our deepest gratitude to all the people and institutions that have contributed to make this project possible.
+
+#### Development Team
+
+- **Abdourahmane Jalloh**: Thank you for your dedication and hard work throughout this project.
+- **Faranosh Amini**: Your expertise and commitment have been invaluable to the team.
+- **Munish Halai3**: Your contributions have made a significant impact on our success.
+- **Sunga Thawethe**: Your skills and teamwork have been much appreciated.
+
+Thank you, team, for your collaboration and effort! 🙌🏼🚀
+
+#### Institution
+
+- **Microverse**: My sincerest thanks for creating this bootcamp. The program's structure and the quality of education provided have been crucial for my growth as a developer.
+
+#### Reference Design
+
+- I would also like to thank [<a href="https://www.behance.net/muratk">Murat Korkmaz</a>] for the original design on Behance that served as inspiration for this project.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LICENSE -->
+
+## 📝 License <a name="license"></a>
+
+This project is [MIT](./LICENSE) licensed.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>