Add video feed feature with related components and hooks

- Implemented VideoFeed component to display sightings.
- Created useSightingList and useVideoFeed hooks for data fetching and state management.
- Added AppProviders for context management.
- Updated Dashboard to include VideoFeed.
- Introduced types for sightings in utils/types.tsx.
- Added Header and Footer components for layout.
- Configured React Query for data handling.

src/app/config.ts

@@ -0,0 +1 @@
+export const cambase = import.meta.env.VITE_LOCAL_CAMBASE;

src/app/providers/AppProviders.tsx

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from "react";
+import { QueryProvider } from "./QueryProvider";
+
+const AppProviders = ({ children }: PropsWithChildren) => {
+  return <QueryProvider>{children}</QueryProvider>;
+};
+
+export default AppProviders;

src/app/providers/QueryProvider.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "../queryClient";
+
+export function QueryProvider({ children }: PropsWithChildren) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

src/app/queryClient.ts

@@ -0,0 +1,10 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});