Development

ui/src/App.js

@@ -1,26 +1,48 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Layout from './components/Layout';
+
 import HomePage from './pages/HomePage';
-import LoginPage from './pages/LoginPage';
-import RegisterPage from './pages/RegisterPage';
 import AboutPage from './pages/AboutPage';
-import BootcampsPage from './pages/BootcampsPage';
-import AddBootcampPage from './pages/AddBootcampPage';
-import AddReviewPage from './pages/AddReviewPage';
+import NotFoundPage from './pages/NotFoundPage';
+
+import LoginPage from './pages/user/LoginPage';
+import RegisterPage from './pages/user/RegisterPage';
+import UserDetailsPage from './pages/user/UserDetailsPage';
+
+import BootcampsPage from './pages/bootcamps/BootcampsPage';
+import BootcampDetailsPage from './pages/bootcamps/BootcampDetailsPage';
+
+import ManageBootcampPage from './pages/bootcamps/ManageBootcampPage';
+import AddBootcampPage from './pages/bootcamps/AddBootcampPage';
+
+import ManageCoursesPage from './pages/bootcamps/ManageCoursesPage';
+import AddCoursePage from './pages/bootcamps/AddCoursePage';
+
+import BootcampReviewsPage from './pages/bootcamps/BootcampReviewsPage';
+import ManageReviewsPage from './pages/bootcamps/ManageReviewsPage';
+import AddReviewPage from './pages/bootcamps/AddReviewPage';
 
 function App() {
   return (
     <Router>
       <Layout />
       <div>
         <Routes>
-          <Route exact path="/" element={<HomePage />} />
-          <Route exact path="/login" element={<LoginPage />} />
-          <Route exact path="/register" element={<RegisterPage />} />
+          <Route path="/" element={<HomePage />} />
           <Route path="/about" element={<AboutPage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+          <Route path="/user/:userId" element={<UserDetailsPage />} />
           <Route path="/bootcamps" element={<BootcampsPage />} />
+          <Route path="/bootcamps/:bootcampId" element={<BootcampDetailsPage />} />
           <Route path="/bootcamps/add" element={<AddBootcampPage />} />
+          <Route path="/bootcamps/:bootcampId/manage" element={<ManageBootcampPage />} />
+          <Route path="/bootcamps/:bootcampId/courses/add" element={<AddCoursePage />} />
+          <Route path="/bootcamps/:bootcampId/courses/manage" element={<ManageCoursesPage />} />
+          <Route path="/bootcamps/:bootcampId/reviews" element={<BootcampReviewsPage />} />
+          <Route path="/bootcamps/:bootcampId/reviews/manage" element={<ManageReviewsPage />} />{' '}
           <Route path="/bootcamps/:bootcampId/reviews/add" element={<AddReviewPage />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </div>
     </Router>

ui/src/components/Bootcamp.jsx

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+import { Image } from 'react-bootstrap';
+
+const Bootcamp = (props) => {
+  const { image, name, rating, location, careers, id } = props.bootcamp;
+
+  return (
+    <div className="card mb-3">
+      <div className="row no-gutters">
+        <div className="col-md-4">
+          <Image src={image} className="card-img" alt={name} />
+        </div>
+        <div className="col-md-8">
+          <div className="card-body">
+            <h5 className="card-title">
+              <Link to={`/bootcamps/${id}`}>
+                {name}
+                <span className="float-right badge badge-success">{rating}</span>
+              </Link>
+            </h5>
+            <span className="badge badge-dark mb-2">{location}</span>
+            <p className="card-text">{careers.join(', ')}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Bootcamp;

ui/src/components/Pagination.jsx

@@ -0,0 +1,35 @@
+const Pagination = () => {
+  return (
+    <nav aria-label="Page navigation example">
+      <ul className="pagination">
+        <li className="page-item">
+          <a className="page-link" href="/">
+            Previous
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            1
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            2
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            3
+          </a>
+        </li>
+        <li className="page-item">
+          <a className="page-link" href="/">
+            Next
+          </a>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Pagination;

ui/src/pages/NotFoundPage.jsx

@@ -0,0 +1,5 @@
+const NotFoundPage = () => {
+  return <div>Not Found Page</div>;
+};
+
+export default NotFoundPage;

ui/src/pages/bootcamps/AddCoursePage.jsx

@@ -0,0 +1,5 @@
+const AddCoursePage = () => {
+  return <div>Add Course Page</div>;
+};
+
+export default AddCoursePage;

ui/src/pages/bootcamps/BootcampDetailsPage.jsx

@@ -0,0 +1,5 @@
+const BootcampDetailsPage = () => {
+  return <div>Bootcamp Details Page</div>;
+};
+
+export default BootcampDetailsPage;

ui/src/pages/bootcamps/BootcampReviewsPage.jsx

@@ -0,0 +1,5 @@
+const BootcampReviewsPage = () => {
+  return <div>Bootcamp Reviews Page</div>;
+};
+
+export default BootcampReviewsPage;