Web103 Final Project

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env

AUTH_SIMULATION.md

@@ -0,0 +1,126 @@
+# Authentication Simulation Guide
+
+## Current Setup: Mock Authentication
+
+Since your teammate is working on real authentication, we've set up a **mock auth system** that simulates being logged in as "George Demo".
+
+## How It Works
+
+### 1. Mock Auth Context (`client/src/context/AuthContext.jsx`)
+- Simulates a logged-in user
+- Provides user data throughout the app
+- **Default user**: `george-demo-id` (change this to match your DB)
+
+### 2. Getting User Info Anywhere
+
+In any component:
+
+```jsx
+import { useAuth } from "../context/AuthContext";
+
+function MyComponent() {
+  const { user, isAuthenticated } = useAuth();
+
+  // user.id → "george-demo-id"
+  // user.username → "George Demo"
+  // user.email → "george@example.com"
+
+  // Use user.id when creating posts, joining groups, etc.
+  const createSomething = async () => {
+    await api.post("/something", {
+      user_id: user.id, // Uses George's ID
+      // ... other data
+    });
+  };
+}
+```
+
+### 3. Current Implementations
+
+**Posts** (`Home.jsx`):
+- ✅ Uses `user.id` when creating posts
+- Posts are attributed to "George Demo"
+
+## How to Change the Mock User
+
+Open `client/src/context/AuthContext.jsx` and update:
+
+```jsx
+const [user, setUser] = useState({
+  id: "YOUR_ACTUAL_USER_ID_FROM_DB", // ← Change this
+  username: "George Demo",
+  email: "george@example.com",
+});
+```
+
+**To find George's actual ID from Supabase:**
+1. Go to Supabase Dashboard
+2. Open the `user` table
+3. Find George Demo's row
+4. Copy the `id` value
+5. Paste it in the code above
+
+## When Real Auth is Ready
+
+Your teammate will replace the mock system with real authentication:
+
+1. **Login/Signup** will call real API endpoints
+2. **JWT token** will be stored in localStorage
+3. **Token** will be sent with every API request
+4. **Backend** will validate token and extract real user ID
+
+## What You Can Do Now
+
+You can implement features that require a logged-in user:
+
+- **Create posts** → Uses George's ID
+- **Join groups** → Add George to group members
+- **Send messages** → Attribute to George
+- **Like/comment** → Track George's interactions
+
+Just use `user.id` from the `useAuth()` hook everywhere!
+
+## Backend Side (Optional Enhancement)
+
+If you want the backend to validate the user, you could add middleware later:
+
+```javascript
+// server/middleware/auth.js (for future)
+export const authMiddleware = (req, res, next) => {
+  // For now, trust the user_id in the request
+  // Later: validate JWT token here
+  next();
+};
+```
+
+## Testing Different Users
+
+To test as a different user, change the ID in `AuthContext.jsx`:
+
+```jsx
+// Test as User 1
+const [user, setUser] = useState({
+  id: "user-1-id",
+  username: "User One",
+  // ...
+});
+
+// Test as User 2
+const [user, setUser] = useState({
+  id: "user-2-id",
+  username: "User Two",
+  // ...
+});
+```
+
+## Transition Plan
+
+When real auth is implemented:
+
+1. Keep `AuthContext.jsx` structure the same
+2. Replace mock `login()` with real API call
+3. Add token storage/retrieval
+4. Update `user` state from API response
+5. Add token to API requests (already set up in `api.js`)
+
+The rest of your code won't need to change! 🎉

INTEGRATION_README.md

@@ -0,0 +1,137 @@
+# Frontend-Backend Integration - Posts Feature
+
+## ✅ Completed Integration
+
+The frontend and backend are now connected for **Post CRUD operations**. All users (even unauthenticated) can create, read, update, and delete posts.
+
+## 🏗️ What Was Implemented
+
+### Backend (Already Complete)
+- ✅ Express server with CORS enabled
+- ✅ Supabase database integration
+- ✅ Full CRUD API endpoints at `/api/posts`
+  - `GET /api/posts` - Get all posts
+  - `GET /api/posts/:id` - Get single post
+  - `POST /api/posts` - Create new post
+  - `PUT /api/posts/:id` - Update post
+  - `DELETE /api/posts/:id` - Delete post
+
+### Frontend (Newly Added)
+- ✅ Axios installed and configured
+- ✅ API service layer created
+- ✅ Vite proxy configured
+- ✅ Post UI components integrated into Home page
+- ✅ Full CRUD operations in UI
+
+## 📁 New Files Created
+
+```
+client/
+├── .env                          # Environment variables
+├── src/
+│   ├── services/
+│   │   ├── api.js               # Axios base configuration
+│   │   └── postService.js       # Post API calls
+│   └── pages/
+│       └── Posts.css            # Post styling
+```
+
+## 🚀 How to Run
+
+### 1. Start the Backend Server
+```bash
+cd server
+npm install
+npm run dev
+```
+Server runs on: `http://localhost:3000`
+
+### 2. Start the Frontend
+```bash
+cd client
+npm install
+npm run dev
+```
+Client runs on: `http://localhost:5173`
+
+## 🎯 Features Implemented
+
+### Create Post
+- Fill in caption, content, and optional photo URL
+- Click "Post" button
+- Post is created in Supabase database
+
+### Read Posts
+- All posts automatically load when Home page opens
+- Posts display with user, timestamp, caption, content, and image
+
+### Update Post
+- Click "Edit" button on any post
+- Modify caption, content, or photo URL
+- Click "Update" to save changes
+
+### Delete Post
+- Click "Delete" button on any post
+- Confirm deletion in popup
+- Post is removed from database
+
+## 🔧 Post Data Structure
+
+Based on `server/tables/post.json`:
+```json
+{
+  "id": "auto-generated",
+  "user_id": "anonymous (for now)",
+  "photo_url": "optional image URL",
+  "caption": "post title/caption",
+  "content": "post body text",
+  "user_ids": {},
+  "group_limit": ""
+}
+```
+
+## 🌐 API Endpoints Used
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/posts` | Fetch all posts |
+| GET | `/api/posts/:id` | Fetch single post |
+| POST | `/api/posts` | Create new post |
+| PUT | `/api/posts/:id` | Update existing post |
+| DELETE | `/api/posts/:id` | Delete post |
+
+## 🎨 UI Location
+
+Posts are displayed on the **Home page** (`/home`) below the groups section.
+
+## ⚠️ Important Notes
+
+1. **Authentication is disabled** - As requested, anyone can create/edit/delete posts
+2. **Supabase must be configured** - Make sure `server/.env` has valid Supabase credentials
+3. **Proxy is configured** - Frontend `/api` calls are proxied to `http://localhost:3000`
+4. **Both servers must run** - Backend on port 3000, frontend on port 5173
+
+## 🔮 Next Steps (When Ready)
+
+- Add authentication (your teammate's work)
+- Restrict edit/delete to post owners
+- Add user profiles
+- Implement groups integration
+- Add real-time updates
+- Image upload functionality
+
+## 🐛 Troubleshooting
+
+### "Failed to load posts"
+- Ensure backend server is running on port 3000
+- Check Supabase credentials in `server/.env`
+- Verify `post` table exists in Supabase
+
+### "Network Error"
+- Backend server not running
+- Check console for CORS errors
+
+### Posts not showing after creation
+- Check browser console for errors
+- Verify Supabase table has correct schema
+- Check network tab to see API responses

README.md

@@ -1,46 +1,71 @@
-# [your app name here]
+# The Lexington Link 
 
 CodePath WEB103 Final Project
 
-Designed and developed by: [your names here]
+Designed and developed by: Evan Lu, James Chen, Eric Azayev
 
-🔗 Link to deployed app:
+🔗 Link to deployed app: 
 
-## About
+## About / Description and Purpose
 
-### Description and Purpose
+The Lexington Link is a full-stack web application designed exclusively for Hunter College students to combat social isolation and foster a more connected campus community.
+
+The app serves as a focused friend and hangout matching platform, moving beyond superficial connections by matching users based on shared academic courses, compatible majors, and preferred local hangout spots.
+
+The primary purpose is to provide students with the tools to easily:
+* Discover and connect with peers who share interests or classes.
+* Form and manage casual hangout groups for socializing, studying, or exploring the city.
+* Schedule and communicate plans within a safe, university-verified environment.
+
+By implementing essential features like school email verification, a familiar swipe interface, and robust Group Formation and Chat Functionality, The Lexington Link aims to directly address the high rates of student loneliness by making healthy, local social connection simple and intuitive.
 
-[text goes here]
 
 ### Inspiration
 
-[text goes here]
+* Majority of Hunter College students are anti-social, so this build to bridge connections and create a more healthy environment for college lifestyle. 
+* Dating Apps: swipe feature allows an easy experience for users. 
+* "More broadly, loneliness is a significant issue among college students in the U.S., with a survey indicating nearly two-thirds (64.7%) of college students report feeling lonely. This data highlights the mental health impact of loneliness, including psychological distress."  - ActiveMinds (Nonprofit organization)
 
 ## Tech Stack
 
-Frontend:
+Frontend: ReactJS, Tailwind CSS
 
-Backend:
+Backend: Express, Postgres
 
 ## Features
 
-### [Name of Feature 1]
+### User registration
+
+To connect with other students, users need to create an account with their email.
+
+### Profile creation
+
+✅Users can add personal details, their major, and favorite hangout spots to find compatible hangout buddies.
+<img width="1247" height="978" alt="profile_creation" src="https://github.com/user-attachments/assets/4379c7d0-7856-4d7b-ab10-79364e10ec19" />
+
+
+### Swipe Functionality
+
+Users can swipe for hangout buddies based on their courses, interests, location, or preferred hangout time.
+
+### Group formation
 
-[short description goes here]
+Users can form hangout groups, invite friends, and schedule hangout plans.
 
-[gif goes here]
+### Chat functionality
 
-### [Name of Feature 2]
+✅Users can chat with their hangout buddies and discuss their hangout plan. user has a list of GCIDs. When they open messages, they're shown all the gcs they're in.
+<img width="1915" height="966" alt="messages_page" src="https://github.com/user-attachments/assets/263c9eff-0ab9-48f8-86d9-3b35e02f8541" />
 
-[short description goes here]
 
-[gif goes here]
+### Home Functionality
 
-### [Name of Feature 3]
+✅Home can be used to view Clubs, posts.
+✅Brew Random Group in /home
+✅User can access messages from /home
+<img width="1890" height="982" alt="home_page" src="https://github.com/user-attachments/assets/8b018614-6c6d-46b6-bf64-a767ac8d4d1f" />
 
-[short description goes here]
 
-[gif goes here]
 
 ### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them]