se_project_spots-aa

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

---

🚀 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
• Link to the project on GitHub Pages

---

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:

- git clone https://github.com/fameoz-1/t10_p3_spots-app.git

1. Navigate to the project directory:

• cd se_project_spots-aa

1. 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.