Lockr Frontend

React + Vite + TypeScript frontend for the Lockr secret sharing application.

Tech Stack

• React 18 - UI library
• Vite - Build tool and dev server
• TypeScript - Type safety
• Tailwind CSS - Styling
• React Router - Client-side routing
• Axios - HTTP client
• react-hot-toast - Toast notifications
• lucide-react - Icons

Setup

Prerequisites

• Node.js 20 (use nvm use 20)
• Backend server running on port 4000

Installation

1. Install dependencies:

   npm install

2. Create environment file:

   cp .env.example .env

3. Configure .env:

   VITE_API_BASE_URL=http://localhost:4000

Running

Development:

npm run dev

Runs on http://localhost:5173

Production build:

npm run build
npm run preview

Project Structure

frontend/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── Layout.tsx
│   ├── lib/             # Utilities and API client
│   │   ├── api.ts       # Axios instance
│   │   └── secrets.ts   # API functions
│   ├── pages/           # Route pages
│   │   ├── CreateSecret.tsx
│   │   ├── Success.tsx
│   │   ├── ViewSecret.tsx
│   │   └── Burned.tsx
│   ├── types/           # TypeScript types
│   │   └── index.ts
│   ├── App.tsx          # Router setup
│   ├── main.tsx         # Entry point
│   └── index.css        # Global styles
├── public/              # Static assets
├── index.html           # HTML template
├── vite.config.ts       # Vite configuration
├── tailwind.config.js   # Tailwind configuration
└── package.json

Routes

Route	Component	Description
/	CreateSecret	Create a new secret with expiry and view limit
/success	Success	Display shareable link after creation
/s/:token	ViewSecret	View and decrypt a secret (one-time)
/burned	Burned	Shown when secret is expired/burned

Features

Create Secret Page (/)

• Textarea for secret input (1-10,000 characters)
• Expiry dropdown: 5 mins, 30 mins, 1 hour, No expiry
• Max views input (1-100, default 1)
• Form validation
• Loading states
• Toast notifications

Success Page (/success)

• Display shareable link
• Copy to clipboard button
• Secret metadata (expiry, max views)
• Warning about one-time use
• Create another secret button
• Test link button

View Secret Page (/s/:token)

• Automatic secret retrieval on mount
• Display decrypted secret
• Copy secret button
• Warning about remaining views
• Handles 404 (redirects to /burned)
• Network error handling with retry

Burned Page (/burned)

• Informative message about burned/expired secrets
• Explanation of why secret might be unavailable
• Create new secret button

Components

Layout

• Header with logo and navigation
• Consistent page structure
• Footer with security info

Button

• Multiple variants: primary, secondary, outline
• Loading state with spinner
• Disabled state
• Full width option

Card

• Clean white card with shadow
• Consistent padding and borders

API Integration

Axios Instance (src/lib/api.ts)

• Base URL from environment variable
• Request/response interceptors
• Error logging

API Functions (src/lib/secrets.ts)

• createSecret(data) - POST /api/secrets
• getSecret(token) - GET /api/secrets/:token

Styling

Tailwind CSS

• Custom color palette (primary blue)
• Responsive design
• Utility-first approach
• Custom components

Design System

• Clean, minimal interface
• Gradient backgrounds
• Card-based layouts
• Consistent spacing and typography
• Accessible focus states

Error Handling

• Validation errors - Display Zod error messages
• 404 errors - Redirect to /burned page
• Network errors - Show retry option with toast
• Generic errors - User-friendly error messages

UX Features

• ✅ Disabled submit while loading
• ✅ Form validation with helpful messages
• ✅ Toast notifications for all actions
• ✅ Copy to clipboard with visual feedback
• ✅ Loading spinners
• ✅ Responsive design
• ✅ Keyboard accessible
• ✅ Clear call-to-actions

Environment Variables

Variable	Description	Default
VITE_API_BASE_URL	Backend API URL	http://localhost:4000

Development Tips

1. Hot Reload: Vite provides instant hot module replacement
2. TypeScript: Use strict mode for better type safety
3. Tailwind: Use the Tailwind CSS IntelliSense extension
4. Icons: Browse lucide-react icons at https://lucide.dev

Building for Production

# Build
npm run build

# Preview build locally
npm run preview

Build output goes to dist/ directory.

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• ES2020+ features
• CSS Grid and Flexbox

License

MIT