Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benawi/microverse-reac-math-magicians
Math Magicians is a website built as a Single Page App (SPA) catering to mathematics enthusiasts. Users can perform simple calculations as well as generate random math quotes to read on the platform.
https://github.com/benawi/microverse-reac-math-magicians
Last synced: 13 days ago
JSON representation
Math Magicians is a website built as a Single Page App (SPA) catering to mathematics enthusiasts. Users can perform simple calculations as well as generate random math quotes to read on the platform.
- Host: GitHub
- URL: https://github.com/benawi/microverse-reac-math-magicians
- Owner: Benawi
- License: mit
- Created: 2023-06-05T11:12:28.000Z (over 1 year ago)
- Default Branch: develop
- Last Pushed: 2024-03-09T17:31:30.000Z (11 months ago)
- Last Synced: 2024-04-23T19:22:14.722Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.37 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)
# 📖 Math Magicians React Project
Math Magicians React Project - Microverse! project is a repository consisting of the following files:
- Html files
- CSS files
- JS file
- HTML, CSS, and JS linters file
### React Project: [Requirements](https://github.com/microverseinc/curriculum-react-redux/blob/main/math-magicians/sneak_peek_v2.md)
### Features Added:
- [x] Math Magicians:
- [x] In the [previous project](https://github.com/Benawi/Microverse-Reac-Math-Magicians/pull/1), I worked on the setup of a React application using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html), now in this project:
- [x] All the boilerplate from Create React App (text, images, styles) is deleted.
- [x] A new directory called components was created.
- [x] Inside components, a new Calculator.js file is created.
- [x] In Calculator.js, create a React component that matches [this](https://github.com/microverseinc/curriculum-react-redux/blob/main/math-magicians/images/calculator.png) design.
- [x] The [design]( [this](https://github.com/microverseinc/curriculum-react-redux/blob/main/math-magicians/images/calculator.png) ) only (JSX and CSS) is implemented
- [x] Functional components used
- [x] At least 1 child component is created
- [x] The Calculator is imported and used in the top-level component: App.js
- [x] All calculator buttons work according to their functionality e.g. the - button will subtract a given value
- [x] The following external API: [API Ninjas](https://api-ninjas.com/api/quotes) used to fetch data
- [x] A [new](https://github.com/Benawi/Microverse-Reac-Math-Magicians/blob/72eb01ce2a09a5d99c719a29da5914948a1587c0/src/components/displayQuoate.js#L4) component is created for displaying a quote
- [x] Data fetched inside of a new component
- [x] A [loading](https://github.com/Benawi/Microverse-Reac-Math-Magicians/blob/72eb01ce2a09a5d99c719a29da5914948a1587c0/src/components/displayQuoate.js#L30-L35) state showed
- [x] An error state stated showed [L21](https://github.com/Benawi/Microverse-Reac-Math-Magicians/blob/72eb01ce2a09a5d99c719a29da5914948a1587c0/src/components/displayQuoate.js#L21)
- [x] The [new](https://github.com/Benawi/Microverse-Reac-Math-Magicians/blob/72eb01ce2a09a5d99c719a29da5914948a1587c0/src/components/displayQuoate.js#L4) component imported into the main component (next to the Calculator)
- [x] A website consisting of 3 pages: Home, Calculator, and Quote is created.
- [x] The general layout match [these](https://github.com/microverseinc/curriculum-react-redux/blob/main/math-magicians/project_full_website_v2.md) wireframes
- [x] styles added to improve the look and feel.
- React basic styling (inline styles, importing CSS, and pre-processed CSS files) used.
- [x] For every page, a created.
- [x] Navigation links for all 3 routes are displayed on each page.
- [x] [React Router](https://reactrouter.com/en/main) used to make the routes work.
- [x] Set up React Testing Library.
- [x] The official [documentation](https://testing-library.com/docs/react-testing-library/intro) is followed
- [x] Jest Setup(it's included in Create React App).
- [x] Write unit tests for the files operate.js and calculate.js using Jest.
- [x] Create a unit for all React components tested:
- [x] Jest snapshots used to test the components.
- [x] React Testing Library used to simulate user interaction.
- [x] Run full tests suite using Jest. All tests [pass](https://github.com/Benawi/Microverse-Reac-Math-Magicians/assets/21217148/09c3332f-5ec0-4ad0-9d64-481d15f7dd90)
- [x] In the browser tested ; it render without problems, [this](https://github.com/Benawi/Microverse-Reac-Math-Magicians/assets/21217148/219b8efd-d227-4aba-b08a-1ef49d460565)
## 🌐 Live Demo
- [React Math Web App](https://benawi.github.io/Microverse-Reac-Math-Magicians/)
- Learn More [How to deploy react app](https://github.com/gitname/react-gh-pages)
## 💻 Getting Started with Create React App
To get a local copy up and running, follow these steps.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Setup
Clone this repository to your desired folder:
> cd my-folder
> git clone [email protected]:Microverse-JS-Capstone.git
### Prerequisites
In order to run this project you need:
- gitHub account;
- git installed on your OS.
### Install
> [Linters](https://github.com/microverseinc/linters-config/tree/master/html-css-js)
- Installations required to run this project:
### Install the node module
- Run the following command:
```
npm install
```
### Creat the react
[Create react app](https://create-react-app.dev/docs/getting-started)
- Run the following command:
```
npx create-react-app my-app
cd my-app
npm start
```
### In order to import a CSS file add the style-loader and css-loader to your module configuration
- Run the following command:
```
npm install --save-dev style-loader css-loader
```
### Webhint installation.
- Run the following command:
```
npm install --save-dev [email protected]
```
### Stylelint installation.
- Run the following command:
```
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
```
### ESLint
- Run
```
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
```
### Usage
You can use this project by cloning it to your folder and changing index.html and styles.css files.
### Run tests
To run tests, run the following commands:
To track linter errors locally follow these steps:
Download all the dependencies run:
```
npm install
```
Track HTML linter errors run:
```
npx hint .
```
Track CSS linter errors run:
```
npx stylelint "**/*.{css,scss}"
```
Track JavaScript linter errors run:
```
npx eslint .
```
### Deployment
You can redeploy this project by adding new lines of code to source files.
### 👤 Habtamu Alemayehu
- GitHub: [Benawi](https://github.com/Benawi)
- Math magicians: Deployement
Contributions, issues, and feature requests are welcome!
Give me ⭐️ If you like this project!
- We would like to thank the Microverse program for providing us with this great chance.
This project is [MIT](./MIT.md) licensed.