{"id":28054101,"url":"https://github.com/fameoz-1/se_project_spots-aa","last_synced_at":"2026-05-08T15:05:07.201Z","repository":{"id":285633179,"uuid":"953219622","full_name":"FameOz-1/se_project_spots-aa","owner":"FameOz-1","description":"An interactive social media web application that allows users to create a personal profile and share photos. Users can add and remove photos, like photos from other users, and make minor adjustments to their profile.","archived":false,"fork":false,"pushed_at":"2025-07-08T03:52:21.000Z","size":6491,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-08T06:23:31.501Z","etag":null,"topics":["bem-methodology","figma","html-css-javascript","image-sharing","responsive-web-design","social-media","webdevelopment"],"latest_commit_sha":null,"homepage":"https://fameoz-1.github.io/se_project_spots-aa/","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/FameOz-1.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-03-22T20:58:59.000Z","updated_at":"2025-07-08T03:52:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"1259a364-614a-4221-84a7-130bf7894d43","html_url":"https://github.com/FameOz-1/se_project_spots-aa","commit_stats":null,"previous_names":["fameoz-1/t10_p3_spots-app"],"tags_count":0,"template":false,"template_full_name":"tripleten-com/se_project_spots","purl":"pkg:github/FameOz-1/se_project_spots-aa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FameOz-1%2Fse_project_spots-aa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FameOz-1%2Fse_project_spots-aa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FameOz-1%2Fse_project_spots-aa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FameOz-1%2Fse_project_spots-aa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FameOz-1","download_url":"https://codeload.github.com/FameOz-1/se_project_spots-aa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FameOz-1%2Fse_project_spots-aa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265518587,"owners_count":23780986,"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":["bem-methodology","figma","html-css-javascript","image-sharing","responsive-web-design","social-media","webdevelopment"],"created_at":"2025-05-12T04:35:03.733Z","updated_at":"2026-05-08T15:05:07.187Z","avatar_url":"https://github.com/FameOz-1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SPOTS: App – Sprint 9\n\n**By: Austin G. Abbott**\n\nAn interactive social media web application that allows users to create a personal profile, share photos, and engage with others through likes and comments. Built with responsive design principles and enhanced with modern JavaScript, Webpack bundling, and real-time form validation.\n\n🎥 [Video Overview of Spots](https://www.loom.com/share/4756a4c486f5479fa37e97b66b8737bf?sid=01bce196-b1d4-49b0-822d-561ff3ccd0fdgit)\n\n---\n\n## 🚀 Features\n\n### Core Functionality\n\n- **Responsive Design**: Seamless experience across mobile, tablet, and desktop.\n- **Profile Editing**: Update name, description, and avatar image.\n- **Photo Sharing**: Add, preview, and delete photo cards with captions.\n- **Like System**: Toggle likes on photos with persistent state.\n- **Modal Interactions**: Smooth modal transitions for editing and previewing.\n\n### Advanced UX Enhancements\n\n- **Avatar Upload**: Users can change their profile picture.\n- **Escape Key \u0026 Overlay Dismissal**: Close modals intuitively.\n- **Real-Time Form Validation**: Inline feedback and error handling.\n- **Loading States**: Buttons show “Saving...” during API calls.\n- **Dynamic Card Generation**: Cards built from API data using templates.\n- **Validation Reset**: Clears errors when modals reopen.\n- **Interactive Buttons**: Hover effects and disabled states for invalid inputs.\n\n---\n\n## 🛠️ Technologies Used\n\n- **HTML5**: Semantic and accessible markup.\n- **CSS3**: Responsive design with Flexbox and Grid layout.\n- **JavaScript (ES6)**: Dynamic DOM manipulation and event handling.\n- **BEM Methodology**: Organized and maintainable CSS structure.\n- **Responsive Design**: Optimized for mobile, tablet, and desktop devices.\n- **Media Queries**: Ensures a consistent user experience across devices.\n- **Figma**: Used for design and prototyping.\n- TO-DO: add Webpack, Node.js and gh-pages to technologies and techniques section.\n\n---\n\n## Project Links\n\n- [Link to the project design on Figma](https://www.figma.com/file/BBNm2bC3lj8QQMHlnqRsga/Sprint-3-Project-%E2%80%94-Spots?type=design\u0026node-id=2%3A60\u0026mode=design\u0026t=afgNFybdorZO6cQo-1)\n- [Link to the project on GitHub Pages](https://fameoz-1.github.io/se_project_spots-aa/)\n\n---\n\n## Plans for Finalizing the Project\n\n- **Save User Photo Likes**: Implement functionality to persist user likes across sessions.\n- **Profile Image Upload**: Add the ability for users to upload and change their profile picture.\n- **User Authentication**: Introduce user accounts with login and registration functionality.\n- **Enhanced Mobile Responsiveness**: Further optimize the design for smaller screens.\n\n---\n\n## 📁 Updated Directory Structure\n\nproject-root/\n├── src/\n│ ├── blocks/\n│ │ ├── card/\n│ │ ├── modal/\n│ │ ├── profile/\n│ │ └── page/\n│ ├── images/\n│ ├── pages/\n│ ├── scripts/\n│ └── styles/\n├── index.html\n├── README.md\n└── favicon.ico\n\n## How to Clone and Run the Project Locally\n\n1. Clone the repository:\n\n```bash\n- git clone https://github.com/fameoz-1/t10_p3_spots-app.git\n```\n\n2. Navigate to the project directory:\n\n- cd se_project_spots-aa\n\n3. Open index.html in your browser to view the Project\n\n## Acknowledgments\n\n- **TripleTen**: For curriculum and design inspiration.\n- **MDN Web Docs**: For development references.\n- **Figma**: For design tools and prototyping.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffameoz-1%2Fse_project_spots-aa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffameoz-1%2Fse_project_spots-aa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffameoz-1%2Fse_project_spots-aa/lists"}