{"id":29403514,"url":"https://github.com/securecloudx/profile-upload-app","last_synced_at":"2026-05-19T02:04:56.469Z","repository":{"id":303441944,"uuid":"1015486819","full_name":"securecloudx/profile-upload-app","owner":"securecloudx","description":"profile-upload-app","archived":false,"fork":false,"pushed_at":"2025-07-07T17:27:57.000Z","size":271,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-07T17:33:37.162Z","etag":null,"topics":["azure","azure-storage","azure-storage-blob"],"latest_commit_sha":null,"homepage":"https://securecloudx.github.io/profile-upload-app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/securecloudx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-07T15:17:12.000Z","updated_at":"2025-07-07T17:26:44.000Z","dependencies_parsed_at":"2025-07-07T17:33:39.430Z","dependency_job_id":"b126f0d8-c39f-423b-acff-19eb3d7aeb3a","html_url":"https://github.com/securecloudx/profile-upload-app","commit_stats":null,"previous_names":["securecloudx/profile-upload-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/securecloudx/profile-upload-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securecloudx%2Fprofile-upload-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securecloudx%2Fprofile-upload-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securecloudx%2Fprofile-upload-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securecloudx%2Fprofile-upload-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/securecloudx","download_url":"https://codeload.github.com/securecloudx/profile-upload-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/securecloudx%2Fprofile-upload-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264637843,"owners_count":23642061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["azure","azure-storage","azure-storage-blob"],"created_at":"2025-07-10T19:00:30.495Z","updated_at":"2026-05-19T02:04:56.426Z","avatar_url":"https://github.com/securecloudx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Profile Upload App\n\nA modern React application for creating and managing user profiles with image upload functionality to Azure Blob Storage.\n\n## ✨ Features\n\n- **Profile Management**: Create and edit user profiles with name and bio\n- **Image Upload**: Upload and compress profile images with drag-and-drop support\n- **Azure Integration**: Seamless integration with Azure Blob Storage\n- **Progress Tracking**: Real-time upload progress with file size and duration display\n- **Image Compression**: Automatic image optimization with toggle control and size comparison\n- **Theme Switcher**: Dark/light theme toggle with persistent preferences\n- **Instant Preview**: Live preview of profile images with immediate feedback\n- **File Size Comparison**: Shows original vs compressed file sizes with savings percentage\n- **Data Persistence**: All profile data and preferences persist across browser reloads\n- **Drag \u0026 Drop**: Intuitive drag-and-drop image upload with visual feedback\n- **Responsive Design**: Modern UI built with Tailwind CSS and smooth animations\n- **Reset Functionality**: One-click profile reset with confirmation dialog\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React 19.1.0 with Hooks (useState, useEffect)\n- **Build Tool**: Vite 7.0.0 with Hot Module Replacement\n- **Styling**: Tailwind CSS 4.1.11 with dark/light theme support\n- **Image Processing**: browser-image-compression with web workers\n- **Local Storage**: Browser localStorage for data persistence\n- **Cloud Storage**: Azure Blob Storage with SAS token authentication\n- **Code Quality**: ESLint with modern JavaScript standards\n\n## 📋 Prerequisites\n\nBefore running this project, make sure you have:\n\n- Node.js (version 18 or higher)\n- npm or yarn package manager\n- Azure Storage Account with Blob Storage container\n- Valid Azure SAS (Shared Access Signature) token\n\n## 🚀 Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd profile-upload-app\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Configure Azure Storage**\n\n   Update the `sasContainerUrl` in `src/components/ProfileCard.jsx` with your Azure Blob Storage container URL and SAS token:\n\n   ```javascript\n   const sasContainerUrl = \"YOUR_AZURE_BLOB_STORAGE_URL_WITH_SAS_TOKEN\";\n   ```\n\n## 🏃‍♂️ Running the Application\n\n### Development Mode\n\n```bash\nnpm run dev\n```\n\nThe application will start on `http://localhost:5173`\nand you can view it in your browser.\n\n## 🎯 Key Components\n\n### ProfileCard Component\n\nThe main component that handles:\n\n- **Profile Data Management**: Name, bio, and image with localStorage persistence\n- **Image Upload \u0026 Processing**: Drag-and-drop upload with compression and instant preview\n- **File Size Analysis**: Original vs compressed size comparison with savings calculation\n- **Theme Management**: Dark/light theme toggle with user preference persistence\n- **Upload Progress**: Real-time progress tracking with file size and duration metrics\n- **Azure Blob Storage**: Direct upload integration with SAS token authentication\n- **State Management**: Smart state handling with automatic localStorage sync\n- **Error Handling**: Comprehensive validation and user-friendly error messages\n- **UI/UX Features**: Smooth animations, visual feedback, and responsive design\n\n**Key Interactions:**\n\n- **Edit Mode**: Click \"Edit Profile\" to enable form fields and image upload\n- **Image Upload**: Click pencil icon or drag-and-drop images for upload\n- **Theme Toggle**: Sun/moon icon to switch between dark and light themes\n- **Compression Toggle**: Package icon to enable/disable image compression\n- **Reset Profile**: Trash icon to clear all data with confirmation dialog\n- **Instant Feedback**: Real-time preview and immediate visual responses\n\n## ⚙️ Configuration\n\n### Data Persistence\n\nThe app automatically saves and restores:\n\n- **Profile Information**: Name, bio, and profile image URL\n- **User Preferences**: Theme (dark/light) and compression settings\n- **Upload Statistics**: File sizes, compression savings, and upload duration\n- **Success Messages**: Recent upload confirmations (expire after 5 minutes)\n\nAll data is stored in browser localStorage and automatically loaded on page refresh.\n\n### Azure Blob Storage Setup\n\n1. Create an Azure Storage Account\n2. Create a Blob container\n3. Generate a SAS token with the following permissions:\n\n   - **Permissions**: Create, Write\n   - **Allowed protocols**: HTTPS only\n   - **Expiry time**: Set according to your needs\n\n4. Update the `sasContainerUrl` in the ProfileCard component\n\n### Image Compression Settings\n\nThe app includes a compression toggle with these default settings:\n\n- **When Enabled**: Maximum file size: 1MB, Maximum dimensions: 600px\n- **When Disabled**: Original file size preserved\n- **Performance**: Uses web workers for non-blocking compression\n- **Feedback**: Shows original vs compressed size comparison with savings percentage\n\n### Theme Configuration\n\n- **Default Theme**: Dark mode\n- **Toggle Control**: Sun/moon icon in settings panel\n- **Persistence**: Theme preference saved in localStorage\n- **Smooth Transitions**: 300ms duration for all theme changes\n\n## 🔧 Customization\n\n### User Interface\n\nThe app features a modern, responsive design with:\n\n- **Theme System**: Dark and light themes with user toggle\n- **Settings Panel**: Theme, compression, and reset controls\n- **Progress Indicators**: Animated upload progress with percentage and file info\n- **Visual Feedback**: Drag-and-drop zones, hover effects, and state transitions\n- **Error Handling**: Inline validation messages and user-friendly error states\n\n### Upload Behavior\n\nCustomize the upload experience by modifying settings in `ProfileCard.jsx`:\n\n```javascript\n// Image compression options\nconst options = {\n  maxSizeMB: 1, // Maximum file size in MB\n  maxWidthOrHeight: 600, // Maximum dimension in pixels\n  useWebWorker: true, // Use web workers for compression\n};\n\n// File validation\nconst maxSizeMB = 2; // Maximum upload size before compression\nconst validTypes = [\"image/jpeg\", \"image/png\"]; // Allowed file types\n```\n\n### Data Persistence\n\nControl what data persists by modifying the localStorage keys:\n\n```javascript\n// Profile data keys\nconst profileKeys = [\n  \"profileName\", \"profileBio\", \"profilePreview\", \"profileUploadUrl\",\n  \"profileDarkTheme\", \"profileCompressionEnabled\", \"profileUploadDuration\",\n  \"profileOriginalSize\", \"profileCompressedSize\", \"profileSuccessMessage\"\n];\n```\n\n### Styling\n\nThe app uses Tailwind CSS for styling. You can customize the appearance by:\n\n- Modifying component classes for colors, spacing, and animations\n- Extending the Tailwind configuration for custom design tokens\n- Adjusting theme-specific color schemes in the component conditionals\n\n## 🚨 Important Security Notes\n\n- **SAS Token Expiry**: The current SAS token in the code will expire on July 7, 2025. Make sure to update it before expiry.\n- **Environment Variables**: Consider moving sensitive configuration like Azure URLs to environment variables for production use.\n- **CORS Configuration**: Ensure your Azure Storage account has proper CORS settings configured.\n\n## 🛡️ Error Handling\n\nThe application includes comprehensive error handling for:\n\n- **Image Validation**: File type and size validation with clear error messages\n- **Compression Failures**: Graceful fallback when image compression fails\n- **Upload Errors**: Network and server error handling with retry suggestions\n- **Form Validation**: Real-time validation for required fields\n- **localStorage Issues**: Fallback to default values when storage fails\n- **Browser Compatibility**: Graceful degradation for unsupported features\n\n## 🎮 User Experience Features\n\n### Drag \u0026 Drop\n\n- Visual feedback when dragging files over the upload area\n- Prevents browser default file opening behavior\n- Works only in edit mode for better UX\n\n### File Size Intelligence\n\n- Shows original file size before compression\n- Displays compressed file size after processing\n- Calculates and shows savings in KB and percentage\n- Adapts display based on compression settings\n\n### Persistent State\n\n- All form data survives page refreshes\n- Theme and compression preferences remembered\n- Recent upload success messages persist (5-minute expiry)\n- One-click reset to clear all stored data\n\n### Progress Tracking\n\n- Real-time upload progress bar with animation\n- File size display during upload\n- Upload duration tracking and display\n- Success confirmation with detailed statistics\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n---\n\nIf you find this project interesting, consider giving it a star⭐\n\nMade with ❤️ using React, Azure, and modern web technologies\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecurecloudx%2Fprofile-upload-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsecurecloudx%2Fprofile-upload-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecurecloudx%2Fprofile-upload-app/lists"}