"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 a random math-related quote.
- math-magicians
- 📗 Table of Contents
- 📖 Math Magicians
It is a Single Page App (SPA) that allows users to: Make simple calculations and Read a random math-related quote.
I will start by building the core functionality, which is a calculator. At the very beginning my website will contain only the simple UI presented below, but it will be able to perform all math operations.
Once the calculator is ready I will use it as a part of a full website that includes 3 sub-pages:
I will be building my "Math magicians" website for more than a whole week. Here is the list of projects that will guide me through the steps described above. I will find details about each of the project requirements in the upcoming program activities. In some of the projects (tests), I will be working collaboratively by using pair programming.
- Project 1: Setup.
- Project 2: Components.
- Project 3: Events.
- Project 4: Fetch data from API.
- Project 5: Full website.
- Project 6: Tests (pair programming).
- Deployment.
This is the first project of the Math Magicians application. I will set up the environment and tools needed to develop a React application. In the following projects, I will develop the actual application.
- Set-up linters on local environments.
- Used correct flow GitFlow.
- Documentation the project in a professional way on README file.
- First, make sure I have Node.js installed on my local machine
- The easiest way to create a React application is using Create React App
- The application should run in the browser without errors
In this project, I should continue with the development of the Math Magicians app. I will develop a React component that will hold the core functionality: a calculator.
- Delete all the boilerplate from Create React App (text, images, styles).
- Create a new directory called components.
- Inside components, create a new Calculator.js file.
- In Calculator.js, create a React component that matches this design:
- Implement the design only (JSX and CSS)- Develop just the UI of the calculator; the math logic to make it work will be added in the next project.
- Use functional components
- Create at least 1 child component
- Once the Calculator is ready, import it and use it in your top-level component: App.js
- Test it in the browser; it should render without problems.
In this project, you will add the logic needed to make the Calculator component you developed in the previous project actually work.
- Create a new directory called logic inside your project
- Copy the files calculate.js and operate.js into my logic/ directory
- Install big.js using NPM
- Analyze the files calculate.js and operate.js, be sure you understand what they do
- Import the files in your Calculator.js component
- Implement click event handlers using the math logic from calculate.js and operate.js in my React component
- The goal is to make all calculator buttons work according to their functionality e.g. the - button should subtract a given value
- Test my app in the browser. The Calculator should be able to perform math operations.
In this project, I will fetch data from an external API to display "quotes" alongside your calculator.
- Use the following external API: API Ninjas
- Create a new component for displaying a quote
- Fetch data inside of a new component
- Show a loading state
- Show an error state
- Import the new component into your main component (next to the Calculator)
- It should be on the same page as the Calculator
In this project, I will create a full website for the Math magicians app, consisting of several pages and using the components already created.
- Create a website consisting of 3 pages: Home, Calculator, and Quote.
- The general layout should match these wireframes:
- Add my own styles to improve the look and feel.
- Use React basic styling (inline styles, importing CSS and pre-processed CSS files).
- For every page, I should create a .
- Make sure that navigation links for all 3 routes are displayed on each page.
- Use React Router to make the routes work.
In this project, you will write unit tests for the Math Magicians app, using the Jest and React Testing Library libraries.
- Set up React Testing Library.
- Follow the instructions in the official documentation.
- I don't need to setup Jest (it's included in Create React App).
- Write unit tests for the files operate.js and calculate.js using Jest.
- Create unit tests for all React components:
- Use Jest snapshots to test the components.
- Use React Testing Library to simulate user interaction.
- Run my full tests suite using Jest. All tests should pass.
In this exercise, you will deploy the Math Magicians app to Render.
- Use Render to deploy the Math Magicians app.
- Add a link to the deployed application to the README file in your GitHub repo.
Client Side / Front-End
Server Side / Back-End
Package, Library, Framework
Code Convention, Code Analysis
Version Control, CI/CD, Hosting Service
IDE, Desktop Apps, Other Tools
- Make simple calculations.
- Read a random math-related quote.
- single page apps (SPA).
- Click the following url for ... Live Demo ...
To get a local copy up and running, follow these steps.
In order to run this project you need:
- git version 2.38.x
- node.js version > 12.x
- IDE (visual studio code, etc)
- browser (chrome, firefox, edge, safari)
- install the dependencies
Clone this repository to your desired folder:
cd math-magicians
git [email protected]:fickryiman/math-magicians.gitInstall this project with:
cd math-magicians
npm installTo run the project, execute the following command:
npm run build (production environment)
npm start (development environment)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.
To run tests, run the following command: Run Github Actions Test
npm test
npx stylelint "**/*.{css,scss}"
npx eslint "**/*.{js,jsx}"
auto fix linter with --fix
npx stylelint "**/*.{css,scss}" --fix
npx eslint "**/*.{js,jsx}" --fixYou can deploy this project using: GitHub Pages Example:
https://fickryiman.github.io/math-magicians/👤 Fickry Bil Iman
- GitHub: @fickryiman
- Facebook: @fickry.bil.iman
- LinkedIn: fickry-bil-iman
- add login to user with social media auth or google auth
- create mobile version
Contributions, issues, and feature requests are welcome!
Feel free to check the https://github.com/fickryiman/math-magicians/issues.
If you like this project please follow me on my GitHub: @fickryiman or connect on my LinkedIn: @fickry-bil-iman.
First thing first, I would like to say Alhamdulillah, Thanks to my Families, Microverse and Micronaut's, Reviewer's, Thank you for all of the experiences, lesson and everythings.
This project is MIT licensed.