SecureVault Frontend

React + TypeScript password manager interface with client-side encryption.

Why this project

• Individuals and small teams want a password manager that keeps their credentials under their own control (no reliance on third‑party cloud services).
• Existing open‑source managers (Bitwarden, KeePass) either require a desktop client or a separate server component that many users find hard to set up and keep secure.
• Users also want a modern, responsive web UI that works on desktop and mobile without installing.

Tech Stack

• Framework: React 18
• Language: TypeScript 5.x
• Build Tool: Vite 5.x
• Styling: Tailwind CSS 3.x
• HTTP Client: Axios
• Testing: Vitest + React Testing Library
• Routing: React Router 6.x

Installation

Prerequisites

# Node.js 18+
node --version  # Should be >= 18

Setup

# Clone Repository
git clone https://github.com/sumanjangili/password-manager.git
cd password-manager
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

Configuration

Environment Variables

# Create .env.development:
VITE_API_BASE_URL=http://localhost:8080/api

# Create .env.production:
VITE_API_BASE_URL=https://api.yourdomain.com/api

Available Variables | Variable | Description | Default | | -------- | ----------- | ------- | | VITE_API_BASE_URL | Backend API endpoint | http://localhost:8080/api | | NODE_ENV | Environment (auto-set) | development |

Scripts

# Development
npm run dev              # Start dev server (port 5173)

# Production
npm run build            # Build for production
npm run preview          # Preview production build

# Testing
npm run test             # Run tests
npm run test:coverage    # Run tests with coverage

# Linting
npm run lint             # ESLint check
npm run lint:fix         # Auto-fix lint issues

# Type checking
npm run type-check       # TypeScript check

Project Structure

src/
├── components/          # Reusable components
│   ├── TotpLogin.tsx    # 2FA login component
│   ├── TotpSetup.tsx    # 2FA setup component
│   └── PasswordGenerator.tsx
├── contexts/            # React contexts
│   └── VaultContext.tsx # Global vault state
├── lib/                 # Utilities
│   ├── api.ts           # Axios instance
│   └── crypto.ts        # Encryption functions
├── pages/               # Route pages
│   ├── Login.tsx        # Login page
│   └── Dashboard.tsx    # Main dashboard
├── App.tsx              # Root component
└── main.tsx             # Entry point