TRAINING PROJECT

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 Fetch API and add to personal list
Dynamic book removal with real-time DOM updates
Full SPA in vanilla ES6 JavaScript — 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 — SPA logic, Fetch API, DOM manipulation
Fetch API — requests to external book API
Media queries — 3-breakpoint responsive (mobile, tablet, desktop)
Git — versioning and delivery

Project Timeline

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

Defense Results

4/4

Skills validated

Responsive formats

Excellent mastery

Jury feedback

Poch'Lib — UI cover

Screenshots