• 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

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 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/[email protected] @babel/[email protected]  @babel/[email protected]  @babel/[email protected] @babel/[email protected]
   

   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 [email protected] [email protected] [email protected] [email protected]
   

   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

Future Features

• [Responsive Version]

Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

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

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!

License

This project is MIT licensed.