Math Magicians
- 📖 About the Project
- 💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- 📝 License
Math Magicians is a web app to work like a calculator, I used React and JSX to build this web app.
- HTML,
- CSS,
- Java Script
- GIT,
- GITHUB
- LINTERS
- Webpack
- React
Client
- Linters for code quality
- Responsive design for different screen sizes
- In this project best coding practices is used.
Check out the live demo of this project here.
To get a local copy up and running, follow these steps.
- Go to this URL link: https://github.com/najibullahjafari/math-magicians
- clone the repo and start working on it.
In order to run this project you need:
Google Chrome or other browser
https://www.google.com/chrome/?brand=JJTC&gclid=CjwKCAjw9J2iBhBPEiwAErwpeSDcMFWiIQWj2u5GY6owZ7OaOHw7dYYCHW7uTR4kvYosNJYd4wt4VxoCiywQAvD_BwE&gclsrc=aw.ds
Github Account:
https://github.com/
Npm installed:
https://nodejs.org/en/download
Git installed:
https://git-scm.com/downloads/
Clone this repository to your desired folder:
cd my-folder
git clone https://github.com/najibullahjafari/math-magicians
Please do the following steps in this order:
- Use
npm run build
to instal all dependencies. - Then you can run project by
npm start
command
Linters:
If you had any issues with linters for react
you can install as bellow:
- Run
not sure how to use npm? Read this.
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-react@7.x @babel/preset-react@7.x
- Copy .eslintrc.json and .babelrc to the root directory of your project.
- 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.
- Run
npx eslint "**/*.{js,jsx}"
on the root of your directory of your project. - Fix linter errors.
- IMPORTANT NOTE: feel free to research auto-correct options for Eslint 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!
-
Run
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
not sure how to use npm? Read this.
-
Copy .stylelintrc.json to the root directory of your project.
-
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.
-
Run
npx stylelint "**/*.{css,scss}"
on the root of your directory of your project. -
Fix linter errors.
-
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!
To run the project, execute the following command:
Open the index.html in your browser
To run tests, run the following command:
to check for styling errors:
npx stylelint "**/*.{css,scss}"
You can deploy this project using:
Your working browser.
👤 Najibullah Jafari
- GitHub: Najibullah_jafari
- Twitter: Najibullah_jafari
- LinkedIn: Najibullah_jafari
- [Responsive Version]
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Do you like this project? So don't wait to give one star!
I would like to express my deepest gratitude to Microverse for this project. The invaluable learning experience and support provided have been instrumental in my growth as a developer. My mentors and instructors deserve special thanks for their guidance and patience. The collaborative spirit of my fellow students has been a constant source of inspiration. I also extend my appreciation to the open-source community for their contributions. Lastly, my family and friends' unwavering support has been a driving force throughout this journey. Thank you, Microverse, for this incredible opportunity!
This project is MIT licensed.