Skip to content

digital-library.md

Latest commit

 

History

History
233 lines (157 loc) · 4.74 KB

digital-library.md

File metadata and controls

233 lines (157 loc) · 4.74 KB

Assignment 2: Digital Library Showcase

You’re building a small frontend product that mimics a modern digital library or book discovery platform.

The app allows users to browse a large catalog of books, open a dedicated book page, and share it with others in a way that looks great on social platforms.

The goal is not just “to make it work”, but to show how you design, structure, optimize, and ship a real-world frontend app.

This product is independent of any existing service, but lives in a realistic domain: books, authors, genres, reading, and content discovery.

Product Brief

Create a web application that:

  • Shows a list of “books” (mocked or fetched from a public API you choose)

  • Each book has:

    • title
    • author
    • short description / blurb
    • cover image
    • number of pages
    • genre

  • Clicking a book opens a book page with richer details

  • Each book page can be shared and renders a proper Open Graph preview

  • The app supports multiple languages

  • The UI must be accessible, performant, and production-minded

Technical Requirements

You may choose:

  • Next.js or
  • Vite + React

But the app must run with both npm and docker, so make sure you dockerize it.

Both setups must work without code changes.

Functional Requirements

Core

  • Books list page

    • Render at least 50 items
    • Avoid rendering bottlenecks (virtualization or similar)

  • Book details page

    • Has its own URL

    • Displays all book data

    • Includes proper Open Graph metadata:

      • og:title
      • og:description
      • og:image

  • Navigation between pages

  • Global layout (header/footer)

Performance

  • Demonstrate awareness of:

    • Large lists
    • Expensive re-renders
    • Bundle size

  • Use at least one memoization technique:

    • React.memo
    • useMemo
    • useCallback

  • Show that you thought about:

    • LCP
    • CLS
    • INP

Add a short PERFORMANCE.md explaining:

  • What you optimized
  • What you would optimize in production

State Management

  • Use:

    • Redux (Toolkit preferred) or
    • A well-structured alternative

  • Demonstrate:

    • Separation of UI and state
    • Scalable slice/module structure
    • Async data handling

Styling (SCSS)

  • Use SCSS

  • Show:

    • Variables
    • Mixins
    • Placeholders (%)

  • Organize styles in a way that scales

  • Avoid “one giant file”

i18n

  • Support at least two languages

  • Include:

    • Static UI text
    • Dynamic content
    • Pluralization (e.g. “1 page”, “350 pages”)

Accessibility

  • Semantic HTML
  • Keyboard navigation
  • Proper labels and roles
  • Color contrast awareness

Include an A11Y.md with:

  • Principles you followed
  • How you tested (manual or tools)

Testing

Implement:

  • At least 2 unit tests
  • At least 1 integration test
  • (Optional) e2e test

Explain your testing strategy in TESTING.md.

Security Awareness

In SECURITY.md, briefly explain:

  • How your app avoids XSS
  • How CSRF would be handled in a real system
  • What clickjacking is and how you’d prevent it

Architectural Expectations

We’re looking for:

  • Thoughtful folder structure

  • Clear separation of:

    • UI
    • State
    • Services
    • Hooks

  • Meaningful component boundaries

  • Reusable atoms/molecules where appropriate

  • Clean data flow

What We Evaluate

We are not looking for “perfect visuals”. We care about:

  • Code quality

  • Structure and scalability

  • Performance thinking

  • Ability to reason about:

    • React behavior
    • Rendering
    • State
    • Async flows

  • Awareness of:

    • Event loop implications
    • Closures in hooks and callbacks
    • Hydration (if using Next.js)

  • Production mindset

Stretch Ideas (Optional)

  • Server-side rendering for book pages
  • Skeleton loaders
  • Prefetching
  • Dark mode
  • Lighthouse score > 90
  • Client-side filtering by genre or author

Deployment

The application must be deployed to one of the following platforms:

  • Vercel
  • Netlify
  • Cloudflare Pages
  • GitHub Pages (only if your setup supports static export cleanly)

Requirements:

  • The deployed app must be publicly accessible
  • The deployed version must behave the same as the local one
  • Book pages must be directly accessible via URL (deep links work)
  • Open Graph metadata should be verifiable on the deployed URLs

Add a DEPLOYMENT.md with:

  • Which platform you chose and why
  • The production URL
  • Any trade-offs or limitations you encountered
  • What you would change for a real production environment (CDN, caching, env vars, secrets, etc.)

We evaluate:

  • Whether the app actually runs in production
  • How well you understand build vs runtime environments
  • Your awareness of SSR/SSG implications (if using Next.js)
  • Your ability to reason about real-world delivery, not just local dev