DT Money

💰 A digital wallet to help you take control of your finances. In this project, I applied so many Frontend features. It was used concepts from ReactJS, like State, Context API and other hooks.

Beyond that, it was used libraries to handle form validation and submitting, like ZOD and React Hook Form. For the page's style, "Styled Components" was included. Regarding performance, "memo", "useMemo" and "useContextSelector" were used to avoid unecessary variable and function rerendering.

About the HTTP request, Axios library was implemented to make fetching data easier in the simulated backend offered by JSON Server

💰 DT Money 🚀 Done ✔️

Features

• Add new transaction
• Search for a transaction

Requirements to run the project

Before you run the project, check if you have [Node.js](https://nodejs.org/en/) installed on your machine, as well [Git](https://git-scm.com) to clone this repository.

Running the application

    # Clone this repository on your machine:
    $ git clone https://github.com/vitorlinsbinski/dt-money.git

    # Access the project folder in your terminal:
    $ cd dt-money

    # Install all dependencies:
    $ npm install

    # Initialize JSON Server with these parameters: -w for watching each HTTP request and -d for the delay in microseconds:
    $ npx json-server server.json -w -d 350

    # Run the application:
    $ npm run dev

Main Technologies

• ReactJS
• Vite
• TypeScript
• React Hook Form
• ZOD
• JSON Server
• Radix UI
• Axios
• Phosphor React
• Styled Components
• use-context-selector

Final Result

Author

---

_{Vitor Linsbinski} 🚀

Developed by Vitor Linsbinski