[WS] 1 Supabase Set-Up and Web Scraper Research

api/supabase/createClient.ts

@@ -0,0 +1,14 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;
+
+if (!supabaseUrl || !supabaseKey) {
+  throw new Error(
+    'No Supabase environment variables detected, please make sure they are in place!',
+  );
+}
+
+const supabase = createClient(supabaseUrl, supabaseKey);
+
+export default supabase;

api/supabase/queries/query.ts

@@ -0,0 +1,9 @@
+import supabase from '../createClient';
+
+export default async function queryProjects() {
+  const { data: projects, error } = await supabase.from('Projects').select('*');
+
+  console.log('PROJECTS', projects, 'ERROR', error);
+
+  return { projects, error };
+}

app/testing/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { CSSProperties, useEffect, useState } from 'react';
+import Image from 'next/image';
+import BPLogo from '@/assets/images/bp-logo.png';
+import queryProjects from '../../api/supabase/queries/query';
+
+interface Project {
+  id: string;
+  project_name: string;
+  energy_category: string;
+  size: number;
+  developer: string;
+  longitude: number;
+  latitude: number;
+  project_statues: string;
+  county: string;
+  town: string;
+  region: string;
+  state_senate_district: number;
+  assembly_district: number;
+  project_image: string | null;
+  additional_information: string | null;
+  key_development_milestones: object | null;
+}
+
+export default function Home() {
+  const [projects, setProjects] = useState<Project[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    queryProjects()
+      .then(data => {
+        setProjects(data.projects);
+      })
+      .catch(err => setError(err));
+  }, []);
+
+  return (
+    <main style={mainStyles}>
+      <Image style={imageStyles} src={BPLogo} alt="Blueprint Logo" />
+      <p>Open up app/page.tsx to get started!</p>
+      <p>
+        <b>Projects:</b>
+      </p>
+      {projects ? (
+        projects?.map(project => {
+          return <div key={project.id}>{project.project_name}</div>;
+        })
+      ) : (
+        <div>Loading...</div>
+      )}
+      {error ? <div style={errorStyles}>{error}</div> : null}
+    </main>
+  );
+}
+
+// CSS styles
+
+const mainStyles: CSSProperties = {
+  width: '100%',
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const imageStyles: CSSProperties = {
+  width: '80px',
+  height: '80px',
+  marginBottom: '0.5rem',
+};
+
+const errorStyles: CSSProperties = {
+  color: '#D22B2B',
+};

next.config.mjs

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  compiler: {
+    // Enables the styled-components SWC transform
+    styledComponents: true,
+  },
+};
 
 export default nextConfig;

package.json

@@ -14,7 +14,9 @@
     "pre-commit": "(pnpm run tsc || true) && (pnpm run lint || true) && pnpm run prettier"
   },
   "dependencies": {
-    "next": "^14.2.10",
+    "@supabase/supabase-js": "^2.45.4",
+    "dotenv": "^16.4.5",
+    "next": "^14.2.13",
     "react": "^18",
     "react-dom": "^18",
     "styled-components": "^6.1.13"