⛓️ CNCT ⛓️

Demo Animation

CNCT shorter for connect is a website where FIU students can easily create and join plans — from volleyball or running to sparring and study groups. Each plan has a messaging thread for quick coordination and a “Who’s Going” list so everyone knows who’s in.

Overview 📝

Our App is going to be the cornerstone of social interaction of students wanting to come together and meet like minded indivduals who want to come together and overall CNCT (see what I did there :)). This app can be used for many things as described earlier so we want to cater to as many niche social groups as possible and honestly invite new people to find new hobbys because I know all you reading this can relate to this here, we as a society try to just come to school get to class and get out and this is supposed to invert the stigma that we have has people to get out of our comfort zones and try new things, see new faces and create new experiences.

TECH STACK 🦾

This is what we will use for this project

Frontend: React + Vite.js, TypeScript, TailwindCSS
Backend: Express (Node.js)
Authentication: Auth.js (formerly Next-Auth)
Database: Supabase (Postgres)
Image Storage: Supabase Storage
- Storage Endpoint: https://dzfnvmwepmukenpsdfsy.storage.supabase.co/storage/v1/s3
- Active Buckets: posts_picture, profile_pictures
- 📦 See SUPABASE_BUCKETS.md for bucket setup, RLS policies, and upload flows
Features 📲
- User Stores Data and being able to Log In to save changes, add friends and message others
- OverView of all the posts that will be available (Explore Page or Home Page)
- Being able to see who is going or who is CNCT'D (Under user post it will show 3 people that are going and users will be able to click on an additional "bubble" that will say a number ( 3 - the people actually going) and when they do it will expand and show the rest of the people who are going.)
- Resposive Designs that will be powered by Framer
- Using Profile Pictures under users posts to see whos going
- We plan to incorporate a messaging system that allows users to communicate privately, in addition to commenting under public posts. To maintain a safe and positive environment, we’ll implement moderation tools and safeguards that allow us to oversee user interactions and prevent misuse.

Setup

Cloning

  git clone https://github.com/duranmichael681/cnct.git
  cd cnct

Pulling

If You’ve Already Cloned the Repository:

Save or commit your current work! ONLY do this if you've made local changes that aren’t already pushed to GitHub!! This ensures you can restore your work if anything changes after pulling.

first you'll create and switch to a new branch, our lead will merge on github and delete the branch

git switch -c <branch name>

"git switch -c" creates a new branch and switches to it immediately.
Use a descriptive name (for example: feature/auth-setup, fix/readme-update, or setup/supabase).

git add .
git commit -m "Brief description of what you changed"

git add . → tells Git which files to include in the next commit.
git commit → saves a snapshot of your work with a short message.

git push -u origin <branch name>

Uploads your branch to GitHub so your lead can review and merge it.

Pull the latest updates from GitHub:

git pull origin main

Downloads and merges any new changes (like backend setup or README updates) from the main branch into your local project.

If you see any conflicts: Open VS Code’s Source Control panel (if using vscode) or terminal and review the conflicts carefully — keep your work and merge new updates when needed.

After pulling successfully Reinstall dependencies to make sure everything is up to date:

npm install

NOTES:

Do not delete or overwrite your .env or .env.local files. These contain your private keys and should remain local ONLY.
Frequently push important work and pull before starting new work to ensure you’re using the latest version of the project.
If you’re unsure or run into merge conflicts reach out to our lead, co-leads, or anyone in the group

Node.js

Install

This project requires Node.js to run. You can download it from the official site:

Node.js Downloads

To verify that Node.js is installed make sure to run:

node -v
npm -v

Frontend

  cd cnct
  npm i

After installing dependencies, follow these steps:

In the root folder, create a file named .env.local
Paste the following inside:

VITE_SUPABASE_URL=https://dzfnvmwepmukenpsdfsy.supabase.co
VITE_SUPABASE_ANON_KEY=<anon-key>

Save the file — this is used by the React (Vite) frontend to connect to Supabase.
This file should already be included in .gitignore, so it won’t be uploaded to GitHub.
- Double-check your .gitignore to make sure .env.local is listed.

NOTE: Co-leads (Jose or Jorge) will provide the anon key privately. DO NOT share this key publicly or commit it to the repository.

TailWind CSS

Follow this guide on the Tailwind website or you can watch this Youtube Video

Framer Motion

Framer Motion is a React library for animations, making it easy to create smooth, interactive UI effects.

Installation

Install it inside your project folder:

npm install framer-motion
# or
yarn add framer-motion

Backend (Backend Devs Only)

If you're working on backend tasks or need access to server logic, follow these steps:

Inside the /server folder, create a file named .env
Add the following lines:

SUPABASE_URL=https://dzfnvmwepmukenpsdfsy.supabase.co
SUPABASE_SERVICE_ROLE_KEY=<service-role-key>

Save the file — this connects the Express backend to Supabase.
Ensure your .env file is included in .gitignore so it's never uploaded to GitHub.

NOTE:

Co-leads (Jose or Jorge) will provide SERVICE_ROLE_KEY to backend devs!!
Frontend-only devs don't need this file. Your .env.local is enough.
The backend .env is used only for server routes and secure operations.
DO NOT share this key publicly or commit it to the repository.

Backend Architecture

We'll use a Layered Architecture approach. For our MVP, we'll start simple and add complexity as needed.

✅ MUST HAVE (MVP - Start Here)

Folder Structure:

server/
├── routes/           # API endpoints
├── controllers/      # Request handlers + business logic
├── middleware/
│   └── auth.js       # JWT authentication
├── config/
│   └── supabase.js   # Supabase client
└── server.js         # Entry point

Core Components:

Routes: Define API endpoints (posts, users, messages)
Controllers: Handle requests + Supabase calls directly
Auth Middleware: Simple JWT verification for protected routes
Supabase RLS: Let database handle basic permissions

Essential Middleware:

✅ Authentication: Verify Supabase JWT tokens
✅ Basic Error Handling: Try-catch blocks in controllers

Core API Endpoints:

POST /api/posts - Create event
GET /api/posts - Get all events
POST /api/posts/:id/join - Join an event
GET /api/messages/:threadId - Get messages
POST /api/messages - Send message

🟡 NICE TO HAVE (Add When Needed)

Add these layers as the app grows:

Services Layer: Separate business logic when it gets complex (waitlists, notifications)
Repositories Layer: Abstraction for database calls (easier testing)
Validation Middleware: Advanced input validation (Joi/Zod schemas)
Rate Limiting: Prevent spam (add when you have 100+ users)
Moderation Middleware: Content filtering (add if abuse becomes an issue)

Why wait?

Faster MVP development
Easier for team to learn
Add complexity only when you actually need it
Avoid over-engineering

Real-time features (attendee updates, live messaging) will use Supabase Realtime subscriptions.

📖 For detailed architecture docs, see BACKEND_ARCHITECTURE.md and https://excalidraw.com/#json=KLm8GHkA8p921qGEkOeuA,Lgf7R-EHszyTbOuSTMKYIg

Supabase Command Lines (CLI)

OPTIONAL

not needed but if you wanted to install for supabase commandlines
if installed, vscode code terminal can do commands that get sent directly to supabase

install for mac:

might have to install homebrew before

brew install supabase/tap/supabase

install for windows:

command for install, reach out to co-leads if it doesn't work

iwr https://supabase.com/cli/install/windows | iex

Example commands:

supabase login
supabase init
supabase db push
supabase start
supabase functions deploy

can be used to: Manage Supabase projects locally Run a local Supabase instance with Postgres Apply and generate SQL migrations Push/pull database schema Manage environment variables Deploy functions Handle secrets

Running the Project

Start Backend:

cd server
npm run dev

Backend runs at: http://localhost:5000

Start Frontend:

npm run dev

Frontend runs at: http://localhost:5174

🎨 Code Structure

Key Files

src/services/api.ts - All API calls to backend
src/services/storage.ts - File upload utilities
src/components/ui/UIComponents.tsx - Reusable UI components
src/components/ImageUpload.tsx - Image upload component
src/utils/helpers.ts - Utility functions
server/routes/ - Express API endpoints
server/routes/storage.js - File storage endpoints
server/API_DOCUMENTATION.md - Complete API reference
`INTEGRATION_GUIDE.m

Cnct

Install / Use

README