Added DB connection and started creating api calls for the pages

frontend/src/services/groupService.ts

@@ -0,0 +1,36 @@
+const API_BASE_URL = '/api'
+
+export interface Group {
+  id: number
+  group_name: string
+  hex_color: string
+}
+
+class GroupService {
+  /**
+   * Get all groups from the API.
+   */
+  async getGroups(): Promise<Group[]> {
+    try {
+      const response = await fetch(`${API_BASE_URL}/groups`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const groups: Group[] = await response.json()
+      return groups
+    } catch (error) {
+      console.error('Failed to fetch groups:', error)
+      throw error
+    }
+  }
+}
+
+export const groupService = new GroupService()

frontend/src/services/index.ts

@@ -1 +1,3 @@
 export { authService } from './authService'
+export { groupService } from './groupService'
+export type { Group } from './groupService'