Finalized React Capstone Project for review

.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*
+

.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

@@ -7,9 +7,9 @@
 
 </div>
 
-<!-- Open pull request using the following structure
+<!-- Open a pull request using the following structure
 
-## Pronject Title: Branch title.............
+## Project Title: Branch title.............
 
 ### 🌟Features:
 
@@ -23,13 +23,13 @@
 
 -->
 
-> # Template
+> # Crypto Panel
 
-| Desktop Veiw Representation|
+| Desktop View Representation|
 |---------------------------------------|
-|<div align="center"><img src="./project-image.png" alt="screenshot" width="auto" height="auto"/></div>|
-|<div align="center"><img src="./project-image.png" alt="screenshot" width="auto" height="auto"/></div>|
-|<div align="center"><img src="./project-image.png" alt="screenshot" width="auto" height="auto"/></div>|
+|<div align="center"><img src="./src/assets/project-image1.PNG" alt="screenshot" width="auto" height="auto"/></div>|
+|<div align="center"><img src="./src/assets/project-image2.PNG" alt="screenshot" width="auto" height="auto"/></div>|
+|<div align="center"><img src="./src/assets/mobile-shot1.PNG" alt="screenshot" width="auto" height="400"/><img src="./src/assets/mobile-shot2.PNG" alt="screenshot" width="auto" height="400"/></div>|
 
 <!-- TABLE OF CONTENTS -->
 
@@ -57,20 +57,21 @@
 
 <!-- PROJECT DESCRIPTION -->
 
-# 📖 [Template] <a name="about-project"></a>
+# 📖 [Crypto Panel] <a name="about-project"></a>
 
-> **[Temaplate]** is a project template with ready README file for creating react applications.  
+> **[Cryptopanel]** is Cryptopanel is a single-page web app that is created using React and Redux and fetches data from CoinGecko API. The application allows users to get details of cryptocurrency information.
 
 ## 🛠 Built With <a name="built-with"></a>
 
 ### Tech Stack <a name="tech-stack"></a>
 - <summary>Client</summary>
     <ul>
-      <li><a href="https://reactjs.org/">HTML</a></li>
-      <li><a href="https://reactjs.org/">CSS</a></li>
+      <li><a href="https://reactjs.org/">JSX</a></li>
+      <li><a href="https://reactjs.org/">SCSS</a></li>
       <li><a href="https://reactjs.org/">JavaScript</a></li>
-      <li><a href="https://reactjs.org/">ReactJS</a></li>
-      <li><a href="https://reactjs.org/">API</a></li>
+      <li><a href="https://reactjs.org/">React-Redux</a></li>
+      <li><a href="https://reactjs.org/">React-Toolkit</a></li>
+      <li><a href="https://reactjs.org/">Cryptocurrency API</a></li>
     </ul>
 
 ### Key Features <a name="key-features"></a>
@@ -85,8 +86,8 @@
 
 ## 🚀 Live Demo <a name="live-demo"></a>
 
-> - [Live Demo on Gh-pages](https://ab-noori.github.io/math-magicians/)
-> - [Live Demo on Render](https://math-magicians-ab.onrender.com)
+> - [Live Demo on Gh-pages](https://ab-noori.github.io/Cryptopanel/)
+> - [Introduction to Project](https://www.loom.com/share/24b50649f3344d18a4a007d5715900e8?t=283&sid=a833953d-a480-4f39-981f-49f920cc9fa6)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -99,7 +100,7 @@ To get a local copy up and running, follow these steps:
 ### Prerequisites
 
 In order to run this project you need:
-  - A browser of you choice.
+  - A browser of your choice.
   - A text editor of your choice.
   - An installed node.js on your local system
 
@@ -110,19 +111,18 @@ Clone this repository to your desired folder:
 - Use the following Commands:
 
       cd your-desired-folder
-      git clone git@github.com:ab-noori/template.git
+      git clone git@github.com:ab-noori/Cryptopanel.git
 
 
 ### Install
 - Install this project with:
 
-       npx create-react-app my-app
-       cd my-app
+       npx create-react-app .
        npm start
 
 
 ### Usage
-- Use following commands to run on your local system:
+- Use the following commands to run the project on your local system:
 
       npm run build
       npm run deploy
@@ -137,18 +137,18 @@ Clone this repository to your desired folder:
       npx stylelint "**/*.{css,scss}" --fix
 
 ### Deployment
-- 1- install `'gh-pages'` with following command:
+- 1- install _gh-pages_ with following command:
 
-      npm i -D gh-pages
+      npm i gh-pages
 
-- 2- Add `'homepage'` to project's jason file:
+- 2- Add _homepage_ to project's jason file:
 
-      "homepage": "https://ab-noori.github.io/repo-name",
+      "homepage": "https://ab-noori.github.io/Cryptopanel",
 
-- 3- Add the following scripts to project's jason file:
+- 3- Add the following scripts to the project's _package.jason_ file:
 
       "predeploy": "npm run build",
-      "deploy": "gh-pages -d build "
+      "deploy": "gh-pages -d build ",
 
 - 4- Finally run the following command:
 
@@ -164,21 +164,22 @@ Clone this repository to your desired folder:
 
 - GitHub: [@ab-noori](https://github.com/ab-noori)
 - Twitter: [@AbdulAliNoori4](https://twitter.com/AbdulAliNoori4)
-- LinkedIn: [abdul-ali-noori](https://www.linkedin.com/in/abdul-ali-noori-384b85195/)
+- LinkedIn: [abdulali-noori](https://www.linkedin.com/in/abdulali-noori)
 
 
 ## 🔭 Future Features <a name="future-features"></a>
 
-- [ ] **[Add About page]**
-- [ ] **[Add Contact page]**
+- [ ] **[Giving funtionality to search input]**
+- [ ] **[Creating more professional sidebar panel]**
+- [ ] **[Using charts and graph to disply the currencies data]**
 
 <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/ab-noori/.../issues).
+Feel free to check the [issues page](https://github.com/ab-noori/Cryptopanel/issues).
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -192,8 +193,7 @@ Feel free to check the [issues page](https://github.com/ab-noori/.../issues).
 
 ## 🙏 Acknowledgments <a name="acknowledgements"></a>
 
-  I would like to thank Microverse and my coding partners. Also I want to give credit to [`Nerd's lesson`](https://www.youtube.com/@Nerdslesson)
-YouTub Channel, it's [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXyx30) is really helpfull.
+  First, I would like to thank Microverse and my coding partners. Second, I want to give credit to [`Nerd's lesson`](https://www.youtube.com/@Nerdslesson) YouTub Channel, its [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXyx30) is really helpful, and third, I should give credit to `Nelson Sakwa`, I got some inspirations from his design on Behance.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -206,7 +206,7 @@ YouTub Channel, it's [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXy
 
 - **How to design the site?**
 
-  - Draw a mockup before start to code
+  - Draw a mockup before starting to code
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>