Overview

Spots is a modern, responsive social media platform for sharing and discovering photos of interesting locations. It offers users a clean interface and seamless experience across devices, combining ES6+ JavaScript, modular OOP design, and best practices in UI/UX development. Users can create a personal profile, upload and like photos, and explore a gallery that updates dynamically with API integration.

Key Features

• Responsive Design: Adapts smoothly to desktop, tablet, and mobile screens using CSS Grid, Flexbox, and media queries.
• User Profile Section: Each user can view and edit personal information, including their display name and bio.
• Profile Image Editing: Simple modal interface for uploading or updating profile pictures, enhancing user identity.
• Photo Gallery with Likes: Photos appear in stylish cards with a like button for user engagement.
• Form Validations: All user input is validated in real time, with custom error messages and clear feedback.
• API Integration: Fetches and submits user and photo data using RESTful endpoints for a live, interactive feel.
• Modular OOP Architecture: Built with ES6 classes for clean, maintainable, and reusable code.
• BEM Methodology: CSS follows Block-Element-Modifier conventions for clarity and scalability.

Technologies Used

• HTML5: Semantic markup supports accessibility and SEO.
• CSS3: Layouts built with Flexbox, CSS Grid, and responsive media queries.
• JavaScript (ES6+): Modern, modular code using classes and advanced JS features.
• OOP: Object-Oriented Programming improves structure and scalability.
• RESTful API: Communication with backend services for data management.
• Form Validation: Inline, user-friendly validation enhances UX.
• BEM CSS: Systematic approach for organized styles.
• Git & GitHub: Version control and remote collaboration.

Challenges and Learnings

• Scalable CSS Structure: Implementing BEM and modular SCSS/CSS for maintainable styles.
• OOP in Frontend: Adopting ES6 classes across components to improve scalability.
• UX Refinement: Ensured smooth modals, validations, and photo interactions through user testing and iteration.
• API Error Handling: Managed various response states for resilience and clear user feedback.
• Responsive Layouts: Tuned grid/flex layouts for consistent, attractive look at any device resolution.

Outcome

• Delivered a fully responsive, feature-rich social media web app.
• Users can edit their profile, interact with others' photos, and enjoy a seamless viewing and editing experience.
• The application codebase is clean, maintainable, and ready for further enhancements.
• Domain: https://kedycatsudo.github.io/se_project_spots/
• Github Repo: https://github.com/kedycatsudo/se_project_spots

Deployment & Next Steps

• Future ideas: add comments, improved search/filter for spots, backend authentication, and richer social sharing features.

This MDX entry documents the Spots project, showcasing the technical and user experience foundations of a robust photo-sharing platform.