react instedof angular

[MohamedAzzam-CS]

No description provided.

[Copilot]

🟡 Changes recommended

Critical CI and deployment issues, plus routing and accessibility issues, remain.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

This PR replaces the Angular frontend with a React/Vite/TypeScript application using React Router, reusable components, SCSS styling, and mock services.

Changes:

• Migrates Angular tooling, bootstrap, configuration, and dependencies to React/Vite.
• Adds routed home, catalog, search, login, profile, detail, and 404 pages.
• Adds shared UI components, models, services, styling, and updated documentation.

File summaries

File	Summary
frontend/vite.config.ts	Adds Vite React configuration. Critical (2 votes): The /zemoLibrary/ deployment path is not configured, so production assets will 404.
frontend/tsconfig.tsbuildinfo	Adds TypeScript build metadata.
frontend/tsconfig.spec.json	Removes Angular test configuration.
frontend/tsconfig.json	Configures React/Vite TypeScript compilation.
frontend/tsconfig.app.json	Removes Angular app configuration.
frontend/src/vite-env.d.ts	Declares SCSS module types.
frontend/src/styles/global.scss	Adds global styles.
frontend/src/styles.scss	Removes the Angular stylesheet placeholder.
frontend/src/services/searchService.ts	Adds book search logic.
frontend/src/services/cartService.ts	Adds cart state management.
frontend/src/services/bookService.ts	Adds mock book data access.
frontend/src/services/authService.ts	Adds mock authentication state.
frontend/src/pages/Search/Search.tsx	Adds the search page. Moderate (2 votes): The search control lacks a persistent accessible name.
frontend/src/pages/Search/Search.module.scss	Styles the search page.
frontend/src/pages/Profile/Profile.tsx	Adds the profile page.
frontend/src/pages/Profile/Profile.module.scss	Styles the profile page.
frontend/src/pages/NotFound/NotFound.tsx	Adds the 404 page.
frontend/src/pages/NotFound/NotFound.module.scss	Styles the 404 page.
frontend/src/pages/Login/Login.tsx	Adds the login form. Moderate (2 votes): The email control relies only on its placeholder for an accessible name.
frontend/src/pages/Login/Login.module.scss	Styles the login form.
frontend/src/pages/Home/Home.tsx	Adds the home page.
frontend/src/pages/Home/Home.module.scss	Styles the home page.
frontend/src/pages/Catalog/Catalog.tsx	Adds catalog filtering and pagination.
frontend/src/pages/Catalog/Catalog.module.scss	Styles the catalog page.
frontend/src/pages/BookDetail/BookDetail.tsx	Adds the book-detail page.
frontend/src/pages/BookDetail/BookDetail.module.scss	Styles book details.
frontend/src/models/User.ts	Defines the user model.
frontend/src/models/Book.ts	Defines the book model.
frontend/src/main.tsx	Adds React application bootstrap. Critical (2 votes): BrowserRouter lacks deployment-compatible basename or fallback handling for /zemoLibrary/ and nested refreshes.
frontend/src/main.ts	Removes the Angular bootstrap.
frontend/src/index.html	Removes the Angular HTML entrypoint.
frontend/src/components/Sidebar/Sidebar.tsx	Adds the genre sidebar.
frontend/src/components/Sidebar/Sidebar.module.scss	Styles the sidebar.
frontend/src/components/RatingStars/RatingStars.tsx	Adds rating display. Moderate (2 votes): The generic div does not reliably expose the aggregate rating to assistive technology.
frontend/src/components/RatingStars/RatingStars.module.scss	Styles the rating display.
frontend/src/components/Pagination/Pagination.tsx	Adds pagination controls.
frontend/src/components/Pagination/Pagination.module.scss	Styles pagination.
frontend/src/components/Navbar/Navbar.tsx	Adds navigation links. Moderate (1 vote): The root NavLink lacks end, so Home appears active on descendant routes.
frontend/src/components/Navbar/Navbar.module.scss	Styles navigation.
frontend/src/components/LoadingSpinner/LoadingSpinner.tsx	Adds a loading indicator.
frontend/src/components/LoadingSpinner/LoadingSpinner.module.scss	Styles the loading indicator.
frontend/src/components/Layout/Layout.tsx	Adds the shared page layout.
frontend/src/components/Layout/Layout.module.scss	Styles the shared layout.
frontend/src/components/Header/Header.tsx	Adds the site header.
frontend/src/components/Header/Header.module.scss	Styles the site header.
frontend/src/components/Footer/Footer.tsx	Adds the site footer.
frontend/src/components/Footer/Footer.module.scss	Styles the site footer.
frontend/src/components/BookCard/BookCard.tsx	Adds the reusable book card.
frontend/src/components/BookCard/BookCard.module.scss	Styles book cards.
frontend/src/app/app.ts	Removes the Angular root component.
frontend/src/app/app.spec.ts	Removes the Angular root test.
frontend/src/app/app.scss	Removes the Angular root stylesheet.
frontend/src/app/app.routes.ts	Removes Angular routes.
frontend/src/app/app.html	Removes the Angular template.
frontend/src/app/app.config.ts	Removes Angular providers.
frontend/src/App.tsx	Defines React Router routes.
frontend/README.md	Documents the React/Vite setup.
frontend/package.json	Replaces Angular dependencies and scripts. Critical (3 votes): The workflow invokes undefined npm run test:ci. Critical (3 votes): The Pages workflow still uses Angular deployment arguments and artifact paths incompatible with Vite. Moderate (1 vote): The VS Code launch profile still invokes the removed npm: start task.
frontend/index.html	Adds the Vite HTML entrypoint.
frontend/angular.json	Removes Angular workspace configuration.

Review details

Suppressed comments (2)

frontend/package.json:7

• The checked-in VS Code launch profile still runs the npm: start pre-launch task, but this migration removes the start script. Using that profile now fails before Vite starts; retain a start alias or update the launch profile to use the new dev script.

    "dev": "vite",

frontend/src/components/Navbar/Navbar.tsx:19

• The NavLink for / is missing end, so React Router considers it active for every descendant path such as /catalog and /profile. The Home link will therefore appear active alongside the current route; set end for the root link.

        <NavLink
          key={link.to}
          to={link.to}
          className={({ isActive }) => (isActive ? styles.active : styles.link)}

• Files reviewed: 58/62 changed files
• Comments generated: 7
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.