https://github.com/frau-azadeh/contextapi

Costly is a modern expense tracking application designed to help you manage your expenses efficiently. Powered by Next.js, Context API, React Hook Form, and TailwindCSS, it provides a seamless experience for adding, filtering, and managing your budget.
https://github.com/frau-azadeh/contextapi

context-api nextjs14 tailwindcss typescript

Last synced: 18 days ago
JSON representation

Costly is a modern expense tracking application designed to help you manage your expenses efficiently. Powered by Next.js, Context API, React Hook Form, and TailwindCSS, it provides a seamless experience for adding, filtering, and managing your budget.

• Host: GitHub
• URL: https://github.com/frau-azadeh/contextapi
• Owner: frau-azadeh
• License: mit
• Created: 2025-01-18T12:33:54.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-09-15T09:35:49.000Z (8 months ago)
• Last Synced: 2025-09-15T11:28:54.558Z (8 months ago)
• Topics: context-api, nextjs14, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://contextapi-t7ls.vercel.app/
• Size: 8.24 MB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

          
# Costly 🧾

Costly is a modern expense tracking application designed to help you manage your expenses efficiently. Powered by **Next.js**, **Context API**, **React Hook Form**, and **TailwindCSS**, it provides a seamless experience for adding, filtering, and managing your budget.

---

## 🚀 Features

- Add, edit, and delete expenses with ease.

- Categorize expenses (Food, Transportation, Entertainment, etc.).

- Filter expenses by category.

- View total expenses and categorized statistics.

- Responsive design with **light mode** and **dark mode** support.

- Form management with **React Hook Form**.

---

## 🛠️ Tech Stack

- **Next.js (v14)**: Framework for React applications with modern routing and rendering capabilities.

- **Context API**: State management for expenses and theme.

- **React Hook Form**: Lightweight and flexible form management.

- **TypeScript**: Strongly-typed JavaScript for scalability and maintainability.

- **TailwindCSS**: Utility-first CSS framework for modern and responsive design.

- **React Icons**: Beautiful icons for better user experience.

---

## ⚡ Getting Started

### Prerequisites

    - Node.js (v16+)

    - npm or yarn package manager

### Installation

    1. Clone the repository:

        git clone https://github.com/frau-azadeh/Context-api.git

    2. Navigate to the project directory:

        cd Costly

    3. Install dependencies:

        npm install

    4. Start the development server:

        npm run dev

    5. Open your browser and navigate to:

        http://localhost:3000

## 🎯 Usage

        Use the Expense Form to add new expenses with title, amount, and category.

        View the Expense List to see all your expenses.

        Filter expenses by category to organize your budget better.

        Switch between light mode and dark mode using the toggle button in the top-right corner.

## 🙌 Contributing

🌻 Azadeh Sharifi Soltani

Feel free to contribute to this project by submitting a pull request or opening an issue! Made with 💻, ☕, and 🌻 by Azadeh Sharifi Soltani