corrected the folder structure

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+package-lock.json

README.md

@@ -30,6 +30,19 @@ A beautiful, responsive, and modern **Expense Tracker App** built with **React**
 
 ---
 
+## 📂 Folder Structure
+
+```
+/src
+├── /assets         # Static assets like images and SVGs
+├── /components     # Reusable UI components (Modals, Cards, Footer, etc.)
+├── /context        # React Context providers for global state
+├── /pages          # Top-level components for each page/route
+├── App.jsx         # Main application component with routing
+├── index.css       # Global CSS styles
+└── main.jsx        # Main entry point of the application
+```
+
 ## 🚀 Getting Started
 
 Want to run Smart Tracker on your machine? Just follow the steps below.

src/App.jsx

@@ -1,7 +1,4 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import HomePage from './components/HomePage';
-import Dashboard from './components/Dashboard';
-import { TransactionProvider } from './components/TransactionContext';
 import { Toaster } from 'react-hot-toast';
 import { CurrencyProvider } from "./components/CurrencyContext";
 import AboutPage from './components/AboutPage';

src/components/AddGoalModal.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { useCurrency } from "./CurrencyContext";
-import { useTransactions } from './TransactionContext';
+import { useCurrency } from "../context/CurrencyContext";
+import { useTransactions } from '../context/TransactionContext';
 import toast from 'react-hot-toast';
 
 export default function AddGoalModal({ showModal = true, setShowModal = () => {}, darkMode = false }) {

src/components/AddTransactionModal.jsx

@@ -7,8 +7,8 @@ const formatDate = (date) => {
 };
 
 import { useState, useEffect } from 'react';
-import { useCurrency } from "./CurrencyContext";
-import { useTransactions } from './TransactionContext';
+import { useCurrency } from "../context/CurrencyContext";
+import { useTransactions } from '../context/TransactionContext';
 import toast from 'react-hot-toast';
 
 export default function AddTransactionModal({ showModal = true, setShowModal = () => {}, darkMode = false }) {

src/components/ContributeToGoalModal.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { useCurrency } from "./CurrencyContext";
-import { useTransactions } from './TransactionContext';
+import { useCurrency } from "../context/CurrencyContext";
+import { useTransactions } from '../context/TransactionContext';
 import toast from 'react-hot-toast';
 
 export default function ContributeToGoalModal({ showModal, setShowModal, darkMode, goalId }) {

src/components/GoalCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useCurrency } from "./CurrencyContext";
+import { useCurrency } from "../context/CurrencyContext";
 import { Trash2, PiggyBank } from 'lucide-react';
 
 const GoalCard = ({ goal, darkMode, onDelete, onContribute }) => {

src/components/AboutPage.jsx → src/pages/AboutPage.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { ArrowLeft, User, Mail } from 'lucide-react';
-import Footer from './Footer'; 
+import Footer from '../components/Footer'; 
 
 const AboutPage = () => {
   const [isVisible, setIsVisible] = useState(false);

src/components/ContactPage.jsx → src/pages/ContactPage.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom'; // Placeholder, navigation is handled by props
 import { Send, User, Mail } from 'lucide-react';
-import Footer from './Footer';
+import Footer from '../components/Footer';
 
 const ContactPage = ({ darkMode, navigateTo }) => {
   // State to control the animations

src/components/Dashboard.jsx → src/pages/Dashboard.jsx

@@ -11,7 +11,7 @@ import ConfirmationModal from "./ConfirmationModal";
 import Footer from "./Footer";
 // Download imports
 import { PDFDownloadLink } from "@react-pdf/renderer";
-import TransactionPDF from "./TransactionPDF";
+import TransactionPDF from "../components/TransactionPDF";
 import { Link } from "react-router-dom";
 
 export default function Dashboard() {

src/components/GoalsPage.jsx → src/pages/GoalsPage.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'; // 1. Import useEffect
-import { useTransactions } from "./TransactionContext";
-import AddGoalModal from './AddGoalModal';
-import Footer from './Footer';
-import GoalCard from './GoalCard';
+import { useTransactions } from "../context/TransactionContext";
+import AddGoalModal from '../components/AddGoalModal';
+import Footer from '../components/Footer';
+import GoalCard from '../components/GoalCard';
 import { Plus } from 'lucide-react';
-import ConfirmationModal from './ConfirmationModal';
-import ContributeToGoalModal from './ContributeToGoalModal';
+import ConfirmationModal from '../components/ConfirmationModal';
+import ContributeToGoalModal from '../components/ContributeToGoalModal';
 
 export default function GoalsPage() {
   const { goals, setGoals } = useTransactions();

src/components/HomePage.jsx → src/pages/HomePage.jsx

@@ -11,7 +11,7 @@ import {
   Moon,
 } from 'lucide-react';
 import { motion } from 'framer-motion';
-import Footer from './Footer';
+import Footer from '../components/Footer';
 
 export default function HomePage() {
   const [darkMode, setDarkMode] = useState(false);