git readme and some changes

Author: SlyRix

README.md

@@ -1,198 +1,184 @@
-# Wedding Photo Gallery App
-
-A React-based web application that allows wedding guests to upload photos and participate in photo challenges. The app uses Google Drive for storage and features both general photo uploads and specific photo challenges.
-
-## Features
-
-- Multiple photo upload (up to 30 photos at once)
-- Photo challenges with progress tracking
-- Device and browser detection
-- Admin view for all photos
-- Progress bars for uploads
-- Mobile-friendly design
-- Local storage for challenge completion status
-- Google Drive integration for photo storage
+# Wedding Photo Sharing App
+
+A real-time photo sharing application designed for weddings and engagement celebrations, allowing guests to upload photos, participate in photo challenges, and interact through likes, comments, and voting.
+
+## 🌟 Features
+
+- **Photo Upload System**
+   - Direct photo uploads with progress tracking
+   - Support for multiple file selection
+   - File size and type validation
+   - Mobile-optimized upload experience
+   - Automatic device detection
+
+- **Challenge System**
+   - Pre-defined photo challenges for guests
+   - Private and public challenge options
+   - Real-time challenge leaderboards
+   - Voting system with one vote per challenge
+   - Challenge completion tracking
+
+- **Social Features**
+   - Like and comment on photos
+   - Photo voting in challenges
+   - Interactive leaderboards
+   - Real-time updates
+   - User engagement metrics
+
+- **Admin Dashboard**
+   - Comprehensive photo management
+   - User activity tracking
+   - Challenge monitoring
+   - Export functionality
+   - Analytics and statistics
+
+- **User Experience**
+   - Responsive design for all devices
+   - Intuitive navigation
+   - Real-time progress indicators
+   - Toast notifications
+   - Image optimization
+
+## 🛠️ Technical Stack
+
+### Frontend
+- React
+- Tailwind CSS
+- Lucide Icons
+- Framer Motion
+- Recharts
+- ShadcnUI Components
 
-## Prerequisites
+### Backend
+- Node.js
+- Express
+- SQLite
+- Multer
+- CORS
 
-Before you begin, ensure you have installed:
-- [Node.js](https://nodejs.org/) (version 14 or higher)
-- npm (comes with Node.js)
+## 🚀 Getting Started
 
-You'll also need:
-- A Google Cloud Console account
-- Google Drive API enabled
-- OAuth 2.0 Client ID and API Key
+### Prerequisites
+- Node.js (v14 or higher)
+- npm or yarn
 
-## Setup
+### Installation
 
-1. Clone the repository:
+1. Clone the repository
 ```bash
-git clone <your-repository-url>
-cd wedding-photo-app
+git clone https://github.com/yourusername/wedding-photo-app.git
 ```
 
-2. Install dependencies:
+2. Install frontend dependencies
 ```bash
+cd wedding-photo-app
 npm install
 ```
 
-3. Create your Google Cloud Console project:
-    - Go to [Google Cloud Console](https://console.cloud.google.com)
-    - Create a new project
-    - Enable the Google Drive API
-    - Create OAuth 2.0 credentials
-    - Add authorized JavaScript origins:
-      ```
-      http://localhost:5173
-      http://localhost
-      ```
-
-4. Update the constants in `App.jsx`:
-```javascript
-const GOOGLE_CLIENT_ID = 'YOUR_CLIENT_ID';
-const API_KEY = 'YOUR_API_KEY';
-const ADMIN_PASSWORD = 'your-chosen-password';
-```
-
-5. Run the development server:
+3. Install backend dependencies
 ```bash
-npm run dev
+cd server
+npm install
 ```
 
-The app should now be running at `http://localhost:5173`
-
-## Development
-
-To start the development server:
+4. Create environment variables
 ```bash
-npm run dev
+cp .env.example .env
 ```
 
-To build for production:
+5. Start the development server
 ```bash
-npm run build
-```
+# Start backend server
+cd server
+npm run dev
 
-To preview the production build:
-```bash
-npm run preview
+# Start frontend in a new terminal
+cd ../
+npm run dev
 ```
 
-## Project Structure
+## 📁 Project Structure
 
 ```
 wedding-photo-app/
 ├── src/
-│   ├── App.jsx         # Main application component
-│   ├── main.jsx        # Entry point
-│   └── index.css       # Global styles
-├── public/             # Static assets
-├── index.html          # HTML template
-├── vite.config.js      # Vite configuration
-├── package.json        # Project dependencies
-└── README.md          # This file
+│   ├── components/
+│   │   ├── AdminDashboard.jsx
+│   │   ├── AdminView.jsx
+│   │   ├── ChallengeInteractions.jsx
+│   │   ├── ChallengeLeaderboard.jsx
+│   │   ├── EnhancedAdminGallery.jsx
+│   │   ├── OptimizedImage.jsx
+│   │   ├── PhotoUploader.jsx
+│   │   ├── SocialFeatures.jsx
+│   │   └── VotingSystem.jsx
+│   ├── App.jsx
+│   └── main.jsx
+├── server/
+│   └── server.js
+└── public/
 ```
 
-## Configuration Files
-
-### vite.config.js
-```javascript
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    host: '0.0.0.0',
-    port: 5173,
-    strictPort: true,
-    hmr: {
-      host: '0.0.0.0',
-      port: 5173
-    },
-    watch: {
-      usePolling: true
-    }
-  }
-})
-```
+## 🔑 Key Features Explained
 
-## Dependencies
+### Photo Upload System
+- Supports both single and multiple photo uploads
+- Handles file validation and size restrictions
+- Progress tracking for uploads
+- Device-specific optimizations
 
-- React
-- Vite
-- Tailwind CSS
-- Google Drive API
-- lucide-react (for icons)
+### Challenge System
+- Configurable photo challenges
+- Private challenges for sensitive content
+- Public challenges with voting and leaderboards
+- Real-time challenge status updates
+
+### Admin Features
+- Complete photo management
+- User activity monitoring
+- Challenge administration
+- Data export capabilities
+- Analytics dashboard
 
-## Features in Detail
+## 🔒 Security Features
 
-### Photo Upload
-- Multiple file selection
-- Progress tracking
 - File type validation
-- Size limits (10MB per file)
-- Automatic Google Drive folder creation
-
-### Photo Challenges
-- Predefined photo challenges
-- Progress tracking
-- Completion status saved locally
-- Visual feedback for completed challenges
-
-### Admin View
-- Password protected
-- Access to all uploaded photos
-- Device information display
-- Upload metadata
-
-## Usage
-
-1. Enter your name to login
-2. Choose between general upload or photo challenges
-3. For general upload:
-    - Select up to 30 photos
-    - View upload progress
-    - Remove selected files if needed
-4. For challenges:
-    - Select a challenge
-    - Upload a photo
-    - Track completion status
-5. Admin access:
-    - Click "Admin Access"
-    - Enter password
-    - View all uploaded photos
-
-## Troubleshooting
-
-If you encounter issues:
-1. Check browser console for errors
-2. Verify Google Cloud Console credentials
-3. Ensure all required APIs are enabled
-4. Clear browser cache and cookies
-5. Check file sizes and types
-
-## Contributing
+- Size restrictions
+- CORS configuration
+- Rate limiting
+- Admin authentication
+- Private challenge protection
+
+## 📱 Mobile Support
+
+The application is fully responsive and optimized for mobile devices with:
+- Touch-friendly interfaces
+- Optimized upload experience
+- Mobile-first design
+- Device-specific features
+- Progressive loading
+
+## 🤝 Contributing
 
 1. Fork the repository
-2. Create your feature branch
-3. Commit your changes
-4. Push to the branch
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
 5. Open a Pull Request
 
-## License
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
 
-This project is licensed under the MIT License - see the LICENSE file for details
+## 👥 Authors
 
-## Acknowledgments
+- SlyRix - *Initial work* - [SlyRix](https://github.com/SlyRix/wedapp)
 
-- Thanks to the React team
-- Google Drive API documentation
-- Tailwind CSS team
-- Vite team
+## 🙏 Acknowledgments
 
-## Contact
+- [React](https://reactjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Lucide Icons](https://lucide.dev/)
+- [ShadcnUI](https://ui.shadcn.com/)
+- All contributors who have helped shape this project
 
-Your Name - your.email@example.com
-Project Link: [https://github.com/yourusername/wedding-photo-app](https://github.com/yourusername/wedding-photo-app)

index.html

@@ -2,6 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta property="og:title" content="Rushel & Sivanis Engagements Photos" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://rs-engagement-photos.slyrix.com/" />
+    <meta property="og:image" content="/LOGO_QUALI.png" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Engagement Photo App</title>