Dewalade1/simple-calculator-frontend

A simple calculator app built with react

Simple Calculator Frontend

Tools used

• ReactJS - to build the app
• NextJS - for preview and production deployment
• Vercel - for hosting the app
• Git and GitHub - for tracking, storage and version control

How I worked on this Project

• I built the app based on these mockups:
  • Both Display Fields Empty Mockup
  • Previous and Current Display Fields Filled Mockup
  • Only Current Display Field Only Filled Mockup
  • Both Display Fields Filled Mockup
  • Button Pressed Mockup
• I used feature branches and pull requests in this Project
  • Example PRs
  • Example Branches
• I worked documented and fixed bugs using GitHub Issues: Example Issues

Why I built the Project this way

• I didn't use a state management library like Redux on purpose. For this app, the useState hook was sufficient. I realized that more and more projects don't use Redux anymore since GraphQL or react-query are often used for data management.

• UI libraries are a great place to find ready-made components that help speed up the dev process. They can also be handy if one only needs a few custom components. For these reasons, I used Styled-Components to create and style the buttons, inputs and cards used in this project.

How to setup the app

Setup 1

• The app has been setup and deployed on Vercel

Setup 2

Alternatively, you can do the following to setup the app locally. Run the commands below in your terminal or CMD:

1 Clone the repo using this command

git clone https://github.com/Dewalade1/simple-calculator-frontend.git

2 Change directory to the repo folder

cd <path-to-repository>/simple-calculator-frontend

3 Install the dependencies using npm

npm i

4 See Option 2 in the How to start the app section below to start the app

How to start the app

Option 1

• The easiest way to start up the app is to click here

Option 2

You can start the app locally or run it on a development environment using the following commands:

• npm start

Start app locally

• npm run dev

Run on a local dev environment

Available Scripts

Most available scripts are NextJS built-in scripts but the most useful ones are:

• npm start

Start app

Open http://localhost:3000 in your browser to view it. The page will refresh if you make edits to the code. You will also see any compile and lint errors in the console.

• npm run dev

Start app using a dev environment

Open http://localhost:3000 in your browser to view it. The page will refresh if you make edits to the code. You will also see any compile and lint errors in the console.

• npm run lint

Check app for lint errors

Runs eslint on all your files by default. It formats your code based on your eslint specifications

• npm run build

Build the app locally

Builds the static files for your app locally. Its a local simulation of the build command used by React hosting services. Use this to test whether your app will build successfully when deployed on a server.