from angular to react - #11
Merged
Merged
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
Critical CI, deployment, routing, and authentication issues remain unresolved.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
This PR migrates the frontend from Angular to a React/Vite single-page application.
Changes:
- Replaces Angular tooling and entrypoints with Vite, React, and TypeScript.
- Adds routes, pages, reusable components, mock services, models, and SCSS styling.
- Updates documentation and frontend scripts.
File summaries
| File | Reviewed change / final note |
|---|---|
frontend/vite.config.ts |
Adds Vite configuration; GitHub Pages base path remains unresolved (critical). |
frontend/tsconfig.tsbuildinfo |
Adds generated build metadata that should be ignored and removed (nit). |
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 |
Adds Vite and SCSS module typings. |
frontend/src/styles/global.scss |
Adds global styles. |
frontend/src/styles.scss |
Removes the obsolete Angular stylesheet. |
frontend/src/services/searchService.ts |
Adds book search logic. |
frontend/src/services/cartService.ts |
Adds in-memory cart operations. |
frontend/src/services/bookService.ts |
Adds mock book data and accessors. |
frontend/src/services/authService.ts |
Adds in-memory authentication; arbitrary credentials are accepted (critical). |
frontend/src/pages/Search/Search.tsx |
Adds search page; input lacks a programmatic accessible name (moderate). |
frontend/src/pages/Search/Search.module.scss |
Styles the search page. |
frontend/src/pages/Profile/Profile.tsx |
Adds profile page. |
frontend/src/pages/Profile/Profile.module.scss |
Styles the profile page. |
frontend/src/pages/NotFound/NotFound.tsx |
Adds the not-found page. |
frontend/src/pages/NotFound/NotFound.module.scss |
Styles the not-found page. |
frontend/src/pages/Login/Login.tsx |
Adds login form; controls lack associated labels (moderate). |
frontend/src/pages/Login/Login.module.scss |
Styles the login form. |
frontend/src/pages/Home/Home.tsx |
Adds 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 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 |
Bootstraps React; GitHub Pages routing and basename remain unresolved (critical). |
frontend/src/main.ts |
Removes Angular bootstrap. |
frontend/src/index.html |
Removes the Angular HTML entrypoint. |
frontend/src/components/Sidebar/Sidebar.tsx |
Adds genre sidebar. |
frontend/src/components/Sidebar/Sidebar.module.scss |
Styles the sidebar. |
frontend/src/components/RatingStars/RatingStars.tsx |
Adds rating component; accessible semantic labeling needs correction (moderate). |
frontend/src/components/RatingStars/RatingStars.module.scss |
Styles ratings. |
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; the Home link remains active on descendant routes (moderate). |
frontend/src/components/Navbar/Navbar.module.scss |
Styles navigation. |
frontend/src/components/LoadingSpinner/LoadingSpinner.tsx |
Adds loading indicator. |
frontend/src/components/LoadingSpinner/LoadingSpinner.module.scss |
Styles the loading indicator. |
frontend/src/components/Layout/Layout.tsx |
Adds shared page layout. |
frontend/src/components/Layout/Layout.module.scss |
Styles the shared layout. |
frontend/src/components/Header/Header.tsx |
Adds site header. |
frontend/src/components/Header/Header.module.scss |
Styles the header. |
frontend/src/components/Footer/Footer.tsx |
Adds site footer. |
frontend/src/components/Footer/Footer.module.scss |
Styles the footer. |
frontend/src/components/BookCard/BookCard.tsx |
Adds reusable book card. |
frontend/src/components/BookCard/BookCard.module.scss |
Styles book cards. |
frontend/src/app/app.ts |
Removes Angular root component. |
frontend/src/app/app.spec.ts |
Removes the Angular root test. |
frontend/src/app/app.scss |
Retains legacy Angular stylesheet context. |
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 configuration. |
frontend/src/App.tsx |
Defines React routes. |
frontend/README.md |
Documents the React/Vite setup; VS Code launch configuration remains stale (moderate). |
frontend/package.json |
Switches dependencies and scripts; CI and Pages deployment commands remain incompatible (critical). |
frontend/index.html |
Adds the Vite HTML entrypoint. |
frontend/angular.json |
Removes Angular workspace configuration. |
Review details
Suppressed comments (2)
frontend/README.md:3
- The migration leaves the checked-in frontend tooling on Angular:
.vscode/launch.jsonstill runsnpm: start/npm: testforng serve/ng test, while those scripts and Angular dependencies were removed. Update or remove those launch configurations so the documented React/Vite migration does not leave F5 and test debugging broken.
Vite + React + TypeScript. Converted from Angular scaffold.
frontend/src/pages/Search/Search.tsx:20
- The search input relies only on its placeholder and has no programmatic accessible name. Add an associated visible label or an
aria-labelso screen-reader users can identify the field after the placeholder is no longer shown.
- Files reviewed: 58/62 changed files
- Comments generated: 10
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| } | ||
| ] | ||
| "dev": "vite", | ||
| "build": "tsc -b && vite build", |
| "dev": "vite", | ||
| "build": "tsc -b && vite build", | ||
| "preview": "vite preview", | ||
| "test": "vitest" |
|
|
||
| ReactDOM.createRoot(document.getElementById('root')!).render( | ||
| <React.StrictMode> | ||
| <BrowserRouter> |
|
|
||
| ReactDOM.createRoot(document.getElementById('root')!).render( | ||
| <React.StrictMode> | ||
| <BrowserRouter> |
Comment on lines
+5
to
+7
| export function login(email: string, _password: string): Promise<User> { | ||
| currentUser = { id: 'u1', name: 'Guest User', email }; | ||
| return Promise.resolve(currentUser); |
Comment on lines
+4
to
+5
| export default defineConfig({ | ||
| plugins: [react()], |
Comment on lines
+16
to
+20
| <NavLink | ||
| key={link.to} | ||
| to={link.to} | ||
| className={({ isActive }) => (isActive ? styles.active : styles.link)} | ||
| > |
| export default function RatingStars({ rating, max = 5 }: RatingStarsProps) { | ||
| const stars = Array.from({ length: max }, (_, i) => i < Math.round(rating)); | ||
| return ( | ||
| <div className={styles.stars} aria-label={`Rating: ${rating} out of ${max}`}> |
Comment on lines
+20
to
+33
| <input | ||
| type="email" | ||
| placeholder="Email" | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| required | ||
| /> | ||
| <input | ||
| type="password" | ||
| placeholder="Password" | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| required | ||
| /> |
| @@ -0,0 +1 @@ | |||
| {"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/BookCard/BookCard.tsx","./src/components/Footer/Footer.tsx","./src/components/Header/Header.tsx","./src/components/Layout/Layout.tsx","./src/components/LoadingSpinner/LoadingSpinner.tsx","./src/components/Navbar/Navbar.tsx","./src/components/Pagination/Pagination.tsx","./src/components/RatingStars/RatingStars.tsx","./src/components/Sidebar/Sidebar.tsx","./src/models/Book.ts","./src/models/User.ts","./src/pages/BookDetail/BookDetail.tsx","./src/pages/Catalog/Catalog.tsx","./src/pages/Home/Home.tsx","./src/pages/Login/Login.tsx","./src/pages/NotFound/NotFound.tsx","./src/pages/Profile/Profile.tsx","./src/pages/Search/Search.tsx","./src/services/authService.ts","./src/services/bookService.ts","./src/services/cartService.ts","./src/services/searchService.ts"],"version":"5.9.3"} No newline at end of file | |||
Co-authored-by: Mohamed Azzam <sci.MohamedElsayed32561@alexu.edu.eg>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.