BookNest Overview

By the end of the chapter, BookNest has a tab bar (Navbars, Toolbars and Tabs), a book detail route (Routes and Navigation), a catalog with live search (2.9, Calendar, Picker and Search), a checkout form (Forms, Inputs and Smart Select), a cart in the Store (2.12, Dom7, App API and Store) and a PWA build (React, Vue, PWA, Native). For now, it is a home page that lists the six sample books, copied verbatim into src/data/books.json. Everything you edit lives in src/:

tree --dirsfirst --noreport -I fonts src

src
├── assets
├── css
│   ├── app.css
│   └── icons.css
├── data
│   └── books.json
├── js
│   ├── app.js
│   ├── routes.js
│   └── store.js
├── pages
│   ├── 404.f7
│   └── home.f7
├── app.f7
├── index.html
└── manifest.json

app.js boots the app, and the root component app.f7 holds the views. routes.js maps / to pages/home.f7 and a catch-all (.*) to the 404 page. store.js calls createStore() with state.books from books.json and a books getter. Pages read books only through that getter, so Dom7, App API and Store can add a cart without changing them.