Podlet Web App

A modern React.js web application for podcast management, built with Vite, TypeScript, and Clerk authentication.

🚀 Quick Start

Option 1: Automated Setup

./setup-web.sh

Option 2: Manual Setup

# 1. Install dependencies
npm install

# 2. Create environment file
cp env.example .env

# 3. Edit .env with your credentials
# 4. Start development server
npm run dev

🔧 Environment Setup

Create a .env file in the project root:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id
VITE_NEWS_API_KEY=your_news_api_key

📁 Project Structure

src/
├── components/          # Reusable UI components
│   └── LoadingSpinner.tsx
├── hooks/              # Custom React hooks
│   └── useGoogleAuth.ts
├── lib/                # Utilities and configurations
│   └── firebase.ts
├── pages/              # Page components
│   ├── HomePage.tsx
│   ├── LoginPage.tsx
│   ├── ProfilePage.tsx
│   └── SignUpPage.tsx
├── App.tsx             # Main app component with routing
├── main.tsx            # Application entry point
└── index.css           # Global styles

🛠️ Available Scripts

• npm run dev - Start development server (http://localhost:3000)
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🔐 Authentication Features

• Email/Password - Traditional login and signup
• Google OAuth - Social authentication
• Email Verification - Built-in verification flow
• Protected Routes - Automatic redirects based on auth state
• User Management - Profile management and account settings

🎨 UI/UX Features

• Responsive Design - Works on desktop and mobile
• Modern UI - Clean, professional interface
• Loading States - Proper loading indicators
• Form Validation - Client-side validation with error handling
• Navigation - Intuitive routing between pages

🏗️ Technology Stack

• React 18 - UI library with hooks
• TypeScript - Type safety and better DX
• Vite - Fast build tool and dev server
• React Router - Client-side routing
• Clerk - Authentication and user management
• Firebase - Database and backend services
• CSS3 - Modern styling with custom properties

🔧 Configuration

Clerk Setup

1. Create a Clerk account at clerk.com
2. Create a new application
3. Copy the publishable key to your .env file
4. Configure OAuth providers in the Clerk dashboard

Firebase Setup

1. Create a Firebase project at console.firebase.google.com
2. Enable Firestore database
3. Copy the config values to your .env file
4. Set up Firestore security rules

🚀 Deployment

Vercel (Recommended)

npm run build
# Deploy the dist folder to Vercel

Netlify

npm run build
# Deploy the dist folder to Netlify

Other Platforms

The app builds to a static dist folder that can be deployed to any static hosting service.

🐛 Troubleshooting

Common Issues

1. Environment Variables Not Loading

   • Ensure all variables start with VITE_
   • Restart the dev server after changing .env

2. Google OAuth Not Working

   • Check Clerk dashboard OAuth settings
   • Verify redirect URLs are configured

3. Firebase Connection Issues

   • Verify Firebase config values
   • Check Firestore security rules

4. Build Errors

   • Run npm run lint to check for code issues
   • Ensure all dependencies are installed

📝 Development Notes

• The app uses React 18 with functional components and hooks
• TypeScript is configured for strict type checking
• ESLint is set up for code quality
• CSS uses modern features like custom properties and flexbox
• All components are fully typed with TypeScript interfaces

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

📄 License

This project is private and proprietary.