DT Money

This is a finance management application developed as part of the Rocketseat Ignite Class 03, focusing on React and TypeScript.

Features

• Add and manage transactions, including income and expenses.
• Track your balance and view a summary of your transactions.
• Styling is done using Styled Components.
• State management is handled through Context API and Reducer.
• Form handling and validations are done using React Hook Form and Zod.
• Custom hooks such as useEffect, useState, useCallback, and useMemo are utilized.
• Backend data is simulated using Json Server.
• API requests are made using Axios.

Getting Started

Follow the instructions below to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

To run this project, you need to have Node.js and npm (Node Package Manager) installed on your machine.

Installing

1. Clone the repository to your local machine using the following command:

   git clone https://github.com/your-username/dt-money.git
   

2. Navigate to the project directory:

   cd dt-money
   

3. Install the dependencies:

   npm install
   

Running the Application

1. Start the backend server:

   npm run server
   

2. Open a new terminal window and start the React application:

   npm start
   

   The application will be accessible at http://localhost:3000.

Project Structure

The project structure follows a typical React application structure:

• public: Contains static assets and the HTML template file.
• src: Contains the source code of the application.
  • assets: Contains images, fonts, or any other static assets.
  • components: Contains reusable UI components.
  • contexts: Contains the context providers and related files.
  • hooks: Contains custom hooks used in the application.
  • pages: Contains the main pages or screens of the application.
  • services: Contains service files for making API requests.
  • styles: Contains global styles and styled components.
  • utils: Contains utility functions or helper files.
  • App.tsx: The main entry point of the application.
  • index.tsx: The file responsible for rendering the application.

Acknowledgments

This project was developed as part of the Rocketseat Ignite Class 03, covering various React and TypeScript concepts and best practices.