Build Readly: From UI to Full-Stack eBook Reader

Build a complete personal reading space while learning how the pieces of a full-stack application fit together.

You will start with a prepared Readly interface and progressively replace mock behavior with real application functionality. By the end, the interface will be backed by a database, secure authentication, persistent eBook storage, a real EPUB reader, reading progress, annotations, reader preferences, and production-minded safeguards.

Course Preview

See the Readly interface you will turn into a complete full-stack application.

What You Will Build

Readly is a personal eBook library and reader.

A signed-in user can:

• create an account and sign in
• upload EPUB books
• manage their personal library
• open and read books
• navigate chapters and reading positions
• resume where they stopped
• bookmark passages
• highlight text
• add notes
• favorite highlights
• personalize the reading experience
• review reading activity from Home

The course finishes with testing, security hardening, and deployment preparation.

How the Course Works

This is a project-focused course. You will work on the same application throughout the course instead of building unrelated exercises.

The starter gives you the prepared Readly interface and mock data. The implementation work begins by establishing the application’s real data layer, authentication, storage, reader, persistence, and application behavior.

Each implementation lesson focuses on one meaningful change and ends with a visible or testable checkpoint.

Prerequisites

You should already be comfortable with:

• JavaScript or TypeScript
• React
• Next.js
• HTML and CSS
• npm
• Git
• basic SQL and relational database concepts

Docker basics are useful because the local development environment uses containers for services such as PostgreSQL and S3-compatible object storage.

What You Will Learn

By completing the project, you will practice:

• structuring a larger Next.js application
• designing relational data for a real product
• working with Prisma and PostgreSQL
• implementing custom session-based authentication
• validating and protecting application resources
• handling EPUB uploads and object storage
• integrating EPUB.js into a React/Next.js reader
• persisting reading position and user annotations
• building contextual reader preferences
• making a feature-rich application responsive
• testing and hardening a full-stack workflow

Final Project

The final Readly workflow is:

Register → Login → Upload EPUB → My Library → Open Book → Read → Change Settings → Close → Reopen → Resume → Bookmark → Highlight → Add Note → Browse Annotations → Delete Book

The goal is not to produce an enterprise platform. The goal is to finish a coherent, production-minded full-stack MVP whose major workflows work end to end.

Final Result

At the end of the course, you will have a complete Readly application with:

• PostgreSQL persistence
• Prisma data access
• custom authentication and sessions
• Argon2id password hashing
• Zod validation
• S3-compatible EPUB storage
• EPUB.js rendering
• book-wide reading progress
• bookmarks
• highlights and favorites
• notes
• persistent reader preferences
• real Home and Library data
• responsive layouts
• ownership and upload protections
• security safeguards
• final lint, typecheck, build, and smoke-test verification