Skip to content

srmasharad/day-book

Repository files navigation

Day Book

A simple expense tracking application created using Vite with React and TypeScript.

Overview

Day Book is a web application that allows users to track their daily expenses. It provides a user-friendly interface to add, view, edit, and delete expense entries. The app helps users keep a record of their expenses, organize them by date and category, and calculate the total amount spent.

Features

  • Add new expenses with details such as name, category, quantity, amount, note, and date.
  • View a list of all expenses.
  • Edit or delete existing expenses.
  • Calculate and display the total amount spent.
  • User-friendly and responsive UI for easy navigation and interaction.

Packages Used

  • Radix UI: A collection of React UI components for building accessible and customizable interfaces.
  • React Hook Form: A flexible and performant form validation library for React.
  • Supabase: An open-source alternative to Firebase for building backend systems.
  • Tanstack Query: A data-fetching library for React applications that simplifies data management and provides caching and real-time updates.
  • Class Variance Authority: A package for handling class variance in TypeScript.
  • Clsx: A utility for constructing class names conditionally in JavaScript and TypeScript.
  • Date-fns: A library for manipulating and formatting dates in JavaScript and TypeScript.
  • Lucide React: A library of colorful and customizable icons for React applications.
  • React Hot Toast: A lightweight toast notification library for React applications.
  • React Router DOM: A library for routing and navigation in React applications.
  • Tailwind CSS: A utility-first CSS framework for building responsive and modern web interfaces.
  • Zod: A TypeScript-first schema validation library.

Installation

  1. Clone the repository.
  2. Navigate to the project directory.
  3. Install dependencies using yarn or npm with the following command:
npm install

or

yarn install

Usage

Run the development server with the following command:

npm run dev

Access the application in your browser at http://localhost:5173.