From UI to Application

You are starting with a prepared Readly interface rather than an empty Next.js project.

That is intentional.

The visual design is already established, so the work in this course can concentrate on turning that interface into a real application. You will progressively replace mock data and placeholder behavior with persistent data, authentication, storage, EPUB rendering, and the rest of Readly’s application logic.

In this module, we establish the starting point.

What You Have

The starter gives you the main Readly screens:

• Home
• My Library
• Reader
• Highlights
• Notes
• Settings
• Login
• Register

It also includes the prepared responsive UI and mock data needed to make those screens useful before the backend exists.

What You Do Not Have

At this point there is no real:

• database
• authentication
• session system
• object storage
• EPUB.js reader
• reading-progress persistence
• annotation persistence
• reader-preference persistence

Those are the features you will build in later modules.

Module Goal

By the end of this module, you should be comfortable starting the project, finding the important parts of the codebase, configuring environment values safely, and recognizing the boundaries between the prepared interface and the application functionality we will add.

Module Checkpoint

You are ready to continue when:

• Readly runs locally
• the major screens load
• navigation works
• you can locate the route and component code for a screen
• you know where the current mock data comes from
• environment configuration has a clear home
• no real backend service is required yet

Next, we will give Readly its first real application capability: persistent data.