Case Study
Around the US
A no-framework photo-sharing UI: add cards, like/unlike, preview full images, and edit profile — built with ES6 classes, semantic HTML, and BEM CSS.
The Problem
Ship an Instagram-style interface with clean architecture (no framework) that handles cards, modals, form validation, and API plumbing without getting spaghetti-ish.
Solution
- Modular architecture: small ES6 classes (`Card`, `FormValidator`, `Popup*`, `Section`, `UserInfo`) to isolate responsibilities.
- Typed-ish data flow via constructor params + method contracts instead of global state.
- Reusable modal primitives (`Popup`, `PopupWithImage`, `PopupWithForm`) so new dialogs are trivial.
- Accessible UI details: focus management in popups, keyboard ESC close, and visible focus rings.
- Client-side validation (`FormValidator`) with enable/disable submit, per-field errors, and clean CSS hooks.
- `Api.js` wrapper centralizes all requests, headers, and error handling.
Results
- Feature parity with a modern feed: add/delete cards, like/unlike, profile edit, image preview.
- Architecture stays readable: each component owns one thing; easy to extend with new popups or fields.
Next
- Form schemas per-popup to reduce boilerplate
- Lazy-load full-size images; use low-quality placeholders
- Bulk actions (multi-delete) and keyboard shortcuts