{"id":18519468,"url":"https://github.com/rajkumar-35/alteroffice-image-uploader-task","last_synced_at":"2026-05-01T23:39:46.787Z","repository":{"id":249356725,"uuid":"831287012","full_name":"RAJKUMAR-35/AlterOffice-Image-Uploader-Task","owner":"RAJKUMAR-35","description":"An image uploader with React.js and Node.js, offering drag-and-drop, image management, and robust error handling.","archived":false,"fork":false,"pushed_at":"2024-07-25T16:57:16.000Z","size":4091,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-01T23:39:46.132Z","etag":null,"topics":["api-integration","back-end-development","drag-and-drop","error-handling","file-upload","front-end-development","image-cropping-tool","image-management","image-uploader","nodejs","reactjs","typescript","web-application"],"latest_commit_sha":null,"homepage":"https://thealteroffice-image-uploader.vercel.app/","language":"TypeScript","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/RAJKUMAR-35.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}},"created_at":"2024-07-20T06:14:28.000Z","updated_at":"2024-07-25T16:57:20.000Z","dependencies_parsed_at":"2024-07-25T18:51:08.117Z","dependency_job_id":null,"html_url":"https://github.com/RAJKUMAR-35/AlterOffice-Image-Uploader-Task","commit_stats":null,"previous_names":["rajkumar-35/alteroffice-image-uploader-task"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RAJKUMAR-35/AlterOffice-Image-Uploader-Task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RAJKUMAR-35%2FAlterOffice-Image-Uploader-Task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RAJKUMAR-35%2FAlterOffice-Image-Uploader-Task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RAJKUMAR-35%2FAlterOffice-Image-Uploader-Task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RAJKUMAR-35%2FAlterOffice-Image-Uploader-Task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RAJKUMAR-35","download_url":"https://codeload.github.com/RAJKUMAR-35/AlterOffice-Image-Uploader-Task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RAJKUMAR-35%2FAlterOffice-Image-Uploader-Task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32517232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["api-integration","back-end-development","drag-and-drop","error-handling","file-upload","front-end-development","image-cropping-tool","image-management","image-uploader","nodejs","reactjs","typescript","web-application"],"created_at":"2024-11-06T17:16:29.217Z","updated_at":"2026-05-01T23:39:46.759Z","avatar_url":"https://github.com/RAJKUMAR-35.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Uploader Application\n\nA React.js and Node.js application for smooth image uploading, including drag-and-drop, image management, and robust error handling.\n\n![Preview Image](Front-End/src/Image/Project_Demo.png) \n\n**Figma Design:** \n```bash\nhttps://www.figma.com/design/tAekIi9QG7AVxP9NGxkNYb/image-uploader-figma?node-id=0-1\u0026t=mH62885eeSkaIzEr-1\n```\n**Demo Video:** \n```bash\nhttps://drive.google.com/file/d/1qi80iWpQLJv-E29Ii5FtRwYpso1J-QsK/view?usp=sharing\n```\n--- \n\n## Key Concepts\n\n- Image Uploads (Single/Multiple)\n- Drag-and-Drop\n- Image Management (Crop, Delete)\n- Progress/Error Handling\n- API Integration\n\n## Functional Requirements\n\n1. **Profile Picture Interface**: Display or update profile picture.\n2. **Image Upload Interface**: Drag-and-drop or select images, handle errors.\n3. **Progress/Error Handling**: Show upload progress, handle errors.\n4. **Image Management**: Crop, delete, and select profile picture.\n5. **Saving Preferences \u0026 Fetching Data**: API endpoints for image data.\n6. **Error States**: Manage data fetch errors.\n\n## How to use\n\n1. **Start the Backend Server**:\n   - Navigate to the `backend` directory and run `npm start` to start the Node.js server.\n\n2. **Run the Frontend Application**:\n   - Navigate to the `frontend` directory and run `npm start` to start the React application.\n\n3. **Upload Images**:\n   - Use the drag-and-drop area or file selector to upload images. \n   - Monitor upload progress and handle errors such as file size limits and unsupported formats.\n\n4. **Manage Uploaded Images**:\n   - Crop images to a 1:1 aspect ratio.\n   - Delete images as needed.\n   - Select one image as the profile picture and crop it if required.\n\n5. **Check Deployment**:\n   - Ensure that the frontend is correctly connected to the backend API endpoints.\n\n## Deployment\n\n1. **Frontend**:\n   - Deploy the React application on Vercel or Netlify.\n   - Update API URLs in the frontend to point to the deployed backend.\n\n2. **Backend**:\n   - Deploy the Node.js server.\n   - Ensure database connections and environment variables are correctly configured.\n\n## Conclusion\n\nThis project delivers a complete image uploader solution with React.js and Node.js, featuring drag-and-drop, image management, and robust error handling, demonstrating strong frontend and backend development skills.\n\n## Contact\n\nFor any inquiries or feedback, please contact:\n- **Email**: rajkumaranbu192@gmail.com\n- **LinkedIn**: [Rajkumar A](https://www.linkedin.com/in/rajkumar-cse/)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajkumar-35%2Falteroffice-image-uploader-task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajkumar-35%2Falteroffice-image-uploader-task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajkumar-35%2Falteroffice-image-uploader-task/lists"}