https://github.com/fameoz-1/se_project_spots-aa
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.
https://github.com/fameoz-1/se_project_spots-aa
bem-methodology figma html-css-javascript image-sharing responsive-web-design social-media webdevelopment
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/fameoz-1/se_project_spots-aa
- Owner: FameOz-1
- Created: 2025-03-22T20:58:59.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-08T03:52:21.000Z (11 months ago)
- Last Synced: 2025-07-08T06:23:31.501Z (11 months ago)
- Topics: bem-methodology, figma, html-css-javascript, image-sharing, responsive-web-design, social-media, webdevelopment
- Language: JavaScript
- Homepage: https://fameoz-1.github.io/se_project_spots-aa/
- Size: 6.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SPOTS: App – Sprint 9
**By: Austin G. Abbott**
An 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.
🎥 [Video Overview of Spots](https://www.loom.com/share/4756a4c486f5479fa37e97b66b8737bf?sid=01bce196-b1d4-49b0-822d-561ff3ccd0fdgit)
---
## 🚀 Features
### Core Functionality
- **Responsive Design**: Seamless experience across mobile, tablet, and desktop.
- **Profile Editing**: Update name, description, and avatar image.
- **Photo Sharing**: Add, preview, and delete photo cards with captions.
- **Like System**: Toggle likes on photos with persistent state.
- **Modal Interactions**: Smooth modal transitions for editing and previewing.
### Advanced UX Enhancements
- **Avatar Upload**: Users can change their profile picture.
- **Escape Key & Overlay Dismissal**: Close modals intuitively.
- **Real-Time Form Validation**: Inline feedback and error handling.
- **Loading States**: Buttons show “Saving...” during API calls.
- **Dynamic Card Generation**: Cards built from API data using templates.
- **Validation Reset**: Clears errors when modals reopen.
- **Interactive Buttons**: Hover effects and disabled states for invalid inputs.
---
## 🛠️ Technologies Used
- **HTML5**: Semantic and accessible markup.
- **CSS3**: Responsive design with Flexbox and Grid layout.
- **JavaScript (ES6)**: Dynamic DOM manipulation and event handling.
- **BEM Methodology**: Organized and maintainable CSS structure.
- **Responsive Design**: Optimized for mobile, tablet, and desktop devices.
- **Media Queries**: Ensures a consistent user experience across devices.
- **Figma**: Used for design and prototyping.
- TO-DO: add Webpack, Node.js and gh-pages to technologies and techniques section.
---
## Project Links
- [Link to the project design on Figma](https://www.figma.com/file/BBNm2bC3lj8QQMHlnqRsga/Sprint-3-Project-%E2%80%94-Spots?type=design&node-id=2%3A60&mode=design&t=afgNFybdorZO6cQo-1)
- [Link to the project on GitHub Pages](https://fameoz-1.github.io/se_project_spots-aa/)
---
## Plans for Finalizing the Project
- **Save User Photo Likes**: Implement functionality to persist user likes across sessions.
- **Profile Image Upload**: Add the ability for users to upload and change their profile picture.
- **User Authentication**: Introduce user accounts with login and registration functionality.
- **Enhanced Mobile Responsiveness**: Further optimize the design for smaller screens.
---
## 📁 Updated Directory Structure
project-root/
├── src/
│ ├── blocks/
│ │ ├── card/
│ │ ├── modal/
│ │ ├── profile/
│ │ └── page/
│ ├── images/
│ ├── pages/
│ ├── scripts/
│ └── styles/
├── index.html
├── README.md
└── favicon.ico
## How to Clone and Run the Project Locally
1. Clone the repository:
```bash
- git clone https://github.com/fameoz-1/t10_p3_spots-app.git
```
2. Navigate to the project directory:
- cd se_project_spots-aa
3. Open index.html in your browser to view the Project
## Acknowledgments
- **TripleTen**: For curriculum and design inspiration.
- **MDN Web Docs**: For development references.
- **Figma**: For design tools and prototyping.