Reading-tracker platform — book recommendations, personal library and a reading progress diary & statistics.
Read Journey is the frontend for a reading-tracker service. Visitors register or log in, browse a server-paginated catalog of recommended books, build a personal library, and track their reading sessions — start/stop page numbers, a per-book diary and a statistics chart — all built as a course project for the GoIT Frontend Development program.
The UI follows the Figma mockup supplied with the assignment's technical specification.
| Production | read-journey-tau-three.vercel.app |
| Repository | github.com/kutluhangil/ReadJourney |
| Design | Figma mockup |
| API docs | readjourney.b.goit.study/api-docs |
- Register / Login — react-hook-form + yup validation (name, email pattern, 7+ character password); successful auth redirects straight into the app and errors surface as a toast.
- Recommended page — a filters form (title/author), a short onboarding block, a static quote, and a server-side paginated book grid; clicking a cover opens a modal with an "Add to library" action.
- My Library page — an "Add book" form (title, author, page count), a status filter (unread / in progress / done / all), and a grid of the user's books; clicking a cover opens a modal with a "Start reading" action, clicking the trash icon removes the book.
- Reading page — a start/stop page-number form tied to the book's active session; a Diary tab listing past sessions (pages read, duration, speed, delete) and a Statistics tab with a circular progress chart; finishing the last page opens a "book is read" modal.
- Responsive layout — inline navigation on tablet/desktop, a slide-in burger menu on mobile, down to a 320px viewport.
- Session persistence — JWT token/refresh token kept in
localStorage, restored on reload; logout clears both the Redux store andlocalStorageregardless of the backend response.
| Layer | Choice |
|---|---|
| Build tool | Vite |
| UI library | React 19 |
| Routing | React Router 7 |
| State management | Redux Toolkit + React-Redux |
| Forms & validation | React Hook Form + Yup |
| HTTP client | Axios |
| Notifications | React Toastify |
| Styling | CSS Modules, self-hosted Rubik font, SVG icon sprite |
| Deployment | Vercel |
REST API: readjourney.b.goit.study/api-docs
POST /users/signup register
POST /users/signin log in
GET /users/current restore session
POST /users/signout log out
GET /books/recommend paginated recommended books (title, author, page, limit)
POST /books/add add a book manually
POST /books/add/:id add a recommended book to the library
DELETE /books/remove/:id remove a book from the library
GET /books/own the user's library (filter by status)
POST /books/reading/start start a reading session
POST /books/reading/finish finish a reading session
DELETE /books/reading delete a diary entry
Every request after login carries the JWT as a Bearer token.
| Path | Page |
|---|---|
/register |
Registration |
/login |
Login |
/recommended |
Recommended books (authorized) |
/library |
My library (authorized) |
/reading/:bookId |
Reading progress for a book (authorized) |
* |
Not found |
Requires Node.js 20 or newer. No environment variables needed — the API base URL points to the public GoIT-hosted backend.
npm install # install dependencies
npm run dev # start the dev server on http://localhost:5173
npm run build # production build into dist/
npm run preview # preview the production build
npm run lint # lint the source with oxlintsrc/
├── api/ axios instance
├── app/ redux store
├── assets/ fonts, SVG icon sprite
├── components/ shared UI (Header, Modal, BookCard, Dashboard, Select, ...)
├── features/ redux slices — auth, books
├── pages/ route-level components (Register, Login, Recommended, Library, Reading)
├── styles/ design tokens, base/reset styles
└── utils/ validation schemas, notifications, storage, clsx
Kutluhan Gil GitHub
Built as part of the GoIT Frontend Development program.
MIT Licensed — see LICENSE