diff --git a/.gitignore b/.gitignore
index cb319e2..a7bf959 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ with-nextjs/out
 
 # Websockets
 */backend/.env
+backend/.env
 
 # local env files
 */.env*.local
diff --git a/backend/.prettierrc b/backend/.prettierrc
new file mode 100644
index 0000000..5a05ecb
--- /dev/null
+++ b/backend/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}
diff --git a/backend/controllers/clubsController.js b/backend/controllers/clubsController.js
new file mode 100644
index 0000000..4cc4b10
--- /dev/null
+++ b/backend/controllers/clubsController.js
@@ -0,0 +1,88 @@
+import supabaseConnection from '../database.js';
+import clubs from '../models/clubs.js';
+
+const clubsController = {
+  getAllClubs: async (req, res) => {
+    try {
+      const data = await clubs.getAllClubs();
+      res.json(data);
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  },
+  getClubById: async (req, res) => {
+    try {
+      if (!req.params?.id) {
+        return res.status(400).json({ message: 'Club ID is required' });
+      }
+      const data = await clubs.getClubById(req.params.id);
+      if (!data) {
+        return res.status(404).json({ message: 'Club not found' });
+      }
+      res.json(data);
+    } catch (error) {
+      console.error('Error fetching clubs info:', error);
+      res.status(500).json({ message: 'Internal Server Error' });
+    }
+  },
+  getClubByAccountId: async (req, res) => {
+    try {
+      if (!req.params?.id) {
+        return res.status(400).json({ message: 'Club ID is required' });
+      }
+      const data = await clubs.getClubByAccountId(req.params.id);
+      if (!data) {
+        return res.status(404).json({ message: 'Club not found' });
+      }
+      res.json(data);
+    } catch (error) {
+      console.error('Error fetching clubs info:', error);
+      res.status(500).json({ message: 'Internal Server Error' });
+    }
+  },
+  updateClub: async (req, res) => {
+    try {
+      if (!req.params?.id) {
+        return res.status(400).json({ message: 'Club ID is required' });
+      }
+      const data = {};
+      const allowedFields = [
+        'name',
+        'location',
+        'campus',
+        'category',
+        'description',
+      ];
+      for (const field of allowedFields) {
+        if (req.body[field] !== undefined) {
+          data[field] = req.body[field];
+        }
+      }
+      await clubs.updateClubInfo(req.params.id, data);
+      res
+        .status(200)
+        .json({ message: 'Club information updated successfully', data });
+    } catch (error) {
+      console.error('Error updating club info:', error);
+      res.status(500).json({ message: 'Internal Server Error' });
+    }
+  },
+
+  getEventsClub: async (req, res) => {
+    try {
+      const clubId = req.params?.id;
+      if (!clubId) {
+        return res.status(400).json({ message: 'Club ID is required' });
+      }
+      const events = await supabaseConnection
+        .from('events')
+        .select('*')
+        .eq('hostClubId', clubId);
+      res.status(200).json(events);
+    } catch (error) {
+      console.error('Error updating club info:', error);
+      res.status(500).json({ message: 'Internal Server Error' });
+    }
+  },
+};
+export default clubsController;
diff --git a/backend/controllers/eventsController.js b/backend/controllers/eventsController.js
new file mode 100644
index 0000000..117690f
--- /dev/null
+++ b/backend/controllers/eventsController.js
@@ -0,0 +1,51 @@
+import supabaseConnection from '../database.js';
+
+export const createEvent = async (req, res) => {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method Not Allowed' });
+  }
+
+  const {
+    title,
+    description,
+    hostClubId,
+    startTimestamp,
+    endTimestamp,
+    event_status,
+  } = req.body;
+
+  const { data, error } = await supabaseConnection.from('events').insert([
+    {
+      title,
+      description,
+      hostClubId: '4', // Hardcoded for now
+      startTimestamp,
+      endTimestamp,
+      event_status,
+    },
+  ]);
+
+  if (error) {
+    return res.status(500).json({ error: error.message });
+  }
+
+  return res.status(201).json({ data });
+};
+
+export const getEvents = async (req, res) => {
+  const { data, error } = await supabaseConnection.from('events').select(`
+      *,
+      hostClub: clubs (
+        id,
+        name,
+        description,
+        verified
+      )
+    `);
+
+  if (error) {
+    return res.status(500).json({ error: error.message });
+  }
+
+  return res.json(data);
+};
diff --git a/backend/controllers/usersController.js b/backend/controllers/usersController.js
new file mode 100644
index 0000000..e69de29
diff --git a/backend/database.js b/backend/database.js
new file mode 100644
index 0000000..a2659c9
--- /dev/null
+++ b/backend/database.js
@@ -0,0 +1,9 @@
+import 'dotenv/config';
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseConnection = createClient(
+  process.env.EXPO_PUBLIC_SUPABASE_URL,
+  process.env.PRIVATE_API_KEY
+);
+
+export default supabaseConnection;
diff --git a/backend/eslint.config.mjs b/backend/eslint.config.mjs
new file mode 100644
index 0000000..468df2b
--- /dev/null
+++ b/backend/eslint.config.mjs
@@ -0,0 +1,25 @@
+// ESLint config for Node.js backend (CommonJS/ESM)
+export default [
+  {
+    files: ['**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        require: 'readonly',
+        module: 'readonly',
+        __dirname: 'readonly',
+        process: 'readonly',
+        console: 'readonly',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'warn',
+      'no-undef': 'error',
+      semi: ['error', 'always'],
+      quotes: ['error', 'single'],
+      eqeqeq: 'warn',
+    },
+    ignores: ['node_modules/*', 'dist/*'],
+  },
+];
diff --git a/backend/index.js b/backend/index.js
new file mode 100644
index 0000000..187e5ed
--- /dev/null
+++ b/backend/index.js
@@ -0,0 +1,44 @@
+import express from 'express';
+import cors from 'cors';
+import supabaseConnection from './database.js';
+import clubsRouter from './routes/clubsRouter.js';
+import { eventsRouter } from './routes/eventsRouter.js';
+
+const app = express();
+const PORT = 3000;
+
+app.use(express.json());
+
+app.get('/', (req, res) => {
+  res.send('API running');
+});
+
+// Middleware
+const corsConfig = {
+  origin: 'http://localhost:8081',
+  credentials: true,
+};
+
+app.use(cors(corsConfig));
+
+app.use('/api/events', eventsRouter);
+app.use('/api/clubs', clubsRouter);
+
+const testSupabase = async () => {
+  console.log('Testing Supabase connection...');
+
+  const { data, error } = await supabaseConnection.from('Test').select('*');
+
+  if (error) {
+    console.error('Supabase error:', error.message);
+  } else if (!data || data.length === 0) {
+    console.warn('No data found in Test table.');
+  } else {
+    console.log('Data from Supabase:', data);
+  }
+};
+
+testSupabase();
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});
diff --git a/backend/models/clubs.js b/backend/models/clubs.js
new file mode 100644
index 0000000..ffd47e6
--- /dev/null
+++ b/backend/models/clubs.js
@@ -0,0 +1,40 @@
+import supabaseConnection from '../database.js';
+
+const clubModel = {
+  getAllClubs: async () => {
+    const { data, error } = await supabaseConnection.from('clubs').select('*');
+    if (error) throw new Error(error.message);
+    return data || [];
+  },
+  getClubById: async (id) => {
+    const { data, error } = await supabaseConnection
+      .from('clubs')
+      .select('*')
+      .eq('id', id)
+      .maybeSingle();
+    if (error) throw new Error(error.message);
+    return data;
+  },
+  getClubByAccountId: async (accountId) => {
+    const { data, error } = await supabaseConnection
+      .from('clubs')
+      .select('*')
+      .eq('accountId', accountId)
+      .maybeSingle();
+    if (error) throw new Error(error.message);
+    return data;
+  },
+  updateClubInfo: async (id, updateData) => {
+    const { data, error } = await supabaseConnection
+      .from('clubs')
+      .update(updateData)
+      .eq('accountId', id);
+
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data;
+  },
+};
+
+export default clubModel;
diff --git a/backend/models/user.js b/backend/models/user.js
new file mode 100644
index 0000000..e69de29
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..76cb6a0
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint . --config eslint.config.mjs --fix",
+    "format": "prettier --write ."
+  },
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@supabase/supabase-js": "^2.50.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.5.0",
+    "express": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/next": "^8.0.7",
+    "eslint": "^9.29.0",
+    "next": "^15.3.3",
+    "prettier": "^3.5.3"
+  }
+}
diff --git a/backend/routes/clubsRouter.js b/backend/routes/clubsRouter.js
new file mode 100644
index 0000000..47052b1
--- /dev/null
+++ b/backend/routes/clubsRouter.js
@@ -0,0 +1,12 @@
+import { Router } from 'express';
+import clubsController from '../controllers/clubsController.js';
+
+const router = Router();
+
+router.get('/', clubsController.getAllClubs);
+router.get('/me/:id', clubsController.getClubByAccountId);
+router.get('/:id', clubsController.getClubById);
+router.patch('/:id', clubsController.updateClub);
+router.get('/:id/events', clubsController.getEventsClub);
+
+export default router;
diff --git a/backend/routes/eventsRouter.js b/backend/routes/eventsRouter.js
new file mode 100644
index 0000000..46624e3
--- /dev/null
+++ b/backend/routes/eventsRouter.js
@@ -0,0 +1,7 @@
+import express from 'express';
+import { createEvent, getEvents } from '../controllers/eventsController.js';
+
+export const eventsRouter = express.Router();
+
+eventsRouter.post('/createEvent', createEvent);
+eventsRouter.get('/', getEvents);
diff --git a/backend/routes/usersRouter.js b/backend/routes/usersRouter.js
new file mode 100644
index 0000000..e69de29
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..f69a872
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,13 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import { defineConfig } from "eslint/config";
+
+
+export default defineConfig([
+  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
+  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: globals.browser } },
+  tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+]);
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..acf3c2e
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+.env
+# typescript
+*.tsbuildinfo
+
+.vscode
+
+app-example
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
new file mode 100644
index 0000000..5a05ecb
--- /dev/null
+++ b/frontend/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..48dd63f
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
diff --git a/frontend/app.json b/frontend/app.json
new file mode 100644
index 0000000..5904589
--- /dev/null
+++ b/frontend/app.json
@@ -0,0 +1,43 @@
+{
+  "expo": {
+    "name": "frontend",
+    "slug": "frontend",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "frontend",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "package": "com.bobth.frontend"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
diff --git a/frontend/app/(home)/index.tsx b/frontend/app/(home)/index.tsx
new file mode 100644
index 0000000..59786f7
--- /dev/null
+++ b/frontend/app/(home)/index.tsx
@@ -0,0 +1,23 @@
+import 'react-native-url-polyfill/auto';
+import { useState, useEffect } from 'react';
+import { supabase } from '../../lib/supabase';
+import Auth from '../../components/Auth';
+import { View, Text } from 'react-native';
+import { Session } from '@supabase/supabase-js';
+export default function App() {
+  const [session, setSession] = useState<Session | null>(null);
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+    });
+    supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
+  }, []);
+  return (
+    <View>
+      <Auth />
+      {session && session.user && <Text>{session.user.id}</Text>}
+    </View>
+  );
+}
diff --git a/frontend/app/_layout.tsx b/frontend/app/_layout.tsx
new file mode 100644
index 0000000..4c2adfc
--- /dev/null
+++ b/frontend/app/_layout.tsx
@@ -0,0 +1,22 @@
+import { Stack, useRouter } from 'expo-router';
+import { TouchableOpacity, Text } from 'react-native';
+import { AuthProvider } from '../context/AuthContext';
+import { HeaderRight } from '../components/home/HeaderRight';
+
+export default function RootLayout() {
+  const router = useRouter();
+
+  return (
+    <AuthProvider>
+      <Stack
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: 'black',
+          },
+          headerTintColor: '#fff',
+          headerRight: () => <HeaderRight />,
+        }}
+      />
+    </AuthProvider>
+  );
+}
diff --git a/frontend/app/auth/login/index.tsx b/frontend/app/auth/login/index.tsx
new file mode 100644
index 0000000..17d96fd
--- /dev/null
+++ b/frontend/app/auth/login/index.tsx
@@ -0,0 +1,10 @@
+import 'react-native-url-polyfill/auto';
+import Login from '../../../components/login/Login';
+import { View, Text } from 'react-native';
+export default function App() {
+  return (
+    <View>
+      <Login />
+    </View>
+  );
+}
diff --git a/frontend/app/auth/signup/index.tsx b/frontend/app/auth/signup/index.tsx
new file mode 100644
index 0000000..bd58b14
--- /dev/null
+++ b/frontend/app/auth/signup/index.tsx
@@ -0,0 +1,10 @@
+import 'react-native-url-polyfill/auto';
+import SignUp from '../../../components/signup/SignUp';
+import { View, Text } from 'react-native';
+export default function App() {
+  return (
+    <View>
+      <SignUp />
+    </View>
+  );
+}
diff --git a/frontend/app/club/[id].tsx b/frontend/app/club/[id].tsx
new file mode 100644
index 0000000..761a99f
--- /dev/null
+++ b/frontend/app/club/[id].tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import ClubPageUserView from '../../components/club/ClubPageUserView';
+import { useLocalSearchParams } from 'expo-router';
+
+export default function ClubPage() {
+  const { id } = useLocalSearchParams();
+  return <ClubPageUserView clubId={id} />;
+}
diff --git a/frontend/app/club/edit_club_info.tsx b/frontend/app/club/edit_club_info.tsx
new file mode 100644
index 0000000..4317054
--- /dev/null
+++ b/frontend/app/club/edit_club_info.tsx
@@ -0,0 +1,33 @@
+import { Text, View } from 'react-native';
+import { EditClub } from '../../components/club/EditClub';
+import { useAuth } from '../../context/AuthContext';
+
+export default function Club() {
+  const { session, accountType } = useAuth();
+  if (!session || !session.user || accountType !== 'club') {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
+          You must be logged in as a club to edit your club information.
+        </Text>
+      </View>
+    );
+  }
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <EditClub />
+    </View>
+  );
+}
diff --git a/frontend/app/club/index.tsx b/frontend/app/club/index.tsx
new file mode 100644
index 0000000..5b801b6
--- /dev/null
+++ b/frontend/app/club/index.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+import { useRouter } from 'expo-router';
+
+export default function ClubsList() {
+  const [clubs, setClubs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+
+  useEffect(() => {
+    fetch('http://localhost:3000/api/clubs')
+      .then((res) => res.json())
+      .then((data) => {
+        setClubs(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading)
+    return <ActivityIndicator size="large" style={{ marginTop: 50 }} />;
+
+  return (
+    <ScrollView style={{ padding: 20 }}>
+      <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 16 }}>
+        Clubs
+      </Text>
+      {clubs.map((club) => (
+        <TouchableOpacity
+          key={club.id}
+          style={{
+            padding: 16,
+            borderBottomWidth: 1,
+            borderBottomColor: '#eee',
+          }}
+          onPress={() => router.push(`/club/${club.id}`)}
+        >
+          <Text style={{ fontSize: 18 }}>{club.name}</Text>
+        </TouchableOpacity>
+      ))}
+    </ScrollView>
+  );
+}
diff --git a/frontend/app/create-event/index.tsx b/frontend/app/create-event/index.tsx
new file mode 100644
index 0000000..1eba1da
--- /dev/null
+++ b/frontend/app/create-event/index.tsx
@@ -0,0 +1,49 @@
+import EventForm from '../../components/Events/EventForm';
+import { useAuth } from '../../context/AuthContext';
+import { useRouter } from 'expo-router';
+import { useEffect, useState } from 'react';
+import ErrorPage from '../../components/ErrorPage';
+
+export default function CreateEventPage() {
+  const { accountType } = useAuth();
+  const router = useRouter();
+  const [showDenied, setShowDenied] = useState(false);
+
+  useEffect(() => {
+    if (accountType && accountType !== 'club') {
+      setShowDenied(true);
+    }
+  }, [accountType]);
+
+  if (!accountType) {
+    return null;
+  }
+
+  if (showDenied) {
+    return (
+      <ErrorPage
+        message="You can't access this page."
+        buttonText="Go back home"
+        imageUrl="https://cdn-icons-png.flaticon.com/512/463/463612.png"
+      />
+    );
+  }
+
+  return (
+    <div style={{ padding: '2rem' }}>
+      <h1
+        style={{
+          fontSize: '2rem',
+          fontWeight: 700,
+          marginBottom: '1.5rem',
+          color: '#1e293b',
+          textAlign: 'center',
+          width: '100%',
+        }}
+      >
+        Create Event
+      </h1>
+      <EventForm />
+    </div>
+  );
+}
diff --git a/frontend/app/dashboard/index.tsx b/frontend/app/dashboard/index.tsx
new file mode 100644
index 0000000..a821e09
--- /dev/null
+++ b/frontend/app/dashboard/index.tsx
@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react';
+import { FlatList, Text, View } from 'react-native';
+import { useAuth } from '@/context';
+import ClubDashboardEventsList from '../../components/club/dashboard/ClubDashboardEventsList';
+export default function Dashboard() {
+  return (
+    <View>
+      <ClubDashboardEventsList clubId={4} />
+    </View>
+  );
+}
diff --git a/frontend/app/index.tsx b/frontend/app/index.tsx
new file mode 100644
index 0000000..7410f05
--- /dev/null
+++ b/frontend/app/index.tsx
@@ -0,0 +1,31 @@
+import { Text, View } from 'react-native';
+import { useAuth } from '../context/AuthContext';
+import Feed from '../components/feed/feed.js';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function Index() {
+  const { session, accountType } = useAuth();
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View style={{ flex: 1, padding: 16 }}>
+        {session && session.user ? (
+          <>
+            <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
+              Welcome, {session.user.email}!
+            </Text>
+            <Text style={{ fontSize: 16, marginBottom: 12 }}>
+              Account Type:{' '}
+              {accountType === 'club' ? 'Club Account' : 'User Account'}
+            </Text>
+            <Feed />
+          </>
+        ) : (
+          <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
+            Please log in or sign up.
+          </Text>
+        )}
+      </View>
+    </SafeAreaView>
+  );
+}
diff --git a/frontend/assets/fonts/SpaceMono-Regular.ttf b/frontend/assets/fonts/SpaceMono-Regular.ttf
new file mode 100644
index 0000000..28d7ff7
Binary files /dev/null and b/frontend/assets/fonts/SpaceMono-Regular.ttf differ
diff --git a/frontend/assets/images/adaptive-icon.png b/frontend/assets/images/adaptive-icon.png
new file mode 100644
index 0000000..03d6f6b
Binary files /dev/null and b/frontend/assets/images/adaptive-icon.png differ
diff --git a/frontend/assets/images/favicon.png b/frontend/assets/images/favicon.png
new file mode 100644
index 0000000..e75f697
Binary files /dev/null and b/frontend/assets/images/favicon.png differ
diff --git a/frontend/assets/images/icon.png b/frontend/assets/images/icon.png
new file mode 100644
index 0000000..a0b1526
Binary files /dev/null and b/frontend/assets/images/icon.png differ
diff --git a/frontend/assets/images/partial-react-logo.png b/frontend/assets/images/partial-react-logo.png
new file mode 100644
index 0000000..66fd957
Binary files /dev/null and b/frontend/assets/images/partial-react-logo.png differ
diff --git a/frontend/assets/images/react-logo.png b/frontend/assets/images/react-logo.png
new file mode 100644
index 0000000..9d72a9f
Binary files /dev/null and b/frontend/assets/images/react-logo.png differ
diff --git a/frontend/assets/images/react-logo@2x.png b/frontend/assets/images/react-logo@2x.png
new file mode 100644
index 0000000..2229b13
Binary files /dev/null and b/frontend/assets/images/react-logo@2x.png differ
diff --git a/frontend/assets/images/react-logo@3x.png b/frontend/assets/images/react-logo@3x.png
new file mode 100644
index 0000000..a99b203
Binary files /dev/null and b/frontend/assets/images/react-logo@3x.png differ
diff --git a/frontend/assets/images/splash-icon.png b/frontend/assets/images/splash-icon.png
new file mode 100644
index 0000000..03d6f6b
Binary files /dev/null and b/frontend/assets/images/splash-icon.png differ
diff --git a/frontend/components/Auth.tsx b/frontend/components/Auth.tsx
new file mode 100644
index 0000000..5e37ffb
--- /dev/null
+++ b/frontend/components/Auth.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+import { supabase } from '../lib/supabase';
+import { Button, Input, CheckBox } from '@rneui/base';
+
+export default function Auth() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function signInWithEmail() {
+    setLoading(true);
+    const { error } = await supabase.auth.signInWithPassword({
+      email: email,
+      password: password,
+    });
+
+    if (error) {
+      console.log('Supabase Auth Error:', error);
+      Alert.alert(
+        'Error',
+        `${error.message}\nStatus: ${error.status || ''}\n${JSON.stringify(error)}`
+      );
+    }
+    setLoading(false);
+  }
+
+  async function signUpWithEmail() {
+    setLoading(true);
+    const {
+      data: { session },
+      error,
+    } = await supabase.auth.signUp({
+      email: email,
+      password: password,
+    });
+
+    if (error) {
+      console.log('Supabase Auth Error:', error);
+      Alert.alert(
+        'Error',
+        `${error.message}\nStatus: ${error.status || ''}\n${JSON.stringify(error)}`
+      );
+    }
+    if (!session)
+      Alert.alert('Please check your inbox for email verification!');
+    setLoading(false);
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Input
+          label="Email"
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+          onChangeText={(text) => setEmail(text)}
+          value={email}
+          placeholder="email@address.com"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Input
+          label={'Password'}
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+          onChangeText={(text) => setPassword(text)}
+          value={password}
+          secureTextEntry={true}
+          placeholder="Password"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Button
+          title={`Sign in`}
+          disabled={loading}
+          onPress={() => signInWithEmail()}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Button
+          title={`Sign up`}
+          disabled={loading}
+          onPress={() => signUpWithEmail()}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 40,
+    padding: 12,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+  mt20: {
+    marginTop: 20,
+  },
+});
diff --git a/frontend/components/ErrorPage.tsx b/frontend/components/ErrorPage.tsx
new file mode 100644
index 0000000..0a27444
--- /dev/null
+++ b/frontend/components/ErrorPage.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useRouter } from 'expo-router';
+
+export default function ErrorPage({
+  message = "You can't access this page.",
+  buttonText = 'Go back home',
+  imageUrl,
+}: {
+  message?: string;
+  buttonText?: string;
+  imageUrl?: string;
+}) {
+  const router = useRouter();
+  return (
+    <div
+      style={{
+        padding: '2rem',
+        color: 'black',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '60vh',
+      }}
+    >
+      {imageUrl && (
+        <img
+          src={imageUrl}
+          alt="Error"
+          style={{ maxWidth: 200, marginBottom: '1.5rem' }}
+        />
+      )}
+      <h2 style={{ textAlign: 'center' }}>{message}</h2>
+      <button
+        style={{
+          marginTop: '1rem',
+          padding: '0.5rem 1.5rem',
+          fontSize: '1rem',
+          cursor: 'pointer',
+        }}
+        onClick={() => router.replace('/')}
+      >
+        {buttonText}
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/components/Events/ClubEventCard.js b/frontend/components/Events/ClubEventCard.js
new file mode 100644
index 0000000..98954f4
--- /dev/null
+++ b/frontend/components/Events/ClubEventCard.js
@@ -0,0 +1,16 @@
+import { Button, Text, View } from 'react-native';
+
+export function ClubEventCard({ data }) {
+  const { title, description } = data;
+  return (
+    <View>
+      <Text>{data.title}</Text>
+      <Text>{data.description}</Text>
+      <Text>{data.attendeesCount} Attendees</Text>
+      {/* More detailed info */}
+      <Button title="Edit" />
+      <Button title="Delete" />
+      <Button title="View Attendees" />
+    </View>
+  );
+}
diff --git a/frontend/components/Events/EventForm.tsx b/frontend/components/Events/EventForm.tsx
new file mode 100644
index 0000000..74118d5
--- /dev/null
+++ b/frontend/components/Events/EventForm.tsx
@@ -0,0 +1,136 @@
+import { useState } from 'react';
+export default function CreateEventPage() {
+  const [form, setForm] = useState({
+    title: '',
+    description: '',
+    startTimestamp: '',
+    endTimestamp: '',
+    event_status: 'unknown',
+  });
+  const [endTimeError, setEndTimeError] = useState('');
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => {
+    const { name, value } = e.target;
+    const updatedForm = { ...form, [name]: value };
+    setForm(updatedForm);
+    if (name === 'startTimestamp' || name === 'endTimestamp') {
+      if (updatedForm.startTimestamp && updatedForm.endTimestamp) {
+        const start = new Date(updatedForm.startTimestamp);
+        const end = new Date(updatedForm.endTimestamp);
+        if (end <= start) {
+          setEndTimeError('End time must be after start time.');
+        } else {
+          setEndTimeError('');
+        }
+      } else {
+        setEndTimeError('');
+      }
+    }
+  };
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const res = await fetch('http://localhost:3000/api/events/createEvent', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(form),
+    });
+
+    const data = await res.json();
+    if (res.ok) {
+      alert('Event created!');
+    } else {
+      alert('Failed to create event: ' + data.error);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        paddingTop: '2rem',
+      }}
+    >
+      <form
+        onSubmit={handleSubmit}
+        style={{
+          display: 'grid',
+          gap: '1rem',
+          maxWidth: '400px',
+          width: '100%',
+        }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <label htmlFor="title">Event Title</label>
+          <input
+            id="title"
+            name="title"
+            placeholder="Title"
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <label htmlFor="description">Event Description</label>
+          <textarea
+            id="description"
+            name="description"
+            placeholder="Description"
+            onChange={handleChange}
+          />
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <label htmlFor="startTimestamp">Event Start Time</label>
+          <input
+            id="startTimestamp"
+            name="startTimestamp"
+            type="datetime-local"
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <label htmlFor="endTimestamp">Event End Time</label>
+          <input
+            id="endTimestamp"
+            name="endTimestamp"
+            type="datetime-local"
+            onChange={handleChange}
+            required
+          />
+          {endTimeError && (
+            <div style={{ color: 'red', fontSize: '0.875rem' }}>
+              {endTimeError}
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <label htmlFor="event_status">Event Status</label>
+          <select
+            id="event_status"
+            name="event_status"
+            value={form.event_status}
+            onChange={handleChange}
+            required
+          >
+            <option value="unknown">Unknown</option>
+            <option value="confirmed">Confirmed</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+        </div>
+
+        <button type="submit" disabled={!!endTimeError}>
+          Create Event
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/components/club/ClubPageUserView.js b/frontend/components/club/ClubPageUserView.js
new file mode 100644
index 0000000..7a30eb4
--- /dev/null
+++ b/frontend/components/club/ClubPageUserView.js
@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+
+function ClubPageUserView({ clubId }) {
+  const [club, setClub] = useState(null);
+
+  useEffect(() => {
+    fetch(`http://localhost:3000/api/clubs/${clubId}`)
+      .then((res) => res.json())
+      .then((data) => setClub(data));
+  }, [clubId]);
+
+  if (!club) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <h1>{club.name}</h1>
+      <p>{club.description}</p>
+      <p>Campus: {club.campus}</p>
+      <p>Founded: {club.foundingDate}</p>
+      <p>Location: {club.location}</p>
+      <p>Category: {club.category}</p>
+    </div>
+  );
+}
+
+export default ClubPageUserView;
diff --git a/frontend/components/club/EditClub.js b/frontend/components/club/EditClub.js
new file mode 100644
index 0000000..0e79f03
--- /dev/null
+++ b/frontend/components/club/EditClub.js
@@ -0,0 +1,184 @@
+import { useState, useEffect } from 'react';
+import { Text, View, TextInput } from 'react-native';
+import { useAuth } from '../../context/AuthContext';
+
+export const EditClub = () => {
+  const { session } = useAuth();
+  const [inputHeight, setInputHeight] = useState(0);
+  const [clubData, setClubData] = useState(null);
+  const [hover, setHover] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchClubData = async (id) => {
+    try {
+      fetch(`http://localhost:3000/api/clubs/me/${session.user.id}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          setClubData({
+            name: data.name,
+            location: data.location,
+            campus: data.campus,
+            category: data.category,
+            description: data.description,
+          });
+        });
+    } catch (error) {
+      console.error('Error fetching club data:', error);
+    }
+  };
+
+  const updateClubDataShown = (keyToUpdate, updatedValue) => {
+    setClubData((prevData) => ({
+      ...prevData,
+      [keyToUpdate]: updatedValue,
+    }));
+    // No API call here, just update the state for immediate UI feedback
+  };
+
+  const updateClubData = async (keyToUpdate, updatedValue) => {
+    setError(null);
+    fetch(`http://localhost:3000/api/clubs/${session.user.id}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(clubData),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Failed to update club data');
+        }
+        return response.json();
+      })
+      .then((data) => {
+        alert('Club data updated successfully');
+        fetchClubData(clubData.id);
+      })
+      .catch((error) => {
+        console.error('Error updating club data:', error);
+        setError('Failed to update club data');
+      });
+  };
+
+  useEffect(() => {
+    if (session && session.user && session.user.id) {
+      fetchClubData(session.user.id);
+    }
+  }, [session]);
+
+  const buttonStyle = {
+    color: '#555',
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    textAlign: 'center',
+    backgroundColor: hover ? '#e0e0e0' : '#f0f0f0',
+    borderRadius: 4,
+  };
+
+  const campuses = ['UTSG', 'UTSC', 'UTM'];
+
+  return (
+    <View style={{ flex: 1 }}>
+      {clubData ? (
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: '#ccc',
+            borderRadius: 8,
+            padding: 16,
+            marginVertical: 8,
+            backgroundColor: '#fafafa',
+          }}
+        >
+          <TextInput
+            style={{ marginTop: 8, color: '#555', fontWeight: 'bold' }}
+            value={clubData.name}
+            onChangeText={(text) => updateClubDataShown('name', text)}
+          />
+          <View
+            style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center' }}
+          >
+            <Text style={{ color: '#555' }}>Location: </Text>
+            <TextInput
+              style={{ color: '#555' }}
+              value={clubData.location}
+              onChangeText={(text) => updateClubDataShown('location', text)}
+            />
+          </View>
+          <View
+            style={{ marginTop: 8, flexDirection: 'row', alignItems: 'end' }}
+          >
+            <Text style={{ color: '#555' }}>Campus: </Text>
+            <select
+              style={{
+                color: '#555',
+                border: '1px solid #ccc',
+                borderRadius: 4,
+                outline: 'none',
+              }}
+              value={clubData.campus}
+              onChange={(text) =>
+                updateClubDataShown('campus', text.target.value)
+              }
+            >
+              {campuses.map((campus) => (
+                <option key={campus} value={campus}>
+                  {campus}
+                </option>
+              ))}
+            </select>
+          </View>
+          <View
+            style={{ flexDirection: 'row', marginTop: 8, alignItems: 'center' }}
+          >
+            <Text style={{ color: '#555' }}>Category: </Text>
+            <TextInput
+              style={{ color: '#555' }}
+              value={clubData.category}
+              onChangeText={(text) => updateClubDataShown('category', text)}
+            />
+          </View>
+          <TextInput
+            style={{
+              marginTop: 8,
+              width: 400,
+              height: Math.max(inputHeight, 0),
+              color: '#555',
+            }}
+            value={clubData.description}
+            onChangeText={(text) => updateClubDataShown('description', text)}
+            multiline
+            onContentSizeChange={(e) =>
+              setInputHeight(e.nativeEvent.contentSize.height)
+            }
+          />
+          <Text
+            style={buttonStyle}
+            onPress={() => {
+              updateClubData();
+            }}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+          >
+            Save Changes
+          </Text>
+        </View>
+      ) : (
+        <View
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+        >
+          <Text>Loading...</Text>
+        </View>
+      )}
+      {error && (
+        <Text style={{ color: 'red', textAlign: 'center' }}>{error}</Text>
+      )}
+    </View>
+  );
+};
diff --git a/frontend/components/club/dashboard/ClubDashboardEventCard.js b/frontend/components/club/dashboard/ClubDashboardEventCard.js
new file mode 100644
index 0000000..2ab69b2
--- /dev/null
+++ b/frontend/components/club/dashboard/ClubDashboardEventCard.js
@@ -0,0 +1,79 @@
+import {
+  Button,
+  Text,
+  TouchableHighlight,
+  View,
+  StyleSheet,
+} from 'react-native';
+
+export function ClubDashboardEventCard({ data }) {
+  const { id, title, description, startTimestamp, endTimestamp } = data;
+
+  const handleEdit = (e) => {
+    console.log('trying to edit event:' + id);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.infoContainer}>
+        <View style={styles.headerContainer}>
+          <Text style={styles.title}>{title}</Text>
+        </View>
+        <Text style={styles.description}>{description}</Text>
+        <Text style={styles.timestamp}>
+          {formatTimestamp(startTimestamp)} - {formatTimestamp(endTimestamp)}
+        </Text>
+      </View>
+      <TouchableHighlight onPress={handleEdit}>
+        <Text>Edit</Text>
+      </TouchableHighlight>
+    </View>
+  );
+}
+
+function formatTimestamp(ts) {
+  const date = new Date(ts);
+  return date.toLocaleString();
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    backgroundColor: '#fff',
+    marginVertical: 6,
+    marginHorizontal: 12,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    alignSelf: 'stretch',
+  },
+  headerContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+    alignItems: 'center',
+    marginBottom: 4,
+
+    fontSize: 30,
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  subtitle: {
+    fontWeight: 'bold',
+    color: 'grey',
+  },
+  description: {
+    fontSize: 14,
+    color: '#444',
+    marginBottom: 6,
+  },
+  timestamp: {
+    fontSize: 12,
+    color: '#888',
+  },
+});
diff --git a/frontend/components/club/dashboard/ClubDashboardEventsList.js b/frontend/components/club/dashboard/ClubDashboardEventsList.js
new file mode 100644
index 0000000..838a1b9
--- /dev/null
+++ b/frontend/components/club/dashboard/ClubDashboardEventsList.js
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { View, Text, FlatList } from 'react-native';
+import { ClubDashboardEventCard } from './ClubDashboardEventCard';
+
+//TODO: make it so this page is ONLY accessible to the account that's logged in.
+export default function ClubDashboardEventsList({ clubId }) {
+  const [eventData, setEventData] = useState([]);
+
+  const fetchEventData = async () => {
+    const res = await fetch(`http://localhost:3000/api/clubs/${clubId}/events`);
+    if (res.ok) {
+      const body = await res.json();
+      setEventData(body.data);
+    }
+  };
+
+  useEffect(() => {
+    fetchEventData();
+  }, []);
+
+  const renderListItem = ({ item }) => {
+    return <ClubDashboardEventCard data={item} />;
+  };
+
+  return (
+    <FlatList
+      data={eventData}
+      ListEmptyComponent={<Text>Getting events...</Text>}
+      renderItem={renderListItem}
+    />
+  );
+}
diff --git a/frontend/components/feed/feed.js b/frontend/components/feed/feed.js
new file mode 100644
index 0000000..1386392
--- /dev/null
+++ b/frontend/components/feed/feed.js
@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+import { FlatList, Text, View } from 'react-native';
+import { FeedItemEvent, FeedItemClub } from './feedItem';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function Feed() {
+  const [feedData, setFeedData] = useState([]);
+  const [page, setPage] = useState(1);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const fetchData = async (pageNum = 1, MOCK = false) => {
+    const res = await fetch('http://localhost:3000/api/events');
+    if (!res.ok) {
+      console.error('Failed to fetch events', await res.text());
+      return;
+    }
+    const eventsData = await res.json();
+
+    const formattedEvents = eventsData.map((event) => ({
+      type: 'event',
+      data: event,
+    }));
+
+    const resClubs = await fetch('http://localhost:3000/api/clubs');
+    if (!resClubs.ok) {
+      console.error('Failed to fetch clubs', await res.text());
+      return;
+    }
+    const clubData = await resClubs.json();
+    const formattedClubs = clubData.map((club) => ({
+      type: 'club',
+      data: club,
+    }));
+
+    setFeedData([...formattedClubs, ...formattedEvents]);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const renderFeedItem = ({ item }) => {
+    switch (item.type) {
+      case 'event':
+        return <FeedItemEvent data={item.data} />;
+      case 'club':
+        return <FeedItemClub data={item.data} />;
+    }
+
+    return;
+  };
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await fetchData();
+    setRefreshing(false);
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <FlatList
+        data={feedData}
+        onRefresh={handleRefresh}
+        refreshing={refreshing}
+        ListEmptyComponent={
+          <View style={{ padding: 20, alignItems: 'center' }}>
+            <Text>Waiting...</Text>
+          </View>
+        }
+        renderItem={renderFeedItem}
+        keyExtractor={(item, index) => `${item.type}-${item.data.id || index}`} // always add keyExtractor!
+      />
+    </SafeAreaView>
+  );
+}
diff --git a/frontend/components/feed/feedItem.js b/frontend/components/feed/feedItem.js
new file mode 100644
index 0000000..a406bee
--- /dev/null
+++ b/frontend/components/feed/feedItem.js
@@ -0,0 +1,116 @@
+import {
+  Text,
+  ScrollView,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import CategoryChip from '../shared/chip.js';
+import { useRouter } from 'expo-router';
+
+export function FeedItemEvent({ data }) {
+  const { id, title, description, startTimestamp, endTimestamp, hostClub } =
+    data;
+  // hostClub should have: id, name, description, verification status
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerContainer}>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.subtitle}>{hostClub.name}</Text>
+      </View>
+      <Text style={styles.description}>{description}</Text>
+      <Text style={styles.timestamp}>
+        {formatTimestamp(startTimestamp)} - {formatTimestamp(endTimestamp)}
+      </Text>
+    </View>
+  );
+}
+
+export function FeedItemClub({ data }) {
+  const router = useRouter();
+  const { id, name, description, campus, location, category } = data;
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={() => router.push(`/club/${id}`)}
+    >
+      <View style={styles.headerContainer}>
+        <Text style={styles.title}>{name}</Text>
+        <Text style={styles.subtitle}>{campus}</Text>
+      </View>
+      <Text style={styles.description}>{description}</Text>
+      <View style={styles.chipsContainer}>
+        <CategoryChip
+          label={category}
+          state={false}
+          onPress={(e) => console.log('category pressed')}
+        />
+        {/* For multi-category implementation in future */}
+        {/* <ScrollView style={styles.chips} horizontal showsHorizontalScrollIndicator={false}>
+                  {
+                      categories.map((category, i) => {
+                          return (
+                              <CategoryChip
+                                  label={category}
+                                  state={false}
+                                  onPress={(e) => console.log("category pressed")}
+                              />
+                          );
+                      })
+                  }
+              </ScrollView> */}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+function formatTimestamp(ts) {
+  const date = new Date(ts);
+  return date.toLocaleString();
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    backgroundColor: '#fff',
+    marginVertical: 6,
+    marginHorizontal: 12,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    alignSelf: 'stretch',
+  },
+  headerContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+    alignItems: 'center',
+    marginBottom: 4,
+
+    fontSize: 30,
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  subtitle: {
+    fontWeight: 'bold',
+    color: 'grey',
+  },
+  description: {
+    fontSize: 14,
+    color: '#444',
+    marginBottom: 6,
+  },
+  timestamp: {
+    fontSize: 12,
+    color: '#888',
+  },
+  chipsContainer: {
+    width: '100%',
+  },
+});
diff --git a/frontend/components/home/HeaderRight.tsx b/frontend/components/home/HeaderRight.tsx
new file mode 100644
index 0000000..f8fc9f2
--- /dev/null
+++ b/frontend/components/home/HeaderRight.tsx
@@ -0,0 +1,66 @@
+import { TouchableOpacity, Text, View } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useAuth } from '../../context/AuthContext';
+
+export function HeaderRight() {
+  const { session, accountType, signOut } = useAuth();
+  const router = useRouter();
+  if (session && session.user) {
+    return (
+      <>
+        <TouchableOpacity
+          onPress={() => router.push('/club')}
+          style={{ marginRight: 15 }}
+        >
+          <Text style={{ color: '#fff', fontSize: 16 }}>Clubs</Text>
+        </TouchableOpacity>
+        {accountType === 'club' && (
+          <>
+            <TouchableOpacity
+              onPress={() => router.push('../create-event')}
+              style={{ marginRight: 15 }}
+            >
+              <Text style={{ color: '#fff', fontSize: 16 }}>Create Event</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => router.push('/club/edit_club_info')}
+              style={{ marginRight: 15 }}
+            >
+              <Text style={{ color: '#fff', fontSize: 16 }}>
+                Edit Club Info
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => router.push('../dashboard')}
+              style={{ marginRight: 15 }}
+            >
+              <Text style={{ color: '#fff', fontSize: 16 }}>
+                My Club Events
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+        <TouchableOpacity onPress={signOut} style={{ marginRight: 10 }}>
+          <Text style={{ color: '#fff', fontSize: 16 }}>Sign Out</Text>
+        </TouchableOpacity>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={() => router.push('../auth/signup')}
+        style={{ marginRight: 15 }}
+      >
+        <Text style={{ color: '#fff', fontSize: 16 }}>Sign Up</Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={() => router.push('../auth/login')}
+        style={{ marginRight: 10 }}
+      >
+        <Text style={{ color: '#fff', fontSize: 16 }}>Login</Text>
+      </TouchableOpacity>
+    </>
+  );
+}
diff --git a/frontend/components/login/Login.tsx b/frontend/components/login/Login.tsx
new file mode 100644
index 0000000..1fcf6b4
--- /dev/null
+++ b/frontend/components/login/Login.tsx
@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+import { useRouter } from 'expo-router';
+import { supabase } from '../../lib/supabase';
+import { Button, Input } from '@rneui/base';
+type MessageType = 'success' | 'error' | '';
+
+export default function Login() {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [message, setMessage] = useState<string>('');
+  const [messageType, setMessageType] = useState<MessageType>('');
+  const router = useRouter();
+
+  async function logInWithEmail() {
+    setLoading(true);
+    setMessage('');
+    setMessageType('');
+    try {
+      if (!email || !password) {
+        setMessage('Please fill in all fields.');
+        setMessageType('error');
+        setLoading(false);
+        return;
+      }
+      const { error } = await supabase.auth.signInWithPassword({
+        email: email,
+        password: password,
+      });
+
+      if (error) {
+        console.log('Supabase Auth Error:', error);
+        setMessage(`Error: ${error.message}`);
+        setMessageType('error');
+      } else {
+        setMessage('Login successful!');
+        setMessageType('success');
+        // Redirect to home page after successful login
+        setTimeout(() => {
+          router.replace('/');
+        }, 500);
+      }
+    } catch (error) {
+      console.error('Unexpected error during login:', error);
+      setMessage('An unexpected error occurred. Please try again later.');
+      setMessageType('error');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      {message ? (
+        <View
+          style={[
+            styles.messageContainer,
+            messageType === 'success'
+              ? styles.successContainer
+              : styles.errorContainer,
+          ]}
+        >
+          <Text
+            style={[
+              styles.messageText,
+              messageType === 'success' ? styles.successText : styles.errorText,
+            ]}
+          >
+            {message}
+          </Text>
+        </View>
+      ) : null}
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Input
+          label="Email"
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+          onChangeText={(text) => setEmail(text)}
+          value={email}
+          placeholder="email@address.com"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Input
+          label={'Password'}
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+          onChangeText={(text) => setPassword(text)}
+          value={password}
+          secureTextEntry={true}
+          placeholder="Password"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Button
+          title={`Log in`}
+          disabled={loading}
+          onPress={() => logInWithEmail()}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 0,
+    padding: 12,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+  mt20: {
+    marginTop: 20,
+  },
+  messageContainer: {
+    padding: 10,
+    borderRadius: 4,
+    marginBottom: 20,
+  },
+  errorContainer: {
+    backgroundColor: '#ffebee',
+  },
+  successContainer: {
+    backgroundColor: '#e8f5e9',
+  },
+  messageText: {
+    textAlign: 'center',
+    fontSize: 14,
+  },
+  errorText: {
+    color: '#c62828',
+  },
+  successText: {
+    color: '#2e7d32',
+  },
+});
diff --git a/frontend/components/shared/chip.js b/frontend/components/shared/chip.js
new file mode 100644
index 0000000..1aeac6f
--- /dev/null
+++ b/frontend/components/shared/chip.js
@@ -0,0 +1,26 @@
+import { Pressable, Text } from 'react-native';
+
+export default function CategoryChip({ label, state, onPress }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        {
+          backgroundColor: state ? '#007AFF' : '#eee',
+          paddingVertical: 6,
+          paddingHorizontal: 12,
+          borderRadius: 20,
+          borderWidth: 3,
+          borderColor: 'orange',
+          marginRight: 8,
+          alignSelf: 'flex-start',
+          opacity: pressed ? 0.7 : 1,
+        },
+      ]}
+    >
+      <Text style={{ color: state ? 'white' : 'black', fontSize: 14 }}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
diff --git a/frontend/components/signup/SignUp.tsx b/frontend/components/signup/SignUp.tsx
new file mode 100644
index 0000000..3f43535
--- /dev/null
+++ b/frontend/components/signup/SignUp.tsx
@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+import { supabase } from '../../lib/supabase';
+import { Button, Input, CheckBox } from '@rneui/base';
+type MessageType = 'success' | 'error' | '';
+
+export default function SignUp() {
+  const [firstName, setFirstName] = useState<string>('');
+  const [lastName, setLastName] = useState<string>('');
+  const [clubName, setClubName] = useState<string>('');
+  const [graduationYear, setGraduationYear] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [accountType, setAccountType] = useState<string>('user');
+  const [message, setMessage] = useState<string>('');
+  const [messageType, setMessageType] = useState<MessageType>('');
+
+  const isValidYear = (year: string): boolean => {
+    const yearNum = parseInt(year);
+    return !isNaN(yearNum) && yearNum.toString() === year;
+  };
+
+  async function signUpWithEmail() {
+    setLoading(true);
+    setMessage('');
+    setMessageType('');
+    try {
+      if (accountType === 'user') {
+        if (!firstName || !lastName || !graduationYear) {
+          setMessage('Please fill in all fields for user account.');
+          setMessageType('error');
+          setLoading(false);
+          return;
+        }
+        if (!isValidYear(graduationYear)) {
+          setMessage('Please enter a valid graduation year');
+          setMessageType('error');
+          setLoading(false);
+          return;
+        }
+      }
+      if (accountType === 'club' && !clubName) {
+        setMessage('Please fill in the club name for club account.');
+        setMessageType('error');
+        setLoading(false);
+        return;
+      }
+      if (!email || !password) {
+        setMessage('Please fill in all fields.');
+        setMessageType('error');
+        setLoading(false);
+        return;
+      }
+      const {
+        data: { session },
+        error,
+      } = await supabase.auth.signUp({
+        email: email,
+        password: password,
+        options: {
+          data:
+            accountType === 'user'
+              ? {
+                  account_type: accountType,
+                  firstName: firstName,
+                  lastName: lastName,
+                  year: graduationYear,
+                }
+              : {
+                  account_type: accountType,
+                  name: clubName,
+                },
+        },
+      });
+
+      if (error) {
+        console.log('Supabase Auth Error:', error);
+        setMessageType('error');
+        setMessage('Error:' + error.message);
+        setLoading(false);
+        return;
+      } else {
+        setMessage('Sign up successful!');
+        setMessageType('success');
+      }
+    } catch (error) {
+      console.error('Error during sign up:', error);
+      setMessageType('error');
+      setMessage('An unexpected error occurred. Please try again later.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      {message ? (
+        <View
+          style={[
+            styles.messageContainer,
+            messageType === 'success'
+              ? styles.successContainer
+              : styles.errorContainer,
+          ]}
+        >
+          <Text
+            style={[
+              styles.messageText,
+              messageType === 'success' ? styles.successText : styles.errorText,
+            ]}
+          >
+            {message}
+          </Text>
+        </View>
+      ) : null}
+      {accountType == 'club' ? (
+        <View style={[styles.verticallySpaced, styles.mt20]}>
+          <Input
+            label="Club Name"
+            onChangeText={(text) => setClubName(text)}
+            value={clubName}
+            autoCapitalize={'none'}
+          />
+        </View>
+      ) : (
+        <>
+          <View style={[styles.verticallySpaced, styles.mt20]}>
+            <Input
+              label="First Name"
+              onChangeText={(text) => setFirstName(text)}
+              value={firstName}
+              autoCapitalize={'none'}
+            />
+          </View>
+          <View style={[styles.verticallySpaced, styles.mt20]}>
+            <Input
+              label="Last Name"
+              onChangeText={(text) => setLastName(text)}
+              value={lastName}
+              autoCapitalize={'none'}
+            />
+          </View>
+          <View style={[styles.verticallySpaced, styles.mt20]}>
+            <Input
+              label="Graduation Year"
+              onChangeText={(text) => setGraduationYear(text)}
+              value={graduationYear}
+              placeholder="YYYY"
+              autoCapitalize={'none'}
+            />
+          </View>
+        </>
+      )}
+
+      <View style={[styles.verticallySpaced, styles.mt20]}>
+        <Input
+          label="Email"
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+          onChangeText={(text) => setEmail(text)}
+          value={email}
+          placeholder="email@address.com"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Input
+          label={'Password'}
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+          onChangeText={(text) => setPassword(text)}
+          value={password}
+          secureTextEntry={true}
+          placeholder="Password"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <CheckBox
+          title="Sign up as Club"
+          checked={accountType === 'club'}
+          onPress={() =>
+            setAccountType(accountType === 'user' ? 'club' : 'user')
+          }
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Button
+          title={`Sign up`}
+          disabled={loading}
+          onPress={() => signUpWithEmail()}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 0,
+    padding: 12,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+  mt20: {
+    marginTop: 20,
+  },
+  messageContainer: {
+    padding: 10,
+    borderRadius: 4,
+    marginBottom: 20,
+  },
+  errorContainer: {
+    backgroundColor: '#ffebee',
+  },
+  successContainer: {
+    backgroundColor: '#e8f5e9',
+  },
+  messageText: {
+    textAlign: 'center',
+    fontSize: 14,
+  },
+  errorText: {
+    color: '#c62828',
+  },
+  successText: {
+    color: '#2e7d32',
+  },
+});
diff --git a/frontend/context/AuthContext.tsx b/frontend/context/AuthContext.tsx
new file mode 100644
index 0000000..e8db70f
--- /dev/null
+++ b/frontend/context/AuthContext.tsx
@@ -0,0 +1,54 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Session } from '@supabase/supabase-js';
+import { supabase } from '../lib/supabase';
+import { router } from 'expo-router';
+
+type AuthContextType = {
+  session: Session | null;
+  accountType: 'user' | 'club' | null;
+  signOut: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextType>({
+  session: null,
+  accountType: null,
+  signOut: async () => {},
+});
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<Session | null>(null);
+  const [accountType, setAccountType] = useState<'user' | 'club' | null>(null);
+
+  const signOut = async () => {
+    await supabase.auth.signOut();
+    router.replace('/');
+    setSession(null);
+    setAccountType(null);
+  };
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      if (session?.user) {
+        setAccountType(session.user.user_metadata.account_type);
+      }
+    });
+
+    supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+      if (session?.user) {
+        setAccountType(session.user.user_metadata.account_type);
+      } else {
+        setAccountType(null);
+      }
+    });
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ session, accountType, signOut }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/frontend/context/index.ts b/frontend/context/index.ts
new file mode 100644
index 0000000..dc39de3
--- /dev/null
+++ b/frontend/context/index.ts
@@ -0,0 +1 @@
+export * from './AuthContext';
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
new file mode 100644
index 0000000..c2e28ca
--- /dev/null
+++ b/frontend/eslint.config.js
@@ -0,0 +1,29 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: [
+      'dist/*',
+      'node_modules/',
+      '.expo/',
+      'dist/',
+      'web-build/',
+      '*.tsbuildinfo',
+    ],
+    plugins: {
+      prettier: require('eslint-plugin-prettier'),
+    },
+    rules: {
+      'prettier/prettier': 'error',
+    },
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+  },
+  require('eslint-config-prettier'), // disables conflicting ESLint rules
+]);
diff --git a/frontend/lib/supabase.ts b/frontend/lib/supabase.ts
new file mode 100644
index 0000000..ded7060
--- /dev/null
+++ b/frontend/lib/supabase.ts
@@ -0,0 +1,27 @@
+import { AppState, Platform } from 'react-native';
+import 'react-native-url-polyfill/auto';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createClient, processLock } from '@supabase/supabase-js';
+const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!;
+const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+  auth: {
+    ...(Platform.OS !== 'web' ? { storage: AsyncStorage } : {}),
+    autoRefreshToken: true,
+    persistSession: true,
+    detectSessionInUrl: false,
+  },
+});
+// Tells Supabase Auth to continuously refresh the session automatically
+// if the app is in the foreground. When this is added, you will continue
+// to receive `onAuthStateChange` events with the `TOKEN_REFRESHED` or
+// `SIGNED_OUT` event if the user's session is terminated. This should
+// only be registered once.
+AppState.addEventListener('change', (state) => {
+  if (state === 'active') {
+    supabase.auth.startAutoRefresh();
+  } else {
+    supabase.auth.stopAutoRefresh();
+  }
+});
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..c84e759
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "frontend",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "eslint . --fix",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.1.0",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-navigation/bottom-tabs": "^7.3.10",
+    "@react-navigation/elements": "^2.3.8",
+    "@react-navigation/native": "^7.1.6",
+    "@rneui/base": "^4.0.0-rc.8",
+    "@rneui/themed": "^4.0.0-rc.8",
+    "@supabase/supabase-js": "^2.50.0",
+    "expo": "~53.0.9",
+    "expo-blur": "~14.1.4",
+    "expo-constants": "~17.1.6",
+    "expo-dev-client": "~5.1.8",
+    "expo-font": "~13.3.1",
+    "expo-haptics": "~14.1.4",
+    "expo-image": "~2.1.7",
+    "expo-linking": "~7.1.5",
+    "expo-router": "~5.0.6",
+    "expo-splash-screen": "~0.30.8",
+    "expo-status-bar": "~2.2.3",
+    "expo-symbols": "~0.4.4",
+    "expo-system-ui": "~5.0.7",
+    "expo-web-browser": "~14.1.6",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.10.0",
+    "react-native-url-polyfill": "^2.0.0",
+    "react-native-web": "~0.20.0",
+    "react-native-webview": "13.13.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "~19.0.10",
+    "ajv": "^7.2.4",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~9.2.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
+    "prettier": "^3.5.3",
+    "typescript": "~5.8.3"
+  },
+  "private": true,
+  "overrides": {
+    "@rneui/themed": {
+      "@rneui/base": "4.0.0-rc.8"
+    }
+  }
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..e22c3a2
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "./context/index.ts",
+    "./lib/supabase.ts"
+  ]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..006e351
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "cors": "^2.8.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.29.0",
+    "eslint": "^9.29.0",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^16.2.0",
+    "typescript-eslint": "^8.34.0"
+  },
+  "scripts": {
+    "lint": "eslint . --config eslint.config.mjs --fix"
+  }
+}