elad abutbul

src/App.tsx

@@ -1,13 +1,24 @@
-import './App.css'
+import { Route, Routes } from "react-router";
+import "./App.css";
+import NotFound from "./pages/NotFound";
+import AboutUs from "./pages/AboutUs";
+import User from "./pages/User";
+import HomePage from "./pages/HomePage";
+import Contact from "./pages/Contact";
+import { ROUTE_CONSTANTS } from "./constants/RoutesUrlConstants";
 
 function App() {
   return (
     <>
-      {/* Add Routes and Route components here */}
-      {/* Routes: /, /about, /contact, /user/:id, and catch-all for 404 */}
-      <div>App Component</div>
+      <Routes>
+        <Route path={ROUTE_CONSTANTS.HOME_PAGE} element={<HomePage />} />
+        <Route path={ROUTE_CONSTANTS.USER} element={<User />} />
+        <Route path={ROUTE_CONSTANTS.CONTACT} element={<Contact />} />
+        <Route path={ROUTE_CONSTANTS.ABOUT_US} element={<AboutUs />} />
+        <Route path={ROUTE_CONSTANTS.NOT_FOUND} element={<NotFound />} />
+      </Routes>
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/constants/AboutUsConstants.ts

@@ -0,0 +1,3 @@
+export const ABOUT_CONSTANTS = {
+  LEARN_MORE: "Learn more about us and our mission.",
+} as const;

src/constants/ContactConstants.ts

@@ -0,0 +1,4 @@
+export const CONTACT_CONSTANTS = {
+    GET_IN_TOUCH:"Get in touch with us!",
+
+} as const;

src/constants/HomeConstants.ts

@@ -0,0 +1,7 @@
+export const HOME_CONSTANTS = {
+  HOME_PAGE: "Homepage",
+  WELCOME_TO_WEBSITE: "Welcome to our website! This is the homepage.",
+  USING_USENAVIGATE:'Programmatic Navigation using useNavigate:',
+  ADDITIONAL_NAVIGATION:"Additional Navigation Examples using Link:",
+  GO_TO_USER_123:"go to user 123"
+} as const;

src/constants/NotFoundConstants.ts

@@ -0,0 +1,4 @@
+export const NOT_FOUND_CONSTANTS = {
+  PAGE_NOT_FOUND: "Page Not Found",
+  PAGE_NOT_EXIST: "Sorry, the page you are looking for does not exist.",
+} as const;

src/constants/PagesConstants.ts

@@ -0,0 +1,6 @@
+export const PAGE_CONSTANTS = {
+  ABOUT_US: "About Us",
+  HOME_PAGE: "Home Page",
+  CONTACT: "Contact",
+  GO_HOME: "Go Home",
+} as const;

src/constants/RoutesUrlConstants.ts

@@ -0,0 +1,8 @@
+export const ROUTE_CONSTANTS = {
+  HOME_PAGE: "/",
+  CONTACT: "/contact",
+  ABOUT_US: "/about",
+  USER: "/user/:id",
+  NOT_FOUND: "*",
+  USER_123:"/user/123",
+} as const;

src/constants/UserConstants.ts

@@ -0,0 +1,5 @@
+export const USER_CONSTANTS = {
+  USER_PROFILE: "User Profile",
+  USER_ID: "User ID:",
+  PAGE_DEMONSTRATES:"This page demonstrates URL parameters using useParams."
+} as const;

src/main.tsx

@@ -1,11 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { BrowserRouter } from "react-router";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    {/* Add BrowserRouter here */}
-    <App />
-  </StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

src/pages/AboutUs.tsx

@@ -1,23 +1,24 @@
-function AboutUs() {
+import { Link } from "react-router";
+import { PAGE_CONSTANTS } from "../constants/PagesConstants";
+import { ABOUT_CONSTANTS } from "../constants/AboutUsConstants";
+import { ROUTE_CONSTANTS } from "../constants/RoutesUrlConstants";
 
+function AboutUs() {
   return (
     <div>
       <nav>
-        {/* Add links to Homepage and Contact */}
+        <Link to={ROUTE_CONSTANTS.HOME_PAGE}>{PAGE_CONSTANTS.HOME_PAGE} </Link>
+        <Link to={ROUTE_CONSTANTS.CONTACT}>{PAGE_CONSTANTS.CONTACT}</Link>
       </nav>
 
-      <h1>About Us</h1>
-      <p>Learn more about us and our mission.</p>
+      <h1>{PAGE_CONSTANTS.ABOUT_US}</h1>
+      <p>{ABOUT_CONSTANTS.LEARN_MORE}</p>
 
-      <div style={{ marginTop: '20px' }}>
-        <button>
-          Go Home
-        </button>
+      <div style={{ marginTop: "20px" }}>
+        <Link to={ROUTE_CONSTANTS.HOME_PAGE}>{PAGE_CONSTANTS.GO_HOME}</Link>
       </div>
-
     </div>
   );
 }
 
 export default AboutUs;
-

src/pages/Contact.tsx

@@ -1,22 +1,24 @@
-function Contact() {
+import { Link } from "react-router";
+import { PAGE_CONSTANTS } from "../constants/PagesConstants";
+import { CONTACT_CONSTANTS } from "../constants/ContactConstants";
+import { ROUTE_CONSTANTS } from "../constants/RoutesUrlConstants";
 
+function Contact() {
   return (
     <div>
       <nav>
-        {/* Add links to Homepage and About Us */}
+        <Link to={ROUTE_CONSTANTS.HOME_PAGE}>{PAGE_CONSTANTS.HOME_PAGE} </Link>
+        <Link to={ROUTE_CONSTANTS.ABOUT_US}>{PAGE_CONSTANTS.ABOUT_US}</Link>
       </nav>
 
-      <h1>Contact</h1>
-      <p>Get in touch with us!</p>
+      <h1>{PAGE_CONSTANTS.CONTACT}</h1>
+      <p>{CONTACT_CONSTANTS.GET_IN_TOUCH}</p>
 
-      <div style={{ marginTop: '20px' }}>
-        <button>
-          Go Home
-        </button>
+      <div style={{ marginTop: "20px" }}>
+        <button>{PAGE_CONSTANTS.GO_HOME}</button>
       </div>
     </div>
   );
 }
 
 export default Contact;
-

src/pages/HomePage.tsx

@@ -1,29 +1,37 @@
-function HomePage() {
+import { Link, useNavigate } from "react-router";
+import { HOME_CONSTANTS } from "../constants/HomeConstants";
+import { ROUTE_CONSTANTS } from "../constants/RoutesUrlConstants";
+import { PAGE_CONSTANTS } from "../constants/PagesConstants";
 
+function HomePage() {
+  const navigate = useNavigate();
   return (
     <div>
       <nav>
-        {/* Add links to About Us and Contact */}
+        <Link to={ROUTE_CONSTANTS.CONTACT}>{PAGE_CONSTANTS.CONTACT} </Link>
+        <Link to={ROUTE_CONSTANTS.ABOUT_US}> {PAGE_CONSTANTS.ABOUT_US}</Link>
       </nav>
 
-      <h1>Homepage</h1>
-      <p>Welcome to our website! This is the homepage.</p>
+      <h1>{HOME_CONSTANTS.HOME_PAGE}</h1>
+      <p>{HOME_CONSTANTS.WELCOME_TO_WEBSITE}.</p>
 
-      <div style={{ marginTop: '20px' }}>
-        <h3>Programmatic Navigation using useNavigate:</h3>
-        {/* Add button to navigate to /user/123 using useNavigate */}
+      <div style={{ marginTop: "20px" }}>
+        <h3>P{HOME_CONSTANTS.USING_USENAVIGATE}</h3>
+        <button onClick={() => navigate(ROUTE_CONSTANTS.USER_123)}>
+          {HOME_CONSTANTS.GO_TO_USER_123}
+        </button>
       </div>
 
-      <div style={{ marginTop: '20px' }}>
-        <h3>Additional Navigation Examples using Link:</h3>
+      <div style={{ marginTop: "20px" }}>
+        <h3>{HOME_CONSTANTS.ADDITIONAL_NAVIGATION}</h3>
         <nav>
-          {/* Add link to /user/456 using Link */}
+          <Link to={ROUTE_CONSTANTS.USER_123}>
+            {HOME_CONSTANTS.GO_TO_USER_123}
+          </Link>
         </nav>
       </div>
-
     </div>
   );
 }
 
 export default HomePage;
-

src/pages/NotFound.tsx

@@ -1,11 +1,12 @@
+import { NOT_FOUND_CONSTANTS } from "../constants/NotFoundConstants";
+
 function NotFound() {
   return (
     <div>
-      <h1>404 - Page Not Found</h1>
-      <p>Sorry, the page you are looking for does not exist.</p>
+      <h1>{NOT_FOUND_CONSTANTS.PAGE_NOT_FOUND}</h1>
+      <p>{NOT_FOUND_CONSTANTS.PAGE_NOT_EXIST}</p>
     </div>
   );
 }
 
 export default NotFound;
-

src/pages/User.tsx

@@ -1,13 +1,21 @@
+import { Link, useParams } from "react-router";
+import { USER_CONSTANTS } from "../constants/UserConstants";
+import { ROUTE_CONSTANTS } from "../constants/RoutesUrlConstants";
+import { PAGE_CONSTANTS } from "../constants/PagesConstants";
+
 function User() {
+  const { id } = useParams();
 
   return (
     <div>
-      <h1>User Profile</h1>
-      <p>User ID: </p>
-      <p>This page demonstrates URL parameters using useParams.</p>
+      <h1>{USER_CONSTANTS.USER_PROFILE}</h1>
+      <p>
+        {USER_CONSTANTS.USER_ID} {id}
+      </p>
+      <p>{USER_CONSTANTS.PAGE_DEMONSTRATES}</p>
+      <Link to={ROUTE_CONSTANTS.HOME_PAGE}>{PAGE_CONSTANTS.GO_HOME}</Link>
     </div>
   );
 }
 
 export default User;
-