[V0_FILE]typescriptreact:file="app/head.tsx" isEdit="true" isMerged="true" export default function Head() { return ( <> MateU ) } [V0_FILE]json:file="public/manifest.json" isEdit="true" isMerged="true" { "name": "MateU", "short_name": "MateU", "start_url": "/", "scope": "/", "display": "standalone", "background_color": "#f8fafc", "theme_color": "#0ea5a8", "description": "Campus connection and matching app.", "icons": [ { "src": "/icons/icon-192.png", "type": "image/png", "sizes": "192x192", "purpose": "any maskable" }, { "src": "/icons/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" } ] } [V0_FILE]javascript:file="public/service-worker.js" isEdit="true" isMerged="true" const CACHE_NAME = "mateu-cache-v1" const PRECACHE_URLS = [ "/", "/register", "/feed", "/matches", "/profile", "/manifest.json", "/icons/icon-192.png", "/icons/icon-512.png", ] // Install: precache app shell self.addEventListener("install", (event) => { event.waitUntil( caches .open(CACHE_NAME) .then((cache) => cache.addAll(PRECACHE_URLS)) .then(() => self.skipWaiting()), ) }) // Activate: cleanup old caches self.addEventListener("activate", (event) => { event.waitUntil( caches .keys() .then((keys) => Promise.all(keys.map((k) => (k !== CACHE_NAME ? caches.delete(k) : null)))) .then(() => self.clients.claim()), ) }) // Fetch: cache-first for same-origin GET self.addEventListener("fetch", (event) => { const { request } = event if (request.method !== "GET" || new URL(request.url).origin !== self.location.origin) return event.respondWith( caches.match(request).then((cached) => { if (cached) return cached return fetch(request) .then((response) => { const copy = response.clone() caches.open(CACHE_NAME).then((cache) => cache.put(request, copy)) return response }) .catch(() => { if (request.mode === "navigate") return caches.match("/") }) }), ) }) [V0_FILE]typescript:file="lib/types.ts" isEdit="true" isMerged="true" export type Gender = "Male" | "Female" | "Other" export type Student = { id: string fullName: string age: number gender: Gender college: string course: string passingYear: number bio?: string photos: string[] // data URLs } export type Like = { fromId: string toId: string createdAt: number } export type Match = { id: string // stable id: aId__bId (sorted) aId: string bId: string createdAt: number } export type Message = { id: string matchId: string fromId: string text: string createdAt: number } [V0_FILE]typescriptreact:file="lib/store.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import type { Like, Match, Message, Student } from "./types" function useLocalStorage(key: string, initial: T) { const [value, setValue] = React.useState(() => { if (typeof window === "undefined") return initial try { const raw = window.localStorage.getItem(key) return raw ? (JSON.parse(raw) as T) : initial } catch { return initial } }) React.useEffect(() => { try { window.localStorage.setItem(key, JSON.stringify(value)) } catch {} }, [key, value]) return [value, setValue] as const } type StoreState = { students: Student[] currentUserId?: string likes: Like[] matches: Match[] messagesByMatch: Record } type StoreContext = StoreState & { registerStudent: (s: Omit) => Student setCurrentUser: (id: string) => void likeUser: (toId: string) => void passUser: (toId: string) => void getFeed: () => Student[] getCurrentUser: () => Student | undefined getMatchById: (id: string) => Match | undefined getOtherInMatch: (m: Match, meId: string) => string sendMessage: (matchId: string, text: string) => void } const Ctx = React.createContext(null) export function AppProvider({ children }: { children: React.ReactNode }) { const [state, setState] = useLocalStorage("mateu-state", { students: [], currentUserId: undefined, likes: [], matches: [], messagesByMatch: {}, }) const getCurrentUser = React.useCallback( () => state.students.find((s) => s.id === state.currentUserId), [state.students, state.currentUserId], ) const setCurrentUser = React.useCallback((id: string) => { setState((prev) => ({ ...prev, currentUserId: id })) }, []) const registerStudent = React.useCallback((s: Omit) => { const id = crypto.randomUUID() const entry: Student = { id, ...s } setState((prev) => ({ ...prev, students: [entry, ...prev.students], currentUserId: id, })) return entry }, []) const likeUser = React.useCallback( (toId: string) => { const me = getCurrentUser() if (!me) return const like: Like = { fromId: me.id, toId, createdAt: Date.now() } setState((prev) => { const likes = [...prev.likes, like] // mutual like? const mutual = likes.find((l) => l.fromId === toId && l.toId === me.id) let matches = prev.matches if (mutual) { const [a, b] = [me.id, toId].sort() const matchId = `${a}__${b}` if (!matches.some((m) => m.id === matchId)) { matches = [{ id: matchId, aId: a, bId: b, createdAt: Date.now() }, ...matches] } } return { ...prev, likes, matches } }) }, [getCurrentUser], ) const passUser = React.useCallback((_toId: string) => { // optional: store passes if needed later }, []) const getFeed = React.useCallback(() => { const me = getCurrentUser() if (!me) return state.students return state.students.filter((s) => s.id !== me.id) }, [getCurrentUser, state.students]) const getMatchById = React.useCallback((id: string) => state.matches.find((m) => m.id === id), [state.matches]) const getOtherInMatch = React.useCallback((m: Match, meId: string) => (m.aId === meId ? m.bId : m.aId), []) const sendMessage = React.useCallback( (matchId: string, text: string) => { const me = getCurrentUser() if (!me || !text.trim()) return const msg: Message = { id: crypto.randomUUID(), matchId, fromId: me.id, text: text.trim(), createdAt: Date.now(), } setState((prev) => { const list = prev.messagesByMatch[matchId] || [] return { ...prev, messagesByMatch: { ...prev.messagesByMatch, [matchId]: [...list, msg], }, } }) }, [getCurrentUser], ) const value: StoreContext = { ...state, registerStudent, setCurrentUser, likeUser, passUser, getFeed, getCurrentUser, getMatchById, getOtherInMatch, sendMessage, } return {children} } export function useApp() { const ctx = React.useContext(Ctx) if (!ctx) throw new Error("useApp must be used within AppProvider") return ctx } [V0_FILE]typescriptreact:file="components/bottom-nav.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Home, Users, Heart, User } from "lucide-react" import { cn } from "@/lib/utils" const items = [ { href: "/", label: "Home", icon: Home }, { href: "/feed", label: "Feed", icon: Users }, { href: "/matches", label: "Matches", icon: Heart }, { href: "/profile", label: "Profile", icon: User }, ] export function BottomNav() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="components/student-card.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Heart, X } from "lucide-react" import type { Student } from "@/lib/types" import { useApp } from "@/lib/store" export function StudentCard({ student }: { student: Student }) { const { likeUser, passUser } = useApp() return (

{student.photos?.[0] ? ( {`${student.fullName}

) : (

No photo

)}

{student.fullName}

{student.age} • {student.gender}

{student.college} • {student.course} • {student.passingYear}

{student.bio ?

{student.bio}

: null}

) } [V0_FILE]typescriptreact:file="hooks/use-pwa.ts" isEdit="true" isMerged="true" "use client" import React from "react" type BeforeInstallPromptEvent = Event & { prompt: () => Promise userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }> } export function usePWA() { const [deferred, setDeferred] = React.useState(null) const [installed, setInstalled] = React.useState(false) React.useEffect(() => { const onBIP = (e: Event) => { e.preventDefault() setDeferred(e as BeforeInstallPromptEvent) } const onInstalled = () => setInstalled(true) window.addEventListener("beforeinstallprompt", onBIP as any) window.addEventListener("appinstalled", onInstalled) return () => { window.removeEventListener("beforeinstallprompt", onBIP as any) window.removeEventListener("appinstalled", onInstalled) } }, []) const canInstall = !!deferred && !installed const install = async () => { if (!deferred) return await deferred.prompt() try { await deferred.userChoice } finally { setDeferred(null) } } return { canInstall, install, installed } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import dynamic from "next/dynamic" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { BottomNav } from "@/components/bottom-nav" import { usePWA } from "@/hooks/use-pwa" // react-qr-code needs window; use dynamic import to avoid SSR issues const QRCode = dynamic(() => import("react-qr-code").then((m) => m.default), { ssr: false }) export default function HomePage() { const { canInstall, install, installed } = usePWA() const registerUrl = typeof window !== "undefined" ? `${window.location.origin}/register` : "/register" return (

MateU

Connect with students around your campus.

Register via QR

Scan to open the registration page on your phone.

{canInstall && ( )} {installed && Installed}

Student Feed

Browse profiles and find matches.

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { BottomNav } from "@/components/bottom-nav" import { useApp } from "@/lib/store" import type { Gender } from "@/lib/types" export default function RegisterPage() { const { registerStudent } = useApp() const router = useRouter() const [fullName, setFullName] = React.useState("") const [age, setAge] = React.useState("") const [gender, setGender] = React.useState("Male") const [college, setCollege] = React.useState("") const [course, setCourse] = React.useState("") const [passingYear, setPassingYear] = React.useState("") const [bio, setBio] = React.useState("") const [photos, setPhotos] = React.useState([]) const onUpload = async (e: React.ChangeEvent) => { const files = e.target.files if (!files) return const selected = Array.from(files).slice(0, 2) const urls: string[] = [] for (const f of selected) { const data = await fileToDataURL(f) urls.push(data) } setPhotos(urls) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!fullName || !age || !college || !course || !passingYear) return registerStudent({ fullName, age: Number(age), gender, college, course, passingYear: Number(passingYear), bio: bio || undefined, photos, }) router.push("/feed") } return (

Join CampusConnect

Create your student profile to get started.

Full Name setFullName(e.target.value)} placeholder="Jane Doe" required />

Age setAge(e.target.value ? Number(e.target.value) : "")} required />

Gender

College Name setCollege(e.target.value)} placeholder="City University" required />

Course setCourse(e.target.value)} placeholder="Computer Science" required />

Passing Year

Short Bio (optional)

setBio(e.target.value)}
                  placeholder="A line about you..."
                />
              </div>

<div className="grid gap-2">
                <Label htmlFor="photo">Upload Photo (1–2 max)</Label>
                <Input id="photo" type="file" accept="image/*" multiple onChange={onUpload} />
                <p className="text-xs text-slate-500">Up to 2 photos are stored locally.</p>
                {photos.length > 0 && (
                  <div className="mt-2 grid grid-cols-2 gap-2">
                    {photos.map((src, i) => (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img
                        key={i}
                        src={src || "/placeholder.svg?height=96&width=160&query=preview"}
                        alt={`Preview ${i + 1}`}
                        className="h-24 w-full rounded-md object-cover"
                      />
                    ))}
                  </div>
                )}
              </div>

<Button type="submit" className="mt-2 bg-teal-600 hover:bg-teal-700">
                Submit
              </Button>
            </form>
          </CardContent>
        </Card>
      </section>

<BottomNav />
    </main>
  )
}

function fileToDataURL(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(String(reader.result))
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}
[V0_FILE]typescriptreact:file="app/feed/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useMemo } from "react"
import { BottomNav } from "@/components/bottom-nav"
import { StudentCard } from "@/components/student-card"
import { useApp } from "@/lib/store"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function FeedPage() {
  const { getFeed, getCurrentUser } = useApp()
  const me = getCurrentUser()
  const feed = useMemo(() => getFeed(), [getFeed])

return (
    <main className="mx-auto flex min-h-[100dvh] max-w-md flex-col bg-slate-50 pb-24">
      <header className="px-5 pt-6">
        <h1 className="text-pretty text-2xl font-bold text-slate-900">Student Feed</h1>
        <p className="mt-1 text-sm text-slate-600">
          {me ? `Browsing as ${me.fullName}` : "Create a profile to start browsing."}
        </p>
      </header>

<section className="px-5 pt-4">
        {!me ? (
          <Card className="rounded-xl border-slate-200">
            <CardContent className="p-4">
              <p className="text-sm text-slate-700">You need a profile to like or pass.</p>
              <div className="mt-3">
                <Link href="/register">
                  <Button className="w-full bg-teal-600 hover:bg-teal-700">Create Profile</Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        ) : feed.length === 0 ? (
          <p className="px-1 text-sm text-slate-600">No profiles yet. Ask friends to register!</p>
        ) : (
          <div className="grid gap-4">
            {feed.map((s) => (
              <StudentCard key={s.id} student={s} />
            ))}
          </div>
        )}
      </section>

<BottomNav />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/matches/page.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { BottomNav } from "@/components/bottom-nav"
import { useApp } from "@/lib/store"
import { Card, CardContent } from "@/components/ui/card"

export default function MatchesPage() {
  const { matches, students, getCurrentUser } = useApp()
  const me = getCurrentUser()
  const list = matches.filter((m) => me && (m.aId === me.id || m.bId === me.id))

return (
    <main className="mx-auto flex min-h-[100dvh] max-w-md flex-col bg-slate-50 pb-24">
      <header className="px-5 pt-6">
        <h1 className="text-pretty text-2xl font-bold text-slate-900">Matches</h1>
        <p className="mt-1 text-sm text-slate-600">Mutual likes appear here.</p>
      </header>

<section className="px-5 pt-4">
        {!me || list.length === 0 ? (
          <p className="text-sm text-slate-600">No matches yet.</p>
        ) : (
          <div className="grid gap-3">
            {list.map((m) => {
              const otherId = m.aId === me!.id ? m.bId : m.aId
              const other = students.find((s) => s.id === otherId)
              if (!other) return null
              return (
                <Link key={m.id} href={`/chat/${m.id}`}>
                  <Card className="rounded-xl border-slate-200 hover:bg-slate-50">
                    <CardContent className="flex items-center gap-3 p-3">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={other.photos?.[0] || "/placeholder.svg?height=48&width=48&query=avatar"}
                        alt={`${other.fullName} photo`}
                        className="h-12 w-12 rounded-full object-cover"
                      />
                      <div className="flex-1">
                        <div className="text-sm font-medium text-slate-900">{other.fullName}</div>
                        <div className="text-xs text-slate-600">{other.college}</div>
                      </div>
                      <div className="text-xs text-teal-700">Chat</div>
                    </CardContent>
                  </Card>
                </Link>
              )
            })}
          </div>
        )}
      </section>

<BottomNav />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/chat/[id]/page.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams, useRouter } from "next/navigation"
import { useApp } from "@/lib/store"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import { Input } from "@/components/ui/input"

export default function ChatPage() {
  const params = useParams<{ id: string }>()
  const matchId = params.id
  const router = useRouter()
  const { getMatchById, getCurrentUser, getOtherInMatch, students, messagesByMatch, sendMessage } = useApp()

const match = getMatchById(matchId)
  const me = getCurrentUser()
  const other = (() => {
    if (!match || !me) return undefined
    const otherId = getOtherInMatch(match, me.id)
    return students.find((s) => s.id === otherId)
  })()

const msgs = messagesByMatch[matchId] || []
  const [text, setText] = React.useState("")

React.useEffect(() => {
    const scroller = document.getElementById("chat-scroll")
    if (scroller) scroller.scrollTop = scroller.scrollHeight
  }, [msgs.length])

if (!match || !me || !other) {
    return (
      <main className="mx-auto flex min-h-[100dvh] max-w-md flex-col bg-slate-50">
        <header className="flex items-center gap-2 px-3 py-3">
          <Button variant="ghost" size="icon" onClick={() => router.back()} aria-label="Back">
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-lg font-semibold">Chat</h1>
        </header>
        <div className="px-4 text-sm text-slate-600">Match not found.</div>
      </main>
    )
  }

const onSend = () => {
    sendMessage(matchId, text)
    setText("")
  }

return (
    <main className="mx-auto flex min-h-[100dvh] max-w-md flex-col bg-slate-50">
      <header className="flex items-center gap-2 px-3 py-3">
        <Button variant="ghost" size="icon" onClick={() => router.back()} aria-label="Back">
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <div className="flex items-center gap-2">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={other.photos?.[0] || "/placeholder.svg?height=28&width=28&query=avatar"}
            alt={`${other.fullName} photo`}
            className="h-7 w-7 rounded-full object-cover"
          />
          <h1 className="text-base font-semibold text-slate-900">{other.fullName}</h1>
        </div>
      </header>

<Card className="mx-3 mb-24 flex-1 rounded-xl border-slate-200">
        <CardContent id="chat-scroll" className="h-[60vh] overflow-y-auto p-3">
          <div className="flex flex-col gap-2">
            {msgs.map((m) => {
              const mine = m.fromId === me.id
              return (
                <div key={m.id} className={`flex ${mine ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[75%] rounded-2xl px-3 py-2 text-sm ${
                      mine ? "bg-teal-600 text-white" : "bg-white text-slate-900 border border-slate-200"
                    }`}
                  >
                    {m.text}
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

<div className="fixed bottom-0 inset-x-0 mx-auto max-w-md border-t bg-white p-3">
        <div className="flex items-center gap-2">
          <Input
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Type a message"
            onKeyDown={(e) => {
              if (e.key === "Enter") onSend()
            }}
          />
          <Button onClick={onSend} className="bg-teal-600 hover:bg-teal-700">
            Send
          </Button>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { BottomNav } from "@/components/bottom-nav"
import { useApp } from "@/lib/store"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export default function ProfilePage() {
  const { getCurrentUser } = useApp()
  const me = getCurrentUser()

return (
    <main className="mx-auto flex min-h-[100dvh] max-w-md flex-col bg-slate-50 pb-24">
      <header className="px-5 pt-6">
        <h1 className="text-pretty text-2xl font-bold text-slate-900">Profile</h1>
        <p className="mt-1 text-sm text-slate-600">Your details</p>
      </header>

<section className="px-5 pt-4">
        {!me ? (
          <Card className="rounded-xl border-slate-200">
            <CardContent className="p-4">
              <p className="text-sm text-slate-700">No profile found.</p>
              <div className="mt-3">
                <Link href="/register">
                  <Button className="w-full bg-teal-600 hover:bg-teal-700">Create Profile</Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        ) : (
          <Card className="rounded-xl border-slate-200">
            <CardContent className="p-4">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={me.photos?.[0] || "/placeholder.svg?height=120&width=120&query=avatar"}
                alt="Profile photo"
                className="h-24 w-24 rounded-full object-cover"
              />
              <div className="mt-3">
                <h2 className="text-lg font-semibold text-slate-900">{me.fullName}</h2>
                <p className="text-sm text-slate-600">
                  {me.age} • {me.gender}
                </p>
                <p className="mt-1 text-sm text-slate-700">{me.college}</p>
                <p className="text-sm text-slate-700">
                  {me.course} • {me.passingYear}
                </p>
                {me.bio && <p className="mt-2 text-sm text-slate-600">{me.bio}</p>}
              </div>
            </CardContent>
          </Card>
        )}
      </section>

<BottomNav />
    </main>
  )
}
[V0_FILE]png:file="public/icons/icon-192.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icons/icon-192-SS8mklJRH37kGqVIJQwOn5vFjXf8k1.png" isMerged="true"
[V0_FILE]png:file="public/icons/icon-512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icons/icon-512-hjIje6TonlLTIvE3RRGXPmdb9TIgco.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/sw-register.tsx" isMerged="true"
"use client"

export function SWRegister() {
  if (typeof window !== "undefined" && "serviceWorker" in navigator) {
    // register on idle to avoid blocking hydration
    const register = () => navigator.serviceWorker.register("/service-worker.js").catch(() => {})
    if ("requestIdleCallback" in window) {
      ;(window as any).requestIdleCallback(register)
    } else {
      setTimeout(register, 0)
    }
  }
  return null
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { AppProvider } from "@/lib/store"
import { SWRegister } from "@/components/sw-register"
import { Suspense } from "react"

export const metadata: Metadata = {
  title: "v0 App",
  description: "Created with v0",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={null}>
          <AppProvider>
            {children}
            <SWRegister />
          </AppProvider>
        </Suspense>
        <Analytics />
      </body>
    </html>
  )
}</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This