Math magicians

Description

• Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to:
  • Make simple calculations.
  • Read a random math-related quote.

	Math magicians Home Page

	Calculator		Quote

Learning objectives

• Set up a React app.
• Use React documentation.
• Use React components.
• Use React props.
• Use React state.
• Handle events in a React app.
• Use React life cycle methods.
• Understand the mechanism of lifting state up.
• Use React hooks.
• Use React Router.
• Use styles in a React app.
• Write unit tests with React Testing Library.
• Write unit tests with snapshots with Jest.

Built With

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser. This project is build with:

The page will reload if you make edits.
You will also see any lint errors in the console.

• , ,
• 
• 

Live Demo Links

Github Pages

Heroku

Netlify

Getting Started

Clone this repository

• To get the content of this project locally you need to run this command in your terminal:

$ git clone https://github.com/BenMukebo/Math-magicians.git
$ cd Math-magicians

Run project

• After cloning the project you need to run this command

$ npm run start 

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

• Compiled SASS to CSS:

$  sass --watch src/scss/App.scss src/css/App.css

To watch and output to directories by using folder paths as your input and output

Setup React Router

• To use the Router component provided to wrap your components and associate them with a path.

$ npm install react-router-dom 

Learn More

This command will download all the dependancies of the project You can learn more in the Create React App documentation.

Run Tests

npm i @testing-library/jest-dom
npm install --save-dev @testing-library/jest-dom

$ npm install @testing-library/react react-test-renderer jest-dom --save-dev

Learn More

See the section about deployment for more information. For tracking linter errors locally you need to follow these steps:

• For tracking the linter errors in HTML file run:

To learn React, check out the React documentation.

Code Splitting

• For tracking the linter errors in CSS file run:

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

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

Analyzing the Bundle Size

• And For tracking the linter errors in JavaScript file run:

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

npx eslint .

Making a Progressive Web App

• Use npm run build to run the app in live server

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Deployment

• npm run build fails to minify

Show your support

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Author

👤 Ben Mukebo

• GitHub: @BenMukebo
• Twitter @BenMukebo
• LinkedIn BenMukebo

🤝 Contributing

Feel free to check the issues page

Give a ⭐ if you like this project! ❤️❤️❤️

Acknowledgments

• Thanks to everyone who will get time to check this code especially to code reviewers.

📝 License

This project is MIT licensed.