/Math-magicians

Math Magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read random math-related quotes. Built with React.

Primary LanguageJavaScript

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
screenshot
Calculator Quote
screenshot screenshot

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.

  • HTML5, CSS3, Sass
  • JavaScript
  • React

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

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