begin integrating frontend and backend

backend/src/routes/articles.ts

@@ -6,7 +6,7 @@ import express, { Request, Response } from "express";
 const db = drizzle(process.env.DATABASE_URL!);
 export const articlesRouter = express.Router();
 
-articlesRouter.get("/getAllArticles", async (req: Request, res: Response) => {
+articlesRouter.get("/getAllArticles", async (_, res: Response) => {
   const resp = await db.select().from(articles);
   res.json({ resp });
 });
@@ -20,6 +20,15 @@ articlesRouter.get("/getArticle/:articleId", async (req: Request, res: Response)
   res.json({ resp });
 });
 
+articlesRouter.get("/getArticleBySlug/:slug", async (req: Request, res: Response) => {
+  const { slug } = req.params;
+
+  const resp = await db.select()
+    .from(articles)
+    .where(eq(articles.slug, slug));
+  res.json({ resp });
+});
+
 articlesRouter.post("/postArticle", async (req: Request, res: Response) => {
   const resp = await db
     .insert(articles)

backend/src/routes/blocks.ts

@@ -5,3 +5,5 @@ import express, { Request, Response } from "express";
 
 const db = drizzle(process.env.DATABASE_URL!);
 export const blocksRouter = express.Router();
+
+// TODO: implement

backend/src/routes/images.ts

@@ -5,3 +5,5 @@ import express, { Request, Response } from "express";
 
 const db = drizzle(process.env.DATABASE_URL!);
 export const imagesRouter = express.Router();
+
+// TODO: Implement

frontend/src/main.tsx

@@ -13,7 +13,7 @@ createRoot(document.getElementById('root')!).render(
       <Navbar />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/article/:articleId" element={<Article />} />
+        <Route path="/article/:slug" element={<Article />} />
         <Route path="/articleList" element={<ArticleList />} />
       </Routes>
     </BrowserRouter>

frontend/src/pages/Article.tsx

@@ -1,11 +1,12 @@
 import { useParams } from 'react-router';
+// import { useState, useEffect } from 'react';
 
 export default function Article() {
-  let { articleId } = useParams();
+  let { slug } = useParams();
 
   return (
     <div id="article">
-      <h1>Article: {articleId}</h1>
+      <h1>Article: {slug}</h1>
     </div>
   );
 };

frontend/vite.config.ts

@@ -12,4 +12,14 @@ export default defineConfig({
       },
     })
   ],
-})
+  // DEV PROXY
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
+});