"Math-magician" is about building Single Page application based on an external API.
I have setup the environment and tools needed to develop a React application. In the following projects,I will develop the actual application.
Phase 1- setup branch
- The easiest way to create a React application is using Create React App (CRA) and following the instructions in this guide.
- The application should run in the browser without errors.
Phase 2- setup2 branch All the project requirements for the step 2 of the project - Components have been implemented: I have created a directory called components from CRA(text,images,styles).Inside components, created a new Calculator.js file and then created a react component that matches the below design.
Phase 3- Step3 branch I have created a new directory called logic and inside it I wrote code in calculate.js and operate.js after installing big.js using npm.I implemented click event handlers using the math logic from calculate.js and operate.js in my react component just to make my calculator buttons to work according to the funcationality i.e the button should subtract a given value when clicked on subtract button.
Phase4- Fetch API Branch I have implemented and used external Api i.e API NINJAS and created a new component for displaying a quote .I fetched data inside of a new component that shows a loading and error state. I imported the new componenet into my main component which is next to the calculator component.
Phase5 -Full Website(Math-Magician) branch I developed full website with three pages i.e Home, calculator and Quote. For every page, I created a to display navigation links for all 3 routes on each page. I have used react basic styling to improve the look and feel of the pages.
Phase 6-Test(Math-Magician) branch All the requirements from the test phase of the project have been implemented as follow:
-Set up React Testing Library. -Wrote unit tests for the files operate.js and calculate.js using Jest. -Created unit tests for all React components: -Used Jest snapshots to test the components. -Used React Testing Library to simulate user interaction. -Ran full tests suite using Jest.
- Major languages: Javascript
- Frameworks: React.js
- Technologies used: Node.js, Babel, Jest, webpack
- Tested with: - ESLint (JavaScript linting), Stylelint (style linting)
- Internet connection and browser
- A text editor(preferably Visual Studio Code)
- Browser
- This project was bootstrapped with Create React App.
- Clone the repository using
git clone https://github.com/harshi0102/math-magician-project.git - Change directory into the project folder:
cd math-magician-project - Run
npm install - Run
npm start - A new browser will open automatically with application loaded
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open 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 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 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.
👤 Harshika Govind
- GitHub: @harshi0102
- Twitter: @harshika0102me
- LinkedIn: harshikagovind
👤 Abdul-Aziz Fakhriddinov
- GitHub: @githubhandle
- Twitter: @facebookhandle
- LinkedIn: LinkedIn
- [Make complete website]
- [Dynamic usage of routers for navigation in the website]
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
I would like to thank Microverse
This project is MIT licensed.