Skip to content
← Back to projects
Cover
Case study

SPA front-end UI (Poch'Lib)

SPA front-end UI (Poch'Lib)

Development of the Poch'Lib SPA frontend interface, a book management library in HTML/CSS/JS.

Context

Great'App, a 20-person Nice-based startup, tasked its CTO Marie with delivering Poch'Lib — a book management SPA commissioned by bookshop 'La plume enchantée'. Mission: build the entire frontend from scratch, matching UX designer Charlotte's wireframes exactly, with flawless responsive rendering across 3 formats (mobile, tablet, desktop), using no JavaScript framework.

Problem Scope

  • No existing codebase — entire project to be built from scratch
  • UX designer wireframes to be followed precisely
  • Multi-format display required: mobile, tablet, and desktop
  • External API consumption for book search via Fetch API
  • SPA constraint: no page reloads allowed
  • Installation README to be delivered to the end client

Solution & Deliverables

  • Book search via the Google Books API (Fetch) and add to a personal list ("Poch'List")
  • List persisted across views via sessionStorage — no loss on navigation, cleared when the tab closes
  • Dynamic book removal with real-time DOM updates (solid/empty Font Awesome bookmark icons reflecting state)
  • Code organized into 3 ES6 modules (application.js, search.js, util.js) with import/export — zero framework dependency
  • Mobile-first responsive with media queries for 3 breakpoints
  • Semantic HTML5 aligned with Charlotte's UX wireframes
  • Structured SASS (variables, mixins, nesting) — DRY approach validated by jury
  • Installation README delivered to end client

Stack & Technologies

  • Semantic HTML5 — interface structure
  • SASS — CSS preprocessor (variables, mixins, DRY)
  • JavaScript ES6 (modules) — SPA logic split across 3 files, DOM manipulation
  • Google Books API — book search via Fetch
  • sessionStorage — client-side persistence of the book list
  • Font Awesome — bookmark and delete icons
  • Media queries — 3-breakpoint responsive (mobile, tablet, desktop)
  • Git — versioning and delivery

Project Timeline

  1. 1
    Wireframe analysis
    Review of Charlotte's mockups, breakdown into HTML/CSS components
  2. 2
    HTML/SASS integration
    Semantic structure, mobile-first styles, SASS variables and mixins setup
  3. 3
    JavaScript logic
    Fetch API integration, book add/remove, dynamic DOM updates
  4. 4
    Responsive refinement
    Media query adjustments for all 3 formats: mobile, tablet and desktop
  5. 5
    Documentation & delivery
    Installation README written, defense validated with 4/4 skills

Defense Results

4/4
Skills validated
3
Responsive formats
Excellent mastery
Jury feedback

Screenshots

Screenshot 1