Webify - Final Project Web Dev Bootcamp 2024

.gitignore

@@ -12,4 +12,26 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-package-lock.json
+package-lock.json
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,13 +1,76 @@
-# Final Project
+Webify - Design Your Website with Ease
 
-Replace this readme with your own information about your project.
+Discover the perfect web template for you! No coding skills needed—just pick, customize, and launch.
+Let's make website creation easy and fun!
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+As part of the Technigo Web Dev Bootcamp, this project was created as the Final Project by Mai Kanetaka, Wen Zhao, and Sofie Ferrari Strahl. Webify is an e-commerce platform that sells web templates for influencers, entrepreneurs and people who want to get their projects och products to the market fast without needing any programming skills. Our goal with this website is to empower users to create professional online presences quickly and easily.
 
-## The problem
+Technologies Used
 
-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?
+Frontend:
+React
+Vite
+Zustand
+React Router
+React Icons
+Tailwind CSS
 
-## View it live
+Backend:
+Node.js
+Express
+MongoDB
+Mongoose
+Nodemon
 
-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.
+Other:
+GitHub
+Figma
+VScode
+Cloudinary
+Netlify
+Render
+Notion
+
+Challenges
+
+
+We faced significant challenges with two major merge conflicts, experiencing double commits that we had to resolve by using the DROP command. Managing these conflicts required careful coordination and communication to ensure no work was lost and the codebase remained stable.
+Implementing the products list was another challenge. We had to perform extensive filter and sort operations in various places, which required a deep understanding of both frontend and backend logic to ensure the correct display of products. Debugging and optimizing these operations were time-consuming but crucial for the functionality of our platform.
+
+Project Process
+
+
+First, we set up a Figma board where we brainstormed and established our core values, aligning the team on the project vision, workflow, and expectations. We designed the project in Figma, working with mood boards, styling and wireframes inspired by the project where we worked with UX-designers.
+We utilized Notion to work as if this was our real job, starting each morning with a standup and a meeting about the day's workload. Our Notion page included meeting notes, a project timeline, sprints, and all the tasks for the frontend and backend.
+First Week: Focused on design and backend development.
+Second Week: Worked on the frontend.
+Third Week: Connected the frontend and backend, cleaned up code, improved functions, managed error handling, resolved bugs, and applied final styling.

+Google Lighthouse and cross-browser testing show satisfactory results.
+
+View It Live
+
+
+Frontend:
+https://webify-templates.netlify.app/
+
+Backend:
+https://webify-peace.onrender.com

+
+
+Connect with Us
+
+
+Mai Kanetaka:
+https://www.linkedin.com/in/maikanetaka
+https://github.com/maikanetaka
+https://maikanetaka.netlify.app/ 
+
+Wen Zhao:
+https://www.linkedin.com/in/wendywenzhao
+https://github.com/wwenzz
+https://wen-portfolio.netlify.app/ 
+
+Sofie Ferrari Strahl:
+https://www.linkedin.com/in/sofie-ferrari-strahl-495486214
+https://github.com/sofieFerrari
+https://sofieferraristrahl.netlify.app

backend/.gitignore

@@ -0,0 +1,31 @@
+package-lock.json
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

backend/config/cloudinary.js

@@ -0,0 +1,24 @@
+import dotenv from "dotenv";
+import cloudinaryFramework from "cloudinary";
+import multer from "multer";
+import { CloudinaryStorage } from "multer-storage-cloudinary";
+
+dotenv.config();
+
+const cloudinary = cloudinaryFramework.v2;
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME, // this needs to be whatever you get from cloudinary
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+});
+
+const storage = new CloudinaryStorage({
+  cloudinary,
+  params: {
+    folder: "mockups",
+    allowedFormats: ["jpg", "png", "webp"],
+    transformation: [{ width: 1000, height: 1000, crop: "limit" }],
+  },
+});
+
+export const parser = multer({ storage });

backend/config/database.js

@@ -0,0 +1,7 @@
+import mongoose from "mongoose";
+
+export const connectMongoDB = () => {
+  const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-final";
+  mongoose.connect(mongoUrl);
+  mongoose.Promise = Promise;
+};

backend/controllers/mockupController.js

@@ -0,0 +1,14 @@
+import { Product } from "../models/Product.js";
+import asyncHandler from "express-async-handler";
+
+export const uploadMockup = asyncHandler(async (req, res) => {
+  const { name } = req.body;
+  const product = await Product.findOne({ templateName: name }).exec();
+  product.image = req.file.path;
+  await product.save();
+  res.status(200).json({
+    success: true,
+    imageUrl: req.file.path,
+    imageId: req.file.filename,
+  });
+});

backend/controllers/productController.js

@@ -0,0 +1,38 @@
+import { Product } from "../models/Product";
+import asyncHandler from "express-async-handler";
+import webTemplates from "../data/webTemplates.json";
+
+export const displayProducts = asyncHandler(async (req, res) => {
+  // seed the data to the database when necessary
+  if (process.env.RESET_DB) {
+    const seedProductDatabase = async () => {
+      await Product.deleteMany();
+      webTemplates.forEach(template => {
+        new Product(template).save();
+      });
+    };
+    await seedProductDatabase();
+  }
+  const products = await Product.find().select("-__v -description").exec();
+  res.status(200).json(products);
+});
+
+export const displayProductById = asyncHandler(async (req, res) => {
+  const { productId } = req.params;
+  const product = await Product.findOne({ _id: productId }, "-__v").exec();
+  res.status(200).json(product);
+});
+
+export const likeOrUnlikeProductById = asyncHandler(async (req, res) => {
+  const { productId } = req.params;
+  const { unlike } = req.body;
+  const product = await Product.findOne({ _id: productId });
+  if (unlike) {
+    product.likes--;
+    await product.save();
+  } else {
+    product.likes++;
+    await product.save();
+  }
+  res.status(200).json(product);
+});

backend/controllers/userController.js

@@ -0,0 +1,136 @@
+import bcrypt from "bcrypt";
+import asyncHandler from "express-async-handler";
+
+import { Product } from "../models/Product";
+import { User } from "../models/User";
+
+export const registerUser = asyncHandler(async (req, res) => {
+  const { username, email, password } = req.body;
+  const user = new User({
+    username,
+    email,
+    password: bcrypt.hashSync(password, 10),
+  });
+  await user.save();
+  res.status(201).json({
+    message: "Sign up successfully.",
+    success: true,
+    accessToken: user.accessToken,
+    id: user.id,
+  });
+});
+
+export const loginUser = asyncHandler(async (req, res) => {
+  const { username, password, cartItems } = req.body;
+  const user = await User.findOne({ username }).exec();
+
+  if (user && bcrypt.compareSync(password, user.password)) {
+    if (cartItems) {
+      await User.updateOne(
+        { username: username },
+        { $addToSet: { cartItems: { $each: cartItems } } }
+      );
+    }
+    res.status(200).json({
+      message: "Login Successful.",
+      success: true,
+      accessToken: user.accessToken,
+      id: user.id,
+    });
+  } else if (user) {
+    const err = new Error("Incorrect password");
+    err.statusCode = 401;
+    throw err;
+  } else {
+    const err = new Error("Invalid username");
+    err.statusCode = 401;
+    throw err;
+  }
+});
+
+export const deleteUser = asyncHandler(async (req, res) => {
+  const { userId } = req.params;
+  const user = await User.deleteOne({ _id: userId });
+  res.status(200).json({
+    message: "Delete Successful.",
+    success: true,
+  });
+});
+
+export const displayUser = asyncHandler(async (req, res) => {
+  const { userId } = req.params;
+  const user = await User.findOne(
+    { _id: userId },
+    "-__v -password -accessToken"
+  ).exec();
+  res.status(200).json({
+    message: user,
+    success: true,
+  });
+});
+
+export const handleCart = asyncHandler(async (req, res) => {
+  const { userId } = req.params;
+  const { productId, remove } = req.body;
+  if (remove) {
+    const user = await User.findOneAndUpdate(
+      { _id: userId },
+      { $pull: { cartItems: productId } },
+      { new: true }
+    )
+      .select("cartItems -_id")
+      .exec();
+    res.status(200).json(user);
+  } else {
+    const product = await Product.findOne({ _id: productId }).exec();
+    const user = await User.findOneAndUpdate(
+      { _id: userId },
+      { $addToSet: { cartItems: product } },
+      {
+        new: true,
+      }
+    )
+      .select("cartItems -_id")
+      .exec();
+    res.status(200).json(user);
+  }
+});
+
+export const handleFavorite = asyncHandler(async (req, res) => {
+  const { userId } = req.params;
+  const { productId, remove } = req.body;
+  if (remove) {
+    const user = await User.findOneAndUpdate(
+      { _id: userId },
+      { $pull: { favoriteTemplates: productId } },
+      { new: true }
+    )
+      .select("favoriteTemplates -_id")
+      .exec();
+    res.status(200).json(user);
+  } else {
+    const product = await Product.findOne({ _id: productId }).exec();
+    const user = await User.findOneAndUpdate(
+      { _id: userId },
+      { $addToSet: { favoriteTemplates: product } },
+      {
+        new: true,
+      }
+    )
+      .select("favoriteTemplates -_id")
+      .exec();
+    res.status(200).json(user);
+  }
+});
+
+export const clearCart = asyncHandler(async (req, res) => {
+  const { userId } = req.params;
+  const user = await User.findOneAndUpdate(
+    { _id: userId },
+    { $set: { cartItems: [] } },
+    { new: true }
+  )
+    .select("cartItems -_id")
+    .exec();
+  res.status(200).json(user);
+});