Understand the Readly Application Structure

A larger application becomes much easier to change when you know where its pieces live.

You do not need a general lesson on how Next.js works. Instead, map the structure of this specific application before we start replacing its mock behavior.

Task

Trace one visible Readly screen from its route to its reusable components and data.

Start with the Home page, then repeat the process for My Library and the Reader.

What to Look For

Identify:

text

app/
components/
lib/
data/
public/

Then locate:

the Home route
the Library route
the Reader route
shared layout/navigation components
feature-specific components
mock book data
mock annotation data
static assets

A Useful Mental Model

Think about the project in three layers:

text

Route
  ↓
Feature components
  ↓
Data / application utilities

The exact implementation may vary by file, but the important goal is to avoid putting application behavior directly into every visual component.

Test

Choose one book shown in My Library.

Trace it backwards:

text

Book card
   ↓
Library component
   ↓
data source

Then choose a visible Reader element and trace:

text

Reader screen
   ↓
Reader component
   ↓
mock reader data/state

Checkpoint

You are done when you can answer these questions without searching randomly through the project:

Where does a route live?
Where does a reusable UI component live?
Where is mock book data defined?
Where are static assets stored?
Which files will eventually need to change when mock data becomes database data?

This map will make the next modules much easier to follow.