Web Calculator UI - @Ricardo Ferreira

Web Calculator

Implements a ReactJS based app, using TypeScript, React Router, React Hooks, React Context,AG-GRID Datatable, JWT Decode and a couple of other libraries, to provide a couple of simple math functionalities (addition, subtraction, multiplication, division, square root, and a random string generation) where each functionality will have a separate cost per request.
Users will have a starting credit/balance. Each request will be deducted from the user’s balance. If the user’s balance isn’t enough to cover the request cost, the request shall be denied.
The design is a try to move from the conventional login/password pages and I tried to enrich the UX with information in real time of the balance available and checking the operations done.
Each operation is persisted into a database and can be retrieved through a AG-GRID based datatable supporting pagination, searching and sorting!
This app consumes services offered by a REStful API at https://api.ferreiras.dev.br/swagger-ui/index.html and does not make any math, of any sort at the front-end. All maths are done in the backend and their results available at specific endpoints.
The user must be authenticated and authorized accordingly to have full access to the API services.

I will let you give it a try using these credentials to taste it:
username: [email protected], password: example.com

Click at CalculatorWeb-UI, load these credentials, authenticate and get a credit of 100.00 to do your maths!
Enjoy it....
Why don't you take a look at this short video....to see how it works...
Short Video

---

Table of contents

• Web Calculator UI - @Ricardo Ferreira
• Table of contents
• Overview
• Screenshot
• Links
• Built with
• How I did it
• Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

These web pages were coded using ReactJS exploring hooks such as useState, useLocation, useEffect, useContext:

• src|
  • App.tsx
  • assets|
  • components|
    • Footer
    • Header
    • FormInput
    • Operations
    • Welcome
  • routes
    • Home
    • Login
    • Operations
  • services
    • auth-services.ts
    • operation-services.ts
    • operators-service.ts
    • records-service.ts
    • wallet-services.ts
  • utils
    • context-token.ts
    • context-wallet.ts
  • localstorage
    • access-token-repository.ts
    • wallet-repository.ts
  • App.tsx
  • index.css
  • main.tsx
  • index.html
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.js
  • yarn.lock
• public|

Screenshot

Links

• Live Site URL: [https://calculatorweb.ferreiras.dev.br]

Built with

In order to build the app do the following:

• identify your ip address and tweak the src/utils/system.ts file
  export const BASE_URL = import.meta.env.VITE_BACKEND_URL ?? "http://<IP_ADDRESS>:8095/api/v1";

If running both UI, DB, and API in the same container, check the CORS configuration at:
https://github.com/rnhc1000/calculatorWeb/src/main/java/br/dev/ferreiras/calculatorweb/config/CorsSecurityConfiguration.java

Tweak it as per your environment and see the instructions available at https://github.com/rnhc1000/calculatorWeb/tree/main/src/main/resources/dockerBuild.sh

After you have everything in place:

yarn dev --host <IP_ADDRESS> --port 7500

adn the UI will be available at: http://<IP_ADRESS>:7500

Just in case you want to see how the UI works: https://youtu.be/CUdN-P-14So

How I did it

import { createContext } from "react";

export type ContextWalletBalanceType = {

    contextWalletBalance: string;
    setContextWalletBalance: (contextWalletBalance : string) => void;

}

export const ContextWalletBalance = createContext<ContextWalletBalanceType>({

    contextWalletBalance: "0",
    setContextWalletBalance: () => {}
    
})

Continued development

• Use SMACSS methodology

Useful resources

• [https://reactjs.org] React lets you build user interfaces out of individual pieces called components!.
• [https://yarnpkg.org/] Open-source package manager used to manage dependencies in JavaScript.
• [https://vitejs.dev/guide/] Build tool that aims to provide a faster and leaner development experience for modern web projects.

Author

• Website - [https://calculatorweb.ferreiras.dev.br]

Acknowledgments