request API server to add projects record

backend/index.js

@@ -2,6 +2,17 @@ const express = require('express');
 const { Sequelize } = require('sequelize');
 const app = express();
 
+// enable frontend access
+const cors = require("cors");
+const corsOptions = {
+  origin: "http://localhost:3000",
+  methods: "GET,HEAD,PUT,PATCH,POST,DELETE"
+};
+app.use(cors(corsOptions));
+
+// enable json middleware
+app.use(express.json());
+
 // init sequalize
 const sequelize = new Sequelize({
   dialect: 'sqlite',
@@ -13,8 +24,10 @@ const indexRoute = require('./routes/index');
 app.use('/', indexRoute);
 
 // "/projects"
-const projectsRoute = require('./routes/projects')(sequelize);
-app.use('/projects', projectsRoute);
+const projectsIndexRoute = require('./routes/projects/index')(sequelize);
+const projectsNewRoute = require('./routes/projects/new')(sequelize);
+app.use('/projects', projectsIndexRoute);
+app.use('/projects', projectsNewRoute);
 
 const PORT = process.env.PORT || 3001;
 app.listen(PORT, () => {

backend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "cors": "^2.8.5",
         "express": "^4.18.2",
         "sequelize": "^6.36.0",
         "sequelize-cli": "^6.6.2",
@@ -623,6 +624,18 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1939,6 +1952,14 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -3487,6 +3508,15 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4483,6 +4513,11 @@
         "set-blocking": "^2.0.0"
       }
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
     "object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",

backend/package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.18.2",
     "sequelize": "^6.36.0",
     "sequelize-cli": "^6.6.2",

backend/routes/projects/index.js

@@ -4,9 +4,9 @@ const defineProject = require('../../models/projects');
 const { DataTypes } = require('sequelize');
 
 module.exports = function(sequelize) {
-  router.get("/", async (req, res) => {
-    const Project = defineProject(sequelize, DataTypes)
+  const Project = defineProject(sequelize, DataTypes)
 
+  router.get("/", async (req, res) => {
     try {
       const projects = await Project.findAll();
       res.json(projects);

backend/routes/projects/new.js

@@ -0,0 +1,24 @@
+const express = require("express");
+const router = express.Router();
+const defineProject = require("../../models/projects");
+const { DataTypes } = require("sequelize");
+
+module.exports = function (sequelize) {
+  const Project = defineProject(sequelize, DataTypes)
+
+  router.post("/", async (req, res) => {
+    try {
+      const { name, detail } = req.body;
+      const newProject = await Project.create({
+        name,
+        detail,
+      });
+      res.json(newProject);
+    } catch (error) {
+      console.error(error);
+      res.status(500).send("Internal Server Error");
+    }
+  });
+
+  return router;
+};

frontend/app/projects/page.tsx

@@ -1,5 +1,7 @@
+"use client";
 import { title } from "@/components/primitives";
 import { ProjectCard } from "./project-card";
+import { Button } from "@nextui-org/react";
 
 const projects = [
   {
@@ -24,13 +26,44 @@ const projects = [
   },
 ];
 
+async function createProject() {
+  const newProjectData = {
+    name: "新しいプロジェクト",
+    detail: "新しいプロジェクトの詳細説明がここにくるよ",
+  };
+
+  const fetchOptions = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(newProjectData),
+  };
+
+  fetch("http://localhost:3001/projects", fetchOptions)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      console.log("New project created:", data);
+    })
+    .catch((error) => {
+      console.error("Error creating new project:", error);
+    });
+}
+
 export default function ProjectsPage() {
   return (
     <div>
       <h1 className={title()}>Projects</h1>
+      <Button color="primary" onClick={createProject}>Create</Button>
       <div className="flex flex-wrap gap-4 mt-5">
-        {projects.map((project) => (
+        {projects.map((project, index) => (
           <ProjectCard
+            key={index}
             projectName={project.name}
             projectDetail={project.detail}
           />