codepath · Zainu04 · Jul 6, 2026 · Jul 6, 2026 · Jul 6, 2026 · Jul 12, 2026
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1,20 +1,20 @@
-# [your app name here]
+# Ramblr
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by: Zainab Akhtar, Jasper Caballero, Aquila Nuzhat
 
 🔗 Link to deployed app:
 
 ## About
 
 ### Description and Purpose
 
-[text goes here]
+A web platform designed to help travelers plan out every aspect of their trip in one place!
 
 ### Inspiration
 
-[text goes here]
+As we have experienced the struggle to plan a trip across different platforms for lodging, activities, etc. we shared the sentiment of wanting to able to plan it all in one place. And thus, Ramblr became our theme!
 
 ## Tech Stack
 
@@ -24,25 +24,39 @@ Backend:
 
 ## Features
 
-### [Name of Feature 1]
+### 1: User
 
-[short description goes here]
+Will store the name, and currency user uses
 
-[gif goes here]
+<img src = "./milestones/features/userprofile.gif">
 
-### [Name of Feature 2]
+### 2: Trips
 
-[short description goes here]
+Will store title, and display dates of trips (Endpoints complete)
 
-[gif goes here]
+<img src = "./milestones/features/trip_endpoint.gif">
 
-### [Name of Feature 3]
+### 3: Destinations
 
-[short description goes here]
+Will store city, country, startdate, enddate, arrival order
 
-[gif goes here]
+<img src = "./milestones/features/destinations_endpoint.gif">
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
+### 4: Activities
+
+Will store the location and type of activity to be part of the trip itinerary
+
+### 4: Expenses
+
+Will add up the costs of all the activities planned + lodging + transportation to give user a summary of trip expenses
+
+### 5: Packing List
+
+Will store all the items the user plans to take (ie. clothes, travel sized lotion, scuba gear)
+
+### 6: Weather API
+
+A tab displaying the weather for all the days of the trip so that the user can plan accordingly
 
 ## Installation Instructions
 

diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ramblr</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.jsx"></script>
+  </body>
+</html>
diff --git a/client/public/.gitkeep b/client/public/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder file to keep this empty folder tracked by git.
+# Delete this once real files are added here.
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useRoutes } from 'react-router-dom';
+import Profile from './pages/Profile.jsx';
+
+// TODO: replace with real pages/components (Navigation, Home, Trips, TripDetails, etc.)
+const App = () => {
+  let element = useRoutes([
+    { path: '/', element: <h1>Ramblr 🧳 — placeholder home page</h1> },
+    { path: '/profile', element: <Profile /> },
+  ]);
+
+  return (
+    <div className="app">
+      {element}
+    </div>
+  );
+};
+
+export default App;
diff --git a/client/src/assets/.gitkeep b/client/src/assets/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder file to keep this empty folder tracked by git.
+# Delete this once real files are added here.
diff --git a/client/src/assets/icons/BudgetIcon.jsx b/client/src/assets/icons/BudgetIcon.jsx
@@ -0,0 +1,8 @@
+const BudgetIcon = (props) => (
+  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <circle cx="10" cy="10" r="7" />
+    <path d="M10 6.5v7M12 8.2c-.4-.6-1.1-1-2-1-1.2 0-2.1.7-2.1 1.6 0 .9.9 1.3 2.1 1.6 1.2.3 2.1.8 2.1 1.7 0 .9-.9 1.6-2.1 1.6-.9 0-1.6-.4-2-1" />
+  </svg>
+);
+
+export default BudgetIcon;
diff --git a/client/src/assets/icons/DashboardIcon.jsx b/client/src/assets/icons/DashboardIcon.jsx
@@ -0,0 +1,10 @@
+const DashboardIcon = (props) => (
+  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <rect x="2.5" y="2.5" width="6.5" height="6.5" rx="1.2" />
+    <rect x="11" y="2.5" width="6.5" height="6.5" rx="1.2" />
+    <rect x="2.5" y="11" width="6.5" height="6.5" rx="1.2" />
+    <rect x="11" y="11" width="6.5" height="6.5" rx="1.2" />
+  </svg>
+);
+
+export default DashboardIcon;
diff --git a/client/src/assets/icons/ItineraryIcon.jsx b/client/src/assets/icons/ItineraryIcon.jsx
@@ -0,0 +1,10 @@
+const ItineraryIcon = (props) => (
+  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <rect x="3" y="3.5" width="14" height="13" rx="1.5" />
+    <path d="M3 7.5h14" />
+    <path d="M7 2v3M13 2v3" />
+    <path d="M6.5 11h2M6.5 13.5h5" />
+  </svg>
+);
+
+export default ItineraryIcon;
diff --git a/client/src/assets/icons/LogoutIcon.jsx b/client/src/assets/icons/LogoutIcon.jsx
@@ -0,0 +1,9 @@
+const LogoutIcon = (props) => (
+  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <path d="M8 3.5H4.8A1.3 1.3 0 0 0 3.5 4.8v10.4a1.3 1.3 0 0 0 1.3 1.3H8" />
+    <path d="M12.5 13.5 16.5 10 12.5 6.5" />
+    <path d="M7 10h9.3" />
+  </svg>
+);
+
+export default LogoutIcon;
diff --git a/client/src/assets/icons/PackingIcon.jsx b/client/src/assets/icons/PackingIcon.jsx
@@ -0,0 +1,9 @@
+const PackingIcon = (props) => (
+  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <rect x="3.5" y="4" width="13" height="13" rx="1.5" />
+    <path d="M4 8.5h12" />
+    <path d="M6.5 11.5l1.3 1.3 2.2-2.6" />
+  </svg>
+);
+
+export default PackingIcon;
diff --git a/client/src/assets/icons/ProfileIcon.jsx b/client/src/assets/icons/ProfileIcon.jsx
@@ -0,0 +1,8 @@
+const ProfileIcon = (props) => (
+  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <circle cx="10" cy="7" r="3.2" />
+    <path d="M3.8 16.5a6.3 6.3 0 0 1 12.4 0" />
+  </svg>
+);
+
+export default ProfileIcon;
diff --git a/client/src/assets/icons/TripsIcon.jsx b/client/src/assets/icons/TripsIcon.jsx
@@ -0,0 +1,9 @@
+const TripsIcon = (props) => (
+  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
+    <rect x="3" y="6.5" width="14" height="9.5" rx="1.5" />
+    <path d="M7 6.5V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1.5" />
+    <path d="M3 11h14" />
+  </svg>
+);
+
+export default TripsIcon;
diff --git a/client/src/assets/icons/index.js b/client/src/assets/icons/index.js
@@ -0,0 +1,7 @@
+export { default as DashboardIcon } from "./DashboardIcon.jsx";
+export { default as TripsIcon } from "./TripsIcon.jsx";
+export { default as ItineraryIcon } from "./ItineraryIcon.jsx";
+export { default as BudgetIcon } from "./BudgetIcon.jsx";
+export { default as PackingIcon } from "./PackingIcon.jsx";
+export { default as ProfileIcon } from "./ProfileIcon.jsx";
+export { default as LogoutIcon } from "./LogoutIcon.jsx";
diff --git a/client/src/components/.gitkeep b/client/src/components/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder file to keep this empty folder tracked by git.
+# Delete this once real files are added here.
diff --git a/client/src/components/Sidebar.jsx b/client/src/components/Sidebar.jsx
@@ -0,0 +1,59 @@
+import { Link, useLocation } from "react-router-dom";
+import {
+  DashboardIcon,
+  TripsIcon,
+  ItineraryIcon,
+  BudgetIcon,
+  PackingIcon,
+  ProfileIcon,
+  LogoutIcon,
+} from "../assets/icons/index.js";
+import "../css/Sidebar.css";
+
+const NAV_ITEMS = [
+  { label: "Dashboard", path: "/dashboard", Icon: DashboardIcon },
+  { label: "My Trips", path: "/trips", Icon: TripsIcon },
+  { label: "Itinerary", path: "/itinerary", Icon: ItineraryIcon },
+  { label: "Budget", path: "/budget", Icon: BudgetIcon },
+  { label: "Packing List", path: "/packing-list", Icon: PackingIcon },
+  { label: "Profile", path: "/profile", Icon: ProfileIcon },
+];
+
+const Sidebar = () => {
+  const { pathname } = useLocation();
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar__brand">
+        <span className="sidebar__brand-mark" aria-hidden="true">
+          ✈
+        </span>
+        <span className="sidebar__brand-name">Ramblr</span>
+      </div>
+
+      <nav className="sidebar__nav">
+        {NAV_ITEMS.map(({ label, path, Icon }) => (
+          <Link
+            key={path}
+            to={path}
+            className={`sidebar__link${pathname === path ? " sidebar__link--active" : ""}`}
+          >
+            <span className="sidebar__icon">
+              <Icon />
+            </span>
+            {label}
+          </Link>
+        ))}
+      </nav>
+
+      <button type="button" className="sidebar__link sidebar__logout">
+        <span className="sidebar__icon">
+          <LogoutIcon />
+        </span>
+        Logout
+      </button>
+    </aside>
+  );
+};
+
+export default Sidebar;
diff --git a/client/src/css/.gitkeep b/client/src/css/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder file to keep this empty folder tracked by git.
+# Delete this once real files are added here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Placeholder file to keep this empty folder tracked by git.
		# Delete this once real files are added here.