KeySafe

KeySafe is a Next.js app for managing API keys in a password-manager style interface.

Current implementation includes:

• A login screen with mock sign-in flow
• A dashboard for browsing, searching, revealing, copying, creating, and deleting API keys
• A usage guide that shows environment variable names and code examples (cURL, Node.js, Python)

Tech Stack

• Next.js 15 (App Router)
• React 18 + TypeScript
• Tailwind CSS + Radix UI/shadcn-style components
• Genkit configured with Google AI plugin

Project Structure

• src/app/login/page.tsx: Login page (currently mock auth)
• src/app/dashboard/page.tsx: Main API key management screen
• src/app/dashboard/usage/page.tsx: Environment variable and usage examples
• src/app/dashboard/layout.tsx: Sidebar layout for dashboard routes
• src/components/api-key-table.tsx: Core key table UI and interactions
• src/lib/data.ts: Seed/mock API key data
• src/ai/genkit.ts: Genkit initialization

App Behavior Notes

• The root route (/) redirects to /login.
• Authentication is currently mocked on the client and redirects to /dashboard.
• API key data is in-memory client state seeded from src/lib/data.ts.
• Create/delete changes are not persisted to a backend yet.

Architecture

flowchart TD
	A[User Browser] --> B[/]
	B -->|redirect| C[/login]
	C -->|mock sign in| D[/dashboard]
	D --> E[ApiKeyTable]
	E --> F[src/lib/data.ts seed data]
	E --> G[Client state in memory]
	D --> H[/dashboard/usage]
	H --> I[UsagePage]
	I --> F
	J[src/app/layout.tsx] --> C
	J --> D
	K[src/app/dashboard/layout.tsx] --> D
	K --> H

Loading

Runtime Flow

• src/app/page.tsx redirects users to the login page.
• src/app/login/page.tsx handles form submit and routes to dashboard.
• src/app/dashboard/layout.tsx provides the shared sidebar shell for dashboard pages.
• src/components/api-key-table.tsx reads initial keys from src/lib/data.ts, then manages edits in client state.
• src/app/dashboard/usage/page.tsx reads the same seeded keys and renders environment variable examples.

Getting Started

1. Install dependencies

npm install

2. Run the app locally

npm run dev

The app runs on http://localhost:9002.

Available Scripts

npm run dev          # Start Next.js dev server on port 9002
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run Next.js lint checks
npm run typecheck    # Run TypeScript checks
npm run genkit:dev   # Start Genkit development server
npm run genkit:watch # Start Genkit server in watch mode

Firebase App Hosting

This repository includes apphosting.yaml for Firebase App Hosting configuration.

To deploy, use the Firebase CLI from this project directory after authenticating:

firebase deploy

Adjust deployment commands/targets as needed for your Firebase project setup.

Status

This is currently a frontend-focused implementation with mock auth and local-only key state. For production use, connect:

• Real authentication (for example Firebase Auth)
• Secure server-side key storage and encryption
• Access controls and audit logging