A modern, responsive, and user-friendly frontend application for managing digital wallet operations. Built with React, TypeScript, and a powerful stack of UI libraries.
This is the frontend client for the Digital Wallet Backend API.
- 🎥 Overview Video Upcoming , Keep eyes on my youTube: Watch on YouTube
- 🌐 Live Demo (Frontend): [Netlify Link Here]
- 🧠 Backend ER Diagram: View Diagram
- ⚙️ Backend API: Repository & Docs
- 👥 Role-Based Dashboard: Tailored experiences for Users, Agents, and Admins.
- 💼 Wallet Management: View balance, add funds, withdraw, and transfer money.
- 📊 Transaction History: Interactive charts and data tables for all financial activities.
- 🎨 Modern UI: Built with shadcn/ui (Radix + Tailwind CSS) for a beautiful, accessible experience.
- 🎭 Smooth Animations: Powered by Framer Motion for engaging user interactions.
- 🌓 Dark/Light Mode: Full theme support using
next-themes. - 🔒 State Management: Robust state handling with Redux Toolkit.
- 📝 Form Management: Complex forms made easy with React Hook Form and Zod validation.
- 🍪 Authentication: JWT-based auth with secure cookie storage.
- ⚛️ Framework: React 19 + TypeScript
- 🚀 Build Tool: Vite
- 🎨 Styling: Tailwind CSS + shadcn/ui
- 🛡️ State Management: Redux Toolkit + React Redux
- 📊 Charts: Chart.js + React ChartJS 2
- 📝 Forms: React Hook Form + Zod Validation
- 🔄 Routing: React Router DOM
- ⌨️ UI Primitives: Radix UI Components
- ✨ Animations: Framer Motion
- 🌓 Theming: next-themes
- 📢 Notifications: Sonner (Toasts)
- 🛠️ Utilities:
clsx,tailwind-merge,class-variance-authority,lucide-reacticons
- Node.js (v18 or higher)
- npm or yarn or pnpm
- The Backend API should be running.
-
Clone the repository
git clone https://github.com/your-username/digital-wallet-frontend.git cd digital-wallet-frontend -
Install dependencies
npm install # or yarn install # or pnpm install
-
Environment Variables Create a
.envfile in the root directory based on.env.exampleand configure your backend API URL:VITE_API_BASE_URL=http://localhost:5000/api
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser and navigate to
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Starts the development server on http://localhost:5173 |
npm run build |
Builds the app for production to the dist folder |
npm run preview |
Previews the production build locally |
npm run lint |
Runs ESLint to analyze code for potential errors |
npm run tailwind:init |
Initializes Tailwind CSS configuration (if not already set up) |
This frontend is designed to work seamlessly with the corresponding backend API. Key integrated endpoints include:
- Auth: Login, Logout, Session Management
- User: Registration (via Admin), Profile Management, View Users/Agents
- Wallet: Check Balance, Add Funds (Agent), Withdraw, Transfer
- Transactions: View Personal and System-wide Transaction History
- Commissions: View Earnings (Agent) and Reports (Admin)
Ensure the backend is running and the VITE_API_BASE_URL environment variable is correctly set.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui for the excellent component library.
- Vite for the fast build tooling.
- The creators of all the amazing open-source libraries used in this project.