A fully frontend-based Expense Tracker built with React β simulating authentication, offline-first support, auto session expiry, and user-scoped data persistence β all without a backend.
- π Simulated Login/Logout system (each user gets their own expense data)
- β Auto Session Expiry after inactivity
- π User-specific Dashboard Data saved locally
- π΄ Works offline and syncs when online
- π Welcome Pop-up on login
- πΎ Uses localStorage/sessionStorage to mimic real backend behavior
- React (Vite)
- JavaScript
- HTML + CSS
- LocalStorage + SessionStorage
src/
assets/ # Icons and media
components/ # Dashboard, Home,Login ,Signup,SyncLoader
components/expenses
# expensesForm,item etc.
hooks/ # for syncing purpose
pages/ # Expense Dashboard
redux/ # slices or helper function for global state management
sections/ # Hero,Navbar
App.jsx
main.jsx
# 1. Clone the repository
git clone https://github.com/your-username/client-web-type.git
# 2. Navigate into the project directory
cd client-web-type
# 3. Install dependencies
npm install
# 4. Start the development server
npm run dev
# App will run on http://localhost:5173
This project can teach you the complex concept of frontend which never taught in tutorials normally 1.Managing local/session storage cleanly
2.Building offline-friendly apps
3.Creating multi-user experiences in frontend-only setups
PRs are welcome! Found a bug? Got an idea? Fork and go brrrr π οΈ Don't forget to star the repo if you like it! β
MIT License
Made with β‘ by Sarvesh Baranwal