progress

.gitignore

@@ -1,2 +1,2 @@
-backend/.env
+*/.env
 */target/

backend/go.mod

@@ -5,6 +5,7 @@ go 1.20
 require github.com/go-chi/chi/v5 v5.0.10
 
 require (
+	github.com/go-chi/cors v1.2.1
 	github.com/golang/snappy v0.0.1 // indirect
 	github.com/joho/godotenv v1.5.1 // indirect
 	github.com/klauspost/compress v1.13.6 // indirect

backend/go.sum

@@ -1,6 +1,8 @@
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
 github.com/go-chi/chi/v5 v5.0.10/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
+github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
 github.com/golang/snappy v0.0.1 h1:Qgr9rKW7uDUkrbSmQeiDsGa8SjGyCOGtuasMWwvp2P4=
 github.com/golang/snappy v0.0.1/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
 github.com/google/go-cmp v0.5.2/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=

backend/main.go

@@ -6,6 +6,7 @@ import (
 
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/chi/v5/middleware"
+	"github.com/go-chi/cors"
 
 	"github.com/g00gol/frieren/backend/db"
 	"github.com/g00gol/frieren/backend/routes"
@@ -15,7 +16,16 @@ func main() {
 	port := "8080"
 
 	r := chi.NewRouter()
+	r.Use(cors.Handler(cors.Options{
+		AllowedOrigins:   []string{"http://*"},
+		AllowedMethods:   []string{"GET", "POST", "PUT", "PATCH", "OPTIONS"},
+		AllowedHeaders:   []string{"Accept", "Authorization", "Content-Type", "X-CSRF-Token"},
+		ExposedHeaders:   []string{"Link"},
+		AllowCredentials: false,
+		MaxAge:           300, // Maximum value not ignored by any of major browsers
+	}))
 	r.Use(middleware.Logger)
+
 	routes.RegisterRoutes(r)
 
 	// Connect to MongoDB

frontend/app/globals.css

@@ -27,4 +27,10 @@ html, body {
   small {
     @apply text-sm;
   }
+}
+
+@layer components {
+  .tab-active {
+    @apply text-sky-blue;
+  }
 }

frontend/app/page.js

@@ -2,18 +2,21 @@
 import React from "react";
 
 import Searchbar from "@/components/searchbar";
+import Cards from "@/components/cards/cards";
 
 export default function Home() {
   return (
-    <main className="">
-      <h2 className="">
+    <main>
+      <h2>
         celebrating open source projects. discover projects that interest you!
       </h2>
       <h3>
         making open source projects more discoverable. we set the standard for
         collaboration, so you can focus on the projects you love
       </h3>
       <Searchbar />
+
+      <Cards />
     </main>
   );
 }

frontend/components/cards/card.js

@@ -0,0 +1,7 @@
+export default function Card({ project }) {
+  return (
+    <div className="w-full h-fit p-4">
+      <a href={project.repo_origin}>{project.name}</a>
+    </div>
+  );
+}

frontend/components/cards/cards.js

@@ -0,0 +1,25 @@
+import { useContext, useEffect, useState } from "react";
+
+import SearchbarContext from "@/context/searchbar";
+import fetchApi from "@/utils/fetchApi";
+import Card from "./card";
+
+export default function Cards({ children }) {
+  const [data, setData] = useState([]);
+  const { searchTerm } = useContext(SearchbarContext);
+
+  useEffect(() => {
+    fetchApi("104.248.58.127/api/repos").then((data) => {
+      console.log(data);
+      setData(data);
+    });
+  }, [searchTerm]);
+
+  return (
+    <>
+      {data.map((project) => (
+        <Card key={project.id} project={project} />
+      ))}
+    </>
+  );
+}

frontend/components/nav.js

@@ -4,7 +4,7 @@ export default function Nav() {
   return (
     <nav className="flex my-12">
       <Link href="/">
-        <h3>frieren.</h3>
+        <h3>frieren.playground</h3>
       </Link>
     </nav>
   );

frontend/components/searchbar.js

@@ -1,22 +1,40 @@
-import { useContext } from "react";
+import { useContext, useRef } from "react";
+import { AiOutlineSearch } from "react-icons/ai";
+
 import SearchbarContext from "@/context/searchbar";
 
 export default function Searchbar() {
+  const inputRef = useRef();
+
   const { searchTerm, setSearchTerm } = useContext(SearchbarContext);
 
-  function handleSearchbarChange(e) {
-    setSearchTerm(e.target.value);
+  function handleSearchbarSubmit(e) {
+    e.preventDefault();
+    setSearchTerm(inputRef.current.value);
   }
 
   return (
-    <>
-      <label htmlFor="searchbar" />
-      <input
-        id="searchbar"
-        placeholder="search by project name, language, or technologies"
-        className="my-12 w-full py-4 px-2 border-2 border-sky-blue rounded-lg bg-deep-blue font-quicksand text-mage-silver outline-none"
-        onChange={handleSearchbarChange}
-      />
-    </>
+    <div className="join mt-12 mb-4 w-full h-full">
+      <span className="join-item w-full">
+        <label htmlFor="searchbar" />
+        <input
+          id="searchbar"
+          placeholder={
+            searchTerm
+              ? searchTerm
+              : "search by project name, language, or technologies"
+          }
+          className="w-full py-4 px-2 border-2 border-r-0 rounded-e-none border-sky-blue rounded-lg bg-deep-blue flex items-center font-quicksand text-mage-silver outline-none"
+          type="text"
+          ref={inputRef}
+        />
+      </span>
+      <button
+        onClick={handleSearchbarSubmit}
+        className="join-item bg-night-blue border-2 border-l-0 px-4 border-sky-blue text-mage-silver"
+      >
+        <AiOutlineSearch />
+      </button>
+    </div>
   );
 }