Final Project Submission - Christina #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

christina-baldwin wants to merge 177 commits into Technigo:main from christina-baldwin:main

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,6 @@ npm-debug.log* @@
     yarn-debug.log*
     yarn-error.log*
-    package-lock.json
+    package-lock.json
+    dist

.vscode/settings.json

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    {
+      "postman.settings.dotenv-detection-notification-visibility": false
+    }

README.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,13 +1,34 @@
  
    # Final Project

    # Final Bootcamp Project - DeskForge

    Replace this readme with your own information about your project.

    The assignment was to create a full-stack React app that solves a clear problem.

    Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.

    I decided to create an app that helps hobbyists, specifically warhammer 40k, to organise their workspaces by uploading a photo of their desk space and getting AI-generated suggestions.

    ## The problem

    Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?

    To create a web app that allows tearget users (warhammer 40k hobbyists) to upload a phot of their desk, and generate suggestions for improvement. Users can must also be able keep track of previous desks through a suggestions history.

    Started by sketching out wireframes to udnerstand general structure and functionality.

    Built the project feature-by-feature starting with setting up the backend for a particular feature, then building the frontend, dealt with bugs for that specific feature then repeated for the nex feature until the app was built.

    Handling the multiple states needed for the upload and generate states for a desk was a challenge that was solved with the help of creating separate components and using global state management.

    Routing is handled by react router.

    The AI integration was an integral part of the project and that was solved using OpenAI's api as it is very well-documentated and straight-forward to integrate.

    The next steps I would like to implement in my own time is to create a new feature where the location of changes is indicated on the image, to migrate it to React Native for mobile, and use Tamagui for the design so it is cohesive across all platforms.

    ## The code

    The code is separated into a backend and frontend folder.

    The backend folder has the main server file with the ai integration, authorisation, and upload routes in sperate files. Middleware is in a separate folder as is the desk and user monogdb models.

    The frontend folder has the main file while components and pages are in 2 seperate folders, as is the latestdesk global state. Pages indicate the sperate pages you can navigate to while components are sections within said pages.

    ## View it live

    Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
      
    Netfliy link: https://desk-forge.netlify.app/

backend/middlewares/auth.js

-Original file line number
+Diff line change
@@ -0,0 +1,26 @@
+    import jwt from "jsonwebtoken";
+    import dotenv from "dotenv";
+    dotenv.config();
+    const JWT_SECRET = process.env.JWT_SECRET;
+    const authenticate = (req, res, next) => {
+      const authHeader = req.headers.authorization;
+      if (!authHeader)
+        return res.status(401).json({ message: "Authorisation header missing" });
+      const token = authHeader.split(" ")[1];
+      if (!token) return res.status(401).json({ message: "Token missing" });
+      try {
+        const decoded = jwt.verify(token, JWT_SECRET);
+        req.user = decoded;
+        next();
+      } catch (error) {
+        res.status(401).json({ message: "Invalid or expired token" });
+      }
+    };
+    export default authenticate;

backend/models/Desk.js

-Original file line number
+Diff line change
@@ -0,0 +1,32 @@
+    import mongoose from "mongoose";
+    const deskSchema = new mongoose.Schema(
+      {
+        userId: {
+          type: mongoose.Schema.Types.ObjectId,
+          required: true,
+          ref: "User",
+        },
+        imageUrl: {
+          type: String,
+          required: true,
+        },
+        createdAt: {
+          type: Date,
+          default: Date.now,
+        },
+        problems: { type: String, default: "" },
+        suggestions: [
+          {
+            title: { type: String, required: true },
+            description: { type: String, required: true },
+          },
+        ],
+        summary: { type: String, default: "" },
+      },
+      { timestamps: true }
+    );
+    const Desk = mongoose.model("Desk", deskSchema);
+    export default Desk;

backend/models/User.js

-Original file line number
+Diff line change
@@ -0,0 +1,33 @@
+    import bcrypt from "bcrypt";
+    import mongoose from "mongoose";
+    const userSchema = new mongoose.Schema(
+      {
+        name: { type: String, required: true, minlength: 3 },
+        email: { type: String, required: true, unique: true, lowercase: true },
+        password: { type: String, required: true, minlength: 6 },
+        lastLogin: { type: Date, default: Date.now },
+        previousLogin: { type: Date },
+        totalAiCalls: { type: Number, default: 0 },
+      },
+      { timestamps: true }
+    );
+    userSchema.pre("save", async function (next) {
+      if (!this.isModified("password")) return next();
+      try {
+        const salt = await bcrypt.genSalt(10);
+        this.password = await bcrypt.hash(this.password, salt);
+        next();
+      } catch (error) {
+        next(error);
+      }
+    });
+    userSchema.methods.comparePassword = async function (candidatePassword) {
+      return bcrypt.compare(candidatePassword, this.password);
+    };
+    const User = mongoose.model("User", userSchema);
+    export default User;

backend/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,9 +12,16 @@ @@
         "@babel/core": "^7.17.9",
         "@babel/node": "^7.16.8",
         "@babel/preset-env": "^7.16.11",
+        "bcrypt": "^6.0.0",
+        "cloudinary": "^2.7.0",
         "cors": "^2.8.5",
-        "express": "^4.17.3",
-        "mongoose": "^8.4.0",
-        "nodemon": "^3.0.1"
+        "dotenv": "^16.5.0",
+        "express": "^4.21.2",
+        "express-list-endpoints": "^7.1.1",
+        "jsonwebtoken": "^9.0.2",
+        "mongoose": "^8.16.0",
+        "multer": "^2.0.1",
+        "nodemon": "^3.0.1",
+        "openai": "^5.9.0"
       }
-    }
+    }

backend/routes/ai.js

-Original file line number
+Diff line change
@@ -0,0 +1,145 @@
+    import express from "express";
+    import Desk from "../models/Desk.js";
+    import User from "../models/User.js";
+    import authenticate from "../middlewares/auth.js";
+    import OpenAI from "openai";
+    import dotenv from "dotenv";
+    import path from "path";
+    dotenv.config();
+    const router = express.Router();
+    const openai = new OpenAI({
+      apiKey: process.env.OPENAI_API_KEY,
+    });
+    router.post("/desks/:id/generate", authenticate, async (req, res) => {
+      const deskId = req.params.id;
+      const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif"];
+      console.log(
+        "Generate suggestions request for desk ID:",
+        deskId,
+        "by user:",
+        req.user.id
+      );
+      try {
+        const desk = await Desk.findOne({ _id: deskId, userId: req.user.id });
+        if (!desk) {
+          console.log("Desk not found for this user:", req.user.id);
+          return res
+            .status(404)
+            .json({ success: false, message: "Desk not found" });
+        }
+        console.log("Desk found:", desk._id, "Image URL:", desk.imageUrl);
+        const fileExtension = path
+          .extname(desk.imageUrl.split("?")[0])
+          .toLowerCase();
+        if (!allowedExtensions.includes(fileExtension)) {
+          return res.status(400).json({
+            success: false,
+            message:
+              "Cannot generate suggestions: unsupported file type. Please upload JPG, PNG, or GIF.",
+          });
+        }
+        const user = await User.findById(req.user.id);
+        if (!user)
+          return res
+            .status(404)
+            .json({ success: false, message: "User not found" });
+        console.log(
+          "User fetched:",
+          user._id,
+          "Email:",
+          user.email,
+          "Total AI calls:",
+          user.totalAiCalls || 0
+        );
+        if ((user.totalAiCalls || 0) >= 10) {
+          return res.status(403).json({
+            success: false,
+            message:
+              "You’ve reached your AI call limit. Please contact us @ christina.baldwin13@yahoo.com",
+          });
+        }
+        const response = await openai.chat.completions.create({
+          model: "gpt-4o-mini",
+          messages: [
+            {
+              role: "user",
+              content: [
+                {
+                  type: "text",
+                  text: "Use the uploaded image and the below desk problems, if available, to give 5 suggestions to improve my hobby desk setup, specifically for warhammer 40k. Reference specific products if applicable. Reference specific points on the desk where your suggested items would be placed. For each suggestion, provide coordinates using x and y to visually represent where that specific suggestion should be placed assuming x will always be a maximum value of 440px and y being 267px. Reference things on the desk that are not useful and can be removed. Return them as a JSON array of objects, each with a 'title', 'description', 'x' and 'y'. No markdown formatting, no asterisks.",
+                },
+                {
+                  type: "text",
+                  text: `Desk problems I'd like fixed: ${desk.problems}`,
+                },
+                { type: "image_url", image_url: { url: desk.imageUrl } },
+              ],
+            },
+          ],
+          max_tokens: 500,
+        });
+        const aiMessage = response.choices[0]?.message?.content || "";
+        console.info("aiMessage: ", aiMessage);
+        try {
+          desk.suggestions = JSON.parse(aiMessage);
+        } catch (parseError) {
+          console.error(
+            "Failed to parse AI message:",
+            parseError,
+            "aiMessage:",
+            aiMessage
+          );
+          return res
+            .status(500)
+            .json({ success: false, message: "Invalid AI response format" });
+        }
+        const summaryPrompt = `Here are the desk problems ${
+          desk.problems
+        } and here are the ai-generated suggestions ${desk.suggestions
+          .map((s) => `${s.title}: ${s.description}`)
+          .join(
+            "\n"
+          )}. Using these, write a short 1 sentence summary highlighting only the key issues and solutions for my warhammer hobby desk setup`;
+        try {
+          const summaryResponse = await openai.chat.completions.create({
+            model: "gpt-4o-mini",
+            messages: [{ role: "user", content: summaryPrompt }],
+            max_tokens: 150,
+          });
+          desk.summary = summaryResponse.choices[0]?.message?.content || "";
+        } catch (summaryError) {
+          console.error("OpenAI summary error:", summaryError);
+          desk.summary = "";
+        }
+        user.totalAiCalls = (user.totalAiCalls || 0) + 1;
+        await user.save();
+        await desk.save();
+        res.status(200).json({ success: true, suggestions: desk.suggestions });
+      } catch (error) {
+        console.error("Generate suggestions error:", error);
+        res
+          .status(500)
+          .json({ success: false, message: "Failed to generate suggestions" });
+      }
+    });
+    export default router;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Final Project Submission - Christina #119

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Final Project Submission - Christina #119

Are you sure you want to change the base?

Uh oh!

Final Project Submission - Christina #119

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!