feat: add React Router and restructure project

.gitignore

@@ -13,12 +13,16 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+.env
+
+# React Router
+/.react-router/
+/build/

.vscode/extensions.json

@@ -1,10 +1,10 @@
 {
-    "recommendations": [
-        "formulahendry.auto-rename-tag",
-        "streetsidesoftware.code-spell-checker",
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
-        "YoavBls.pretty-ts-errors",
-        "bradlc.vscode-tailwindcss"
-    ]
+  "recommendations": [
+    "formulahendry.auto-rename-tag",
+    "streetsidesoftware.code-spell-checker",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "YoavBls.pretty-ts-errors",
+    "bradlc.vscode-tailwindcss"
+  ]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "js/ts.preferences.importModuleSpecifier": "non-relative"
+}

README.md

@@ -55,7 +55,7 @@ pnpm test:watch
 ```
 
 Test files live next to the code they test (`*.test.ts` / `*.test.tsx`).
-Shared helpers and fixtures live in `src/test/`:
+Shared helpers and fixtures live in `app/test/`:
 
 - `setup.ts` adds the [jest-dom](https://github.com/testing-library/jest-dom)
   matchers (e.g. `toBeInTheDocument`) and clears the DOM and `localStorage`
@@ -71,7 +71,7 @@ We test where there is logic, state or several parts working together. Static
 markup (like `Header` and `Footer`) is not tested: such tests break on every
 intended change without catching real bugs.
 
-- **Unit tests** for the API layer (`src/api/openLibrary.test.ts`): `toBook`
+- **Unit tests** for the API layer (`app/api/openLibrary.test.ts`): `toBook`
   and `toDescription` map Open Library data to our types (with fallbacks for
   missing fields), and `searchBooks` and `fetchWork` build the right request
   and throw on HTTP errors.
@@ -90,7 +90,7 @@ intended change without catching real bugs.
 No test sends requests to openlibrary.org:
 
 - `openLibrary.test.ts` replaces the global `fetch` with a mock (`vi.spyOn`)
-  that answers with the saved responses in `src/test/fixtures/`.
+  that answers with the saved responses in `app/test/fixtures/`.
 - The `App` and `BookDetails` tests replace `searchBooks` and `fetchWork`
   with mocks (`vi.mock`), so the components receive the fixture data
   (`searchResponse.json`, `workResponse.json`) right away.
@@ -164,5 +164,5 @@ short, it was used for:
   the `description` field of a work.
 
 Where AI contributed directly to a piece of code, there is a comment saying
-so, for example in [src/api/types.ts](src/api/types.ts) and
-[src/main.tsx](src/main.tsx).
+so, for example in [app/api/types.ts](app/api/types.ts) and
+[app/root.tsx](app/root.tsx).

src/api/openLibrary.test.ts → app/api/openLibrary.test.ts

@@ -1,8 +1,13 @@
 import { describe, expect, it, vi } from "vitest";
-import { searchBooks, toBook, fetchWork, toDescription } from "./openLibrary";
-import type { OpenLibraryDoc, OpenLibraryWork } from "./types";
-import searchResponse from "../test/fixtures/searchResponse.json";
-import workResponse from "../test/fixtures/workResponse.json";
+import {
+  searchBooks,
+  toBook,
+  fetchWork,
+  toDescription,
+} from "~/api/openLibrary";
+import type { OpenLibraryDoc, OpenLibraryWork } from "~/api/types";
+import searchResponse from "~/test/fixtures/searchResponse.json";
+import workResponse from "~/test/fixtures/workResponse.json";
 
 describe("toBook", () => {
   it("maps an Open Library doc to our Book type", () => {

src/api/openLibrary.ts → app/api/openLibrary.ts

@@ -5,7 +5,7 @@ import type {
   Book,
   BookFilters,
   OpenLibraryWork,
-} from "./types";
+} from "~/api/types";
 
 const BASE_URL = "https://openlibrary.org";
 const SEARCH_LIMIT = 12;

src/api/useBookDescription.ts → app/api/useBookDescription.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { fetchWork, toDescription } from "./openLibrary";
+import { fetchWork, toDescription } from "~/api/openLibrary";
 
 function useBookDescription(key: string) {
   return useQuery({

src/api/useBooks.ts → app/api/useBooks.ts

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
-import { searchBooks, toBook } from "./openLibrary";
-import type { BookSearchParams, OpenLibrarySearchResponse } from "./types";
+import { searchBooks, toBook } from "~/api/openLibrary";
+import type { BookSearchParams, OpenLibrarySearchResponse } from "~/api/types";
 
 function parseBooks(data: OpenLibrarySearchResponse) {
   return {

src/components/BookCard/BookCard.test.tsx → app/components/BookCard/BookCard.test.tsx

@@ -1,8 +1,8 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { BookCard } from "./BookCard";
-import { bookWithCover as book } from "../../test/fixtures/books";
+import { BookCard } from "~/components/BookCard/BookCard";
+import { bookWithCover as book } from "~/test/fixtures/books";
 
 describe("BookCard", () => {
   it("shows title, authors and year from the book prop", () => {

src/components/BookCard/BookCard.tsx → app/components/BookCard/BookCard.tsx

@@ -1,7 +1,7 @@
 import styles from "./BookCard.module.css";
-import { BookCover } from "../BookCover/BookCover";
-import { FavoriteButton } from "../FavoriteButton/FavoriteButton";
-import type { Book } from "../../api/types";
+import { BookCover } from "~/components/BookCover/BookCover";
+import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
+import type { Book } from "~/api/types";
 
 interface BookCardProps {
   book: Book;

src/components/BookCover/BookCover.tsx → app/components/BookCover/BookCover.tsx

@@ -1,5 +1,5 @@
 import styles from "./BookCover.module.css";
-import type { Book } from "../../api/types";
+import type { Book } from "~/api/types";
 
 interface BookCoverProps {
   book: Book;

src/components/BookDetails/BookDetails.test.tsx → app/components/BookDetails/BookDetails.test.tsx

@@ -1,15 +1,15 @@
 import { describe, expect, it, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { BookDetails } from "./BookDetails";
-import { fetchWork } from "../../api/openLibrary";
-import { renderWithQueryClient } from "../../test/renderWithQueryClient";
-import { bookWithCover as book } from "../../test/fixtures/books";
-import workResponse from "../../test/fixtures/workResponse.json";
+import { BookDetails } from "~/components/BookDetails/BookDetails";
+import { fetchWork } from "~/api/openLibrary";
+import { renderWithQueryClient } from "~/test/renderWithQueryClient";
+import { bookWithCover as book } from "~/test/fixtures/books";
+import workResponse from "~/test/fixtures/workResponse.json";
 
 // BookDetails loads the description through useBookDescription -> fetchWork.
 // Mock fetchWork so the component gets the saved work from the fixture.
-vi.mock(import("../../api/openLibrary"), async (importOriginal) => ({
+vi.mock(import("~/api/openLibrary"), async (importOriginal) => ({
   ...(await importOriginal()),
   fetchWork: vi.fn(),
 }));

src/components/BookDetails/BookDetails.tsx → app/components/BookDetails/BookDetails.tsx

@@ -1,8 +1,8 @@
 import styles from "./BookDetails.module.css";
-import { BookCover } from "../BookCover/BookCover";
-import { FavoriteButton } from "../FavoriteButton/FavoriteButton";
-import type { Book } from "../../api/types";
-import { useBookDescription } from "../../api/useBookDescription";
+import { BookCover } from "~/components/BookCover/BookCover";
+import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
+import type { Book } from "~/api/types";
+import { useBookDescription } from "~/api/useBookDescription";
 
 interface BookDetailsProps {
   book: Book;

src/components/BookGrid/BookGrid.test.tsx → app/components/BookGrid/BookGrid.test.tsx

@@ -2,11 +2,11 @@ import type { ComponentProps } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { BookGrid } from "./BookGrid";
-import { toBook } from "../../api/openLibrary";
-import { renderWithQueryClient } from "../../test/renderWithQueryClient";
-import searchResponse from "../../test/fixtures/searchResponse.json";
-import { useBooks } from "../../api/useBooks";
+import { BookGrid } from "~/components/BookGrid/BookGrid";
+import { toBook } from "~/api/openLibrary";
+import { renderWithQueryClient } from "~/test/renderWithQueryClient";
+import searchResponse from "~/test/fixtures/searchResponse.json";
+import { useBooks } from "~/api/useBooks";
 
 // Helper to create mock booksQuery results
 function createMockBooksQuery(overrides = {}) {

src/components/BookGrid/BookGrid.tsx → app/components/BookGrid/BookGrid.tsx

@@ -1,10 +1,10 @@
-import { BookCard } from "../BookCard/BookCard";
-import { SearchBar } from "../SearchBar/SearchBar";
+import { BookCard } from "~/components/BookCard/BookCard";
+import { SearchBar } from "~/components/SearchBar/SearchBar";
 import styles from "./BookGrid.module.css";
-import { useBooks } from "../../api/useBooks";
-import type { Book, BookSearchParams } from "../../api/types";
-import { Pagination } from "../Pagination/Pagination";
-import { SEARCH_LIMIT } from "../../api/openLibrary";
+import { useBooks } from "~/api/useBooks";
+import type { Book, BookSearchParams } from "~/api/types";
+import { Pagination } from "~/components/Pagination/Pagination";
+import { SEARCH_LIMIT } from "~/api/openLibrary";
 
 interface BookGridProps {
   // The result of useBooks, owned by App so it outlives this component.

src/components/FavoriteButton/FavoriteButton.test.tsx → app/components/FavoriteButton/FavoriteButton.test.tsx

@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { FavoriteButton } from "./FavoriteButton";
-import { bookWithCover as book } from "../../test/fixtures/books";
+import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
+import { bookWithCover as book } from "~/test/fixtures/books";
 
 describe("FavoriteButton", () => {
   it("is not pressed when the book is not a favorite", () => {

src/components/FavoriteButton/FavoriteButton.tsx → app/components/FavoriteButton/FavoriteButton.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styles from "./FavoriteButton.module.css";
-import { CheckIcon } from "../icons/CheckIcon";
-import type { Book } from "../../api/types";
+import { CheckIcon } from "~/components/icons/CheckIcon";
+import type { Book } from "~/api/types";
 
 interface FavoriteButtonProps {
   book: Book;

src/components/FilterBooksSection/FilterBooksSection.tsx → app/components/FilterBooksSection/FilterBooksSection.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import styles from "./FilterBooksSection.module.css";
-import type { BookFilters } from "../../api/types";
-import { languageCodes } from "../../api/languageCodes";
-import { CircleQuestionMark } from "../icons/CircleQuestionMark";
+import type { BookFilters } from "~/api/types";
+import { languageCodes } from "~/api/languageCodes";
+import { CircleQuestionMark } from "~/components/icons/CircleQuestionMark";
 
 const FILTER_INPUTS: {
   name: keyof BookFilters;

app/components/MainLoading/MainLoading.module.css

@@ -0,0 +1,7 @@
+.main-loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}

app/components/MainLoading/MainLoading.tsx

@@ -0,0 +1,11 @@
+import styles from "./MainLoading.module.css";
+
+function MainLoading() {
+  return (
+    <main className={styles.mainLoading}>
+      <p>Welcome to Readr!</p>
+      <p>Loading...</p>
+    </main>
+  );
+}
+export { MainLoading };

src/components/Pagination/Pagination.test.tsx → app/components/Pagination/Pagination.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { Pagination } from "./Pagination";
+import { Pagination } from "~/components/Pagination/Pagination";
 
 describe("Pagination", () => {
   it("disables Previous on the first page and Next on the last page", () => {

src/components/SearchBar/SearchBar.test.tsx → app/components/SearchBar/SearchBar.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { SearchBar } from "./SearchBar";
+import { SearchBar } from "~/components/SearchBar/SearchBar";
 
 describe("SearchBar", () => {
   it("shows the query it is given", () => {

src/components/SearchBar/SearchBar.tsx → app/components/SearchBar/SearchBar.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import styles from "./SearchBar.module.css";
-import { FilterIcon } from "../icons/FilterIcon";
-import { FilterBooksSection } from "../FilterBooksSection/FilterBooksSection";
-import type { BookFilters } from "../../api/types";
+import { FilterIcon } from "~/components/icons/FilterIcon";
+import { FilterBooksSection } from "~/components/FilterBooksSection/FilterBooksSection";
+import type { BookFilters } from "~/api/types";
 
 interface SearchBarProps {
   query: string;

src/index.css → app/index.css

@@ -19,14 +19,18 @@ ol {
   list-style: none;
 }
 
-#root {
+body {
+  background-color: var(--background-color);
   display: flex;
   flex-direction: column;
   min-height: 100svh;
-  background-color: var(--background-color);
   font-family: "Open Sans", sans-serif;
 }
 
 main {
   flex: 1;
 }
+
+footer {
+  margin-top: auto;
+}