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,29 @@ Backend:
 
 ## Features
 
-### [Name of Feature 1]
+### 1: Trips
 
-[short description goes here]
+Will store a list of all the trips the user has planned for in the user profile
 
-[gif goes here]
+### 2: Trip
 
-### [Name of Feature 2]
+Will display dates of trip, an itinerary of activities, packing list, and expenses of the trip
 
-[short description goes here]
+### 3: Activity
 
-[gif goes here]
+Will store the location and type of activity to be part of the trip itinerary
 
-### [Name of Feature 3]
+### 4: Expenses
 
-[short description goes here]
+Will add up the costs of all the activities planned + lodging + transportation to give user a summary of trip expenses
 
-[gif goes here]
+### 5: Packing List
 
-### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]
+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/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,99 @@
+import { Link, useLocation } from "react-router-dom";
+import "../css/Sidebar.css";
+
+// Simple inline stroke icons so the sidebar doesn't need an icon library dependency.
+const icons = {
+  dashboard: (
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <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>
+  ),
+  trips: (
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <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>
+  ),
+  itinerary: (
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <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>
+  ),
+  budget: (
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <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>
+  ),
+  packing: (
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <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>
+  ),
+  profile: (
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <circle cx="10" cy="7" r="3.2" />
+      <path d="M3.8 16.5a6.3 6.3 0 0 1 12.4 0" />
+    </svg>
+  ),
+  logout: (
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <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>
+  ),
+};
+
+const NAV_ITEMS = [
+  { label: "Dashboard", path: "/dashboard", icon: "dashboard" },
+  { label: "My Trips", path: "/trips", icon: "trips" },
+  { label: "Itinerary", path: "/itinerary", icon: "itinerary" },
+  { label: "Budget", path: "/budget", icon: "budget" },
+  { label: "Packing List", path: "/packing-list", icon: "packing" },
+  { label: "Profile", path: "/profile", icon: "profile" },
+];
+
+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">TripPlan</span>
+      </div>
+
+      <nav className="sidebar__nav">
+        {NAV_ITEMS.map((item) => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`sidebar__link${pathname === item.path ? " sidebar__link--active" : ""}`}
+          >
+            <span className="sidebar__icon">{icons[item.icon]}</span>
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+
+      <button type="button" className="sidebar__link sidebar__logout">
+        <span className="sidebar__icon">{icons.logout}</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.