Cones & Stones

README.md

@@ -1,13 +1,43 @@
-# Final Project
+# CONES & STONES - e-commerce store
 
-Replace this readme with your own information about your project.
+## Table of Contents
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+- [Project Description](#project-description)
+- [Technologies](#technologies)
+- [How to Install & Run the Project](#how-to-install--run-the-project)
+- [How to Use the Project](#how-to-use-the-project)
+- [Future ToDo](#future-todo)
+- [Authors](#authors)
+- [See it live](#see-it-live)
 
-## The problem
+## Project Description:
 
-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?
+We have created a kids' clothes e-commerce store with a clean landing page that showcases products from a database, with detailed product views and a functional cart/checkout system integrated with Stripe for test payments.
 
-## View it live
+### Technologies
 
-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.
+The store is developed with React JS & Vite for us to achieve a fast & optimized web app. For building robust APIs we used Express. The database is built using MongoDB for scalable and flexible data storage. Stripe Test API is integrated for secure and scalable payment processing, which was a bit of a challenge for us, since it was our first time implementing a third party solution. Lastly, for image storage, we used cloudinary.
+
+## How to Install & Run the Project
+
+1.  Install the required dependencies using `npm install`.
+2.  Start the development server using `npm run dev`.
+
+## How to Use the Project
+
+To explore our kids' clothes e-commerce store, navigate through the product categories using the menu or click on all products in hero. Add items to your cart by clicking "Add to Cart" on the product page, then proceed to checkout where you can simulate a payment using Stripe's test mode.
+
+## Future ToDo
+
+To develop the app further, we would like to add user registration/login, enabeling adding products to favorites, more inspirational pages as well as filtering- and sorting possibilities.
+
+## Authors
+
+- [Erica Mechler](https://github.com/ericamechler)- [LinkedIn](https://www.linkedin.com/in/erica-mechler-a39b73a8/)
+- [Frida Svensson](https://github.com/FridaMari)- [LinkedIn](https://www.linkedin.com/in/frida-svensson-649019295/)
+- [Johanna Billingskog Nyberg](https://github.com/JohannaBN)- [LinkedIn](https://www.linkedin.com/in/johanna-billingskog-nyberg-b28b4738/)
+
+## See it live
+
+[Backend](https://cones-and-stones-ppnudpghiq-lz.a.run.app/)
+[Frontend](https://cones-and-stones.netlify.app/)

backend/.env.sample

@@ -0,0 +1,3 @@
+VITE_STRIPE_SECRET_KEY=sk_test_xxx
+VITE_CLIENT_URL=http://localhost:8080
+MONGO_URL=mongodb://localhost/Cones&Stones

backend/package.json

@@ -13,8 +13,11 @@
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.17.3",
+    "express-list-endpoints": "^7.1.0",
     "mongoose": "^8.4.0",
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.0.1",
+    "stripe": "^15.10.0"
   }
-}
+}

backend/server.js

@@ -1,12 +1,66 @@
-import express from "express";
 import cors from "cors";
-import mongoose from 'mongoose'
+import express from "express";
+import expressListEndpoints from "express-list-endpoints";
+import mongoose from "mongoose";
+import Stripe from "stripe";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const stripe = new Stripe(process.env.VITE_STRIPE_SECRET_KEY);
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/flowershop"
-mongoose.connect(mongoUrl)
-mongoose.Promise = Promise
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/Cones&Stones";
+mongoose.connect(mongoUrl);
+mongoose.Promise = Promise;
 
+// Create product mongoose-schema & model
+// Destructure schema & model
+const { Schema, model } = mongoose;
 
+const productSchema = new Schema({
+  name: {
+    type: String,
+    required: true,
+  },
+  price: {
+    type: Number,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  details: {
+    type: String,
+    required: true,
+  },
+  image_url: {
+    type: String,
+    required: true,
+  },
+  stock: [
+    {
+      // ex. { "size": "80/86", "quantity": 10 }, { "size": "90/96", "quantity": 15 }
+      size: { type: String, required: true },
+      quantity: { type: Number, required: true },
+    },
+  ],
+  color: {
+    type: String,
+    required: true,
+  },
+  category: {
+    type: String,
+    enum: ["bottoms", "tops", "dresses", "accessories"], // Only allow specific categories
+    required: true,
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+});
+
+const Product = mongoose.model("Product", productSchema);
 
 // Defines the port the app will run on. Defaults to 8080, but can be overridden
 // when starting the server. Example command to overwrite PORT env variable value:
@@ -18,14 +72,220 @@ const app = express();
 app.use(cors());
 app.use(express.json());
 
+// app.use(checkDatabaseConnection);
+
 // Start defining your routes here
 // http://localhost:8080/
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+  const endpoints = expressListEndpoints(app);
+  res.json(endpoints);
+});
+
+// GET all products
+// http://localhost:8080/products
+app.get("/products", async (req, res) => {
+  try {
+    // Possibility to filter on category, color and/or size
+    // http://localhost:8080/products?color=red&size=M <-- for example
+    const { category, color, size, sort } = req.query;
+    let filter = {};
+
+    if (category) {
+      filter.category = category;
+    }
+
+    if (color) {
+      filter.color = color;
+    }
+
+    if (size) {
+      filter["stock.size"] = size;
+    }
+
+    // Possibility to sort on price/date in ascending or descending order
+    // Examples:
+    // http://localhost:8080/products?sort=price_desc
+    // http://localhost:8080/products?color=red&size=M&sort=price_asc
+    // http://localhost:8080/products?sort=date_desc
+    let sortOptions = {};
+    if (sort) {
+      const [field, order] = sort.split("_");
+      if (
+        (field === "price" || field === "date") &&
+        (order === "asc" || order === "desc")
+      ) {
+        sortOptions[field] = order === "asc" ? 1 : -1;
+      }
+    }
+
+    const products = await Product.find(filter).sort(sortOptions);
+
+    if (products.length > 0) {
+      res.status(200).json({
+        success: true,
+        response: products,
+        message: "Products retrieved successfully",
+      });
+    } else {
+      res.status(404).json({
+        success: false,
+        error: {
+          message: "No products found",
+        },
+      });
+    }
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: {
+        message: "Internal server error",
+      },
+    });
+  }
+});
+
+// GET single product by id
+// http://localhost:8080/products/:productId
+app.get("/products/:productId", async (req, res) => {
+  const { productId } = req.params;
+  try {
+    const product = await Product.findById(productId).exec();
+    if (product) {
+      res.status(200).json({
+        success: true,
+        response: product,
+        message: "Product was found successfully",
+      });
+    } else {
+      res.status(404).json({
+        success: false,
+        error: {
+          message: "Product not found",
+        },
+      });
+    }
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: {
+        message: "Internal server error",
+      },
+    });
+  }
+});
+
+// GET products by category
+// http://localhost:8080/products/category/:category
+app.get("/products/category/:category", async (req, res) => {
+  const { category } = req.params;
+  const { color, size, sort } = req.query;
+  const validCategories = ["bottoms", "tops", "dresses", "accessories"];
+
+  if (!validCategories.includes(category)) {
+    return res.status(400).json({
+      success: false,
+      error: {
+        message: "Invalid category",
+      },
+    });
+  }
+
+  try {
+    // Possibilities to filter and sort in the category endpoint
+    let filter = { category };
+
+    if (color) {
+      filter.color = color;
+    }
+
+    if (size) {
+      filter["stock.size"] = size;
+    }
+
+    let sortOptions = {};
+    if (sort) {
+      const [field, order] = sort.split("_");
+      if (
+        (field === "price" || field === "date") &&
+        (order === "asc" || order === "desc")
+      ) {
+        sortOptions[field === "date" ? "createdAt" : field] =
+          order === "asc" ? 1 : -1;
+      }
+    }
+
+    const productsByCategory = await Product.find(filter).sort(sortOptions);
+    if (productsByCategory.length > 0) {
+      res.status(200).json({
+        success: true,
+        response: productsByCategory,
+        message: "Products retrieved successfully",
+      });
+    } else {
+      res.status(404).json({
+        success: false,
+        error: {
+          message: "No products found in this category",
+        },
+      });
+    }
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      error: {
+        message: "Internal server error",
+      },
+    });
+  }
 });
 
+// Stripe Checkout Session creation endpoint
+app.post("/create-checkout-session", async (req, res) => {
+  const { items } = req.body;
+
+  try {
+    const lineItemsPromises = items.map(async (item) => {
+      const product = await Product.findById(item.id);
+      if (!product) {
+        throw new Error(`Product not found: ${item.id}`);
+      }
+
+      return {
+        price_data: {
+          currency: "sek",
+          product_data: {
+            name: product.name,
+            images: [product.image_url],
+          },
+          unit_amount: product.price * 100, // price in cents
+        },
+        quantity: item.quantity,
+      };
+    });
+
+    const lineItems = await Promise.all(lineItemsPromises);
+
+    const session = await stripe.checkout.sessions.create({
+      // payment_method_types: ["card"],
+      line_items: lineItems,
+      mode: "payment",
+      success_url: `${process.env.VITE_CLIENT_URL}/success`,
+      cancel_url: `${process.env.VITE_CLIENT_URL}/cart`,
+    });
+
+    res.status(200).json({ id: session.id });
+  } catch (error) {
+    console.error("error create-checkout-session:", error.message);
+    res.status(500).json({
+      success: false,
+      error: {
+        message: error.message || "Internal server error",
+      },
+    });
+  }
+});
 
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);
-});
+});

frontend/.env.sample

@@ -0,0 +1,2 @@
+VITE_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
+VITE_BACKEND_URL=http://localhost:8080