GH-Carder

React and Redux

Snapshot

Introduction.

A web application that retrieves and displays the user's repositories and organizations that he/she belongs to in Github. Allow list followers and followings on separate pages.

Tools

• Node.js
• React
• React-DOM
• React-Create-App
• Firebase
• npm
• CSS
• ES6
• Webpack
• SweetAlert2
• Jest

React and Redux

This is the GitHub Actions configuration. If you are looking for the Stickler configuration, you can find it here.

If you are not familiar with linters and GitHub Actions, read root level README.

Set-up GitHub Actions

This GitHub Action is going to run ESLint and Stylelint to help you find style issues.

Stylelint is a linter for your stylesheets that helps you avoid errors and enforce conventions.

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Please do the following steps in this order:

1. In the first commit of your feature branch create a .github/workflows folder and add a copy of .github/workflows/linters.yml to that folder.
   • Remember to use the file linked above
   • Remember that .github folder starts with a dot.
2. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
3. When you open your first pull request you should see the result of the GitHub Actions:

Click on the Details link to see the full output and the errors that need to be fixed:

Set-up linters in your local env

ESLint

1. Run npm install --save-dev eslint@6.8.x eslint-config-airbnb@18.1.x eslint-plugin-import@2.20.x eslint-plugin-jsx-a11y@6.2.x eslint-plugin-react@7.20.x eslint-plugin-react-hooks@2.5.x (not sure how to use npm? Read this).

$ npm install --save-dev eslint@6.8.x eslint-config-airbnb@18.1.x eslint-plugin-import@2.20.x eslint-plugin-jsx-a11y@6.2.x eslint-plugin-react@7.20.x eslint-plugin-react-hooks@2.5.x

+ eslint-config-airbnb@18.1.0
+ eslint-plugin-react@7.20.6
+ eslint-plugin-import@2.20.2
+ eslint-plugin-jsx-a11y@6.2.3
+ eslint-plugin-react-hooks@2.5.1
+ eslint@6.8.0
added 456 packages from 105 contributors, removed 150 packages, updated 1384 packages and audited 1851 packages in 264.998s

70 packages are looking for funding

2. Copy .eslintrc.json to the root directory of your project.
3. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
4. Run npx eslint . on the root of your directory of your project.
5. Fix linter errors.
6. IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

Stylelint

1. Run

   npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x stylelint-csstree-validator
   

   (not sure how to use npm? Read this).

$ npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x stylelint-csstree-validator

+ stylelint-config-standard@20.0.0
+ stylelint-csstree-validator@1.8.0
+ stylelint-scss@3.17.2
+ stylelint@13.3.3
added 136 packages from 91 contributors, removed 10 packages, updated 6 packages and audited 1987 packages in 67.901s

113 packages are looking for funding

2. Copy .stylelintrc.json to the root directory of your project.
3. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
4. Run

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

   on the root of your directory of your project.
5. Fix linter errors.
6. IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

Test/Deployment Actions

Feel free to add your own deployment actions which can run your tests and deploy to Heroku.

Make sure that you do not modify the .github/workflows/linters.yml but that you create a separe GitHub Action workflow file for that.

Future Features

1. Persistent storage of bookmarks with Firebase DB
2. Feature to remove bookmarks

To begin

1. Clone Repo
2. 'npm install' to install dependencies
3. yarn start or 'npm start' on terminal
4. Open http://localhost:3000 to view it in the browser.

To test

1. yarn test or 'npm test' on terminal

Wiki

Checkout our wikipage for more details.

Live Demo

Demo

Getting Started

Clone repo and open index.html with your favorite browser.

Prerequisites

Web browser like Chrome, Mozilla or similar.

Original Project Source

Github Repo

https://github.com/geraldgsh/gh-carder

👤 Author

Github: geraldgsh

Twitter: geraldgsh

Linkedin: Gerald Goh

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Hat tip to anyone whose code was used
• Inspiration
• etc

📝 License

This project is MIT licensed.