Math Magicians

# 📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Math Magicians

Math Magicians is a web app to work like a calculator, I used React and JSX to build this web app.

🛠 Built With

• HTML,
• CSS,
• Java Script
• GIT,
• GITHUB
• LINTERS
• Webpack
• React

Tech Stack

Client

• HTML5
• CSS3
• JavaScript
• React

Server

• VS CODE Live Server Extension

Key Features

• Linters for code quality
• Responsive design for different screen sizes
• In this project best coding practices is used.

🚀 Live Demo

Check out the live demo of this project here.

💻 Getting Started

To get a local copy up and running, follow these steps.

1. Go to this URL link: https://github.com/najibullahjafari/math-magicians
2. clone the repo and start working on it.

Prerequisites

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/

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone https://github.com/najibullahjafari/math-magicians

Install

Please do the following steps in this order:

1. Use npm run build to instal all dependencies.
2. Then you can run project by npm start command

Linters: If you had any issues with linters for react you can install as bellow:

ESLint

1. 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-react@7.x @babel/preset-react@7.x
   

   not sure how to use npm? Read this.
2. Copy .eslintrc.json and .babelrc 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.
4. Run npx eslint "**/*.{js,jsx}" on the root of your directory of your project.
5. Fix linter errors.
6. 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!

Stylelint

1. 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.

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.

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!

Usage

To run the project, execute the following command:

Open the index.html in your browser

Run tests

To run tests, run the following command:

to check for styling errors:

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

Deployment

You can deploy this project using:

Your working browser.

👥 Authors

👤 Najibullah Jafari

• GitHub: Najibullah_jafari
• Twitter: Najibullah_jafari
• LinkedIn: Najibullah_jafari

(back to top)

🔭 Future Features

• [Responsive Version]

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Do you like this project? So don't wait to give one star!

(back to top)

🙏 Acknowledgments

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!

(back to top)

📝 License

This project is MIT licensed.

(back to top)