ADHD CONNECT - FINAL PROJECT _ BMM

backend/README.md

@@ -1,8 +1,19 @@
 # Backend part of Final Project
 
-This project includes the packages and babel setup for an express server, and is just meant to make things a little simpler to get up and running with.
+The backend serves as the core logic and data management system for the application. It provides the necessary endpoints to handle user authentication, registration and profile management.
 
-## Getting Started
+## Process
 
-1.  Install the required dependencies using `npm install`.
-2.  Start the development server using `npm run dev`.
+Technologies Used:
+
+Node.js
+Express.js
+MongoDB
+Mongoose
+JWT
+Passport.js
+Multer
+
+## LINK
+
+https://project-final-rmn2.onrender.com

backend/config/passport.js

@@ -0,0 +1,41 @@
+import passport from "passport";
+import { Strategy as LocalStrategy } from "passport-local";
+import User from "../models/User";
+
+passport.use(
+  new LocalStrategy(
+    { usernameField: "username" },
+    async (username, password, done) => {
+      try {
+        const user = await User.findOne({ username });
+        if (!user) {
+          return done(null, false, { message: "Incorrect username." });
+        }
+
+        const isMatch = await user.comparePassword(password);
+        if (!isMatch) {
+          return done(null, false, { message: "Incorrect password." });
+        }
+
+        return done(null, user);
+      } catch (error) {
+        return done(error);
+      }
+    }
+  )
+);
+
+passport.serializeUser((user, done) => {
+  done(null, user.id);
+});
+
+passport.deserializeUser(async (id, done) => {
+  try {
+    const user = await User.findById(id);
+    done(null, user);
+  } catch (error) {
+    done(error);
+  }
+});
+
+export default passport;

backend/models/User.js

@@ -0,0 +1,29 @@
+import mongoose from "mongoose";
+import bcrypt from "bcryptjs";
+
+const userSchema = new mongoose.Schema({
+  username: { type: String, required: true, unique: true, minlength: 3 },
+  password: { type: String, required: true, minlength: 6 },
+  role: { type: String, enum: ["Listener", "Seeker"], required: true },
+  name: { type: String },
+  bio: { type: String },
+  hobby: { type: String },
+});
+
+// Middleware to hash the password before saving
+userSchema.pre("save", async function (next) {
+  if (!this.isModified("password")) {
+    return next();
+  }
+  const salt = await bcrypt.genSalt(10);
+  this.password = await bcrypt.hash(this.password, salt);
+  next();
+});
+
+// Method to compare the entered password with the hashed password
+userSchema.methods.comparePassword = function (enteredPassword) {
+  return bcrypt.compare(enteredPassword, this.password);
+};
+
+const User = mongoose.model("User", userSchema);
+export default User;

backend/package.json

@@ -12,9 +12,15 @@
     "@babel/core": "^7.17.9",
     "@babel/node": "^7.16.8",
     "@babel/preset-env": "^7.16.11",
+    "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
     "express": "^4.17.3",
+    "express-list-endpoints": "^7.1.0",
+    "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.4.0",
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.0.1",
+    "passport": "^0.7.0",
+    "passport-local": "^1.0.0"
   }
-}
+}

backend/routes/authProfile.js

@@ -0,0 +1,138 @@
+import express from "express";
+import jwt from "jsonwebtoken";
+import passport from "../config/passport";
+import User from "../models/User";
+
+const router = express.Router();
+
+// Function to generate JWT access token
+const generateAccessToken = (userId) => {
+  try {
+    return jwt.sign({ userId }, process.env.JWT_SECRET, {
+      expiresIn: "24h",
+    });
+  } catch (error) {
+    console.error("Error generating token:", error);
+    throw new Error("Token generation failed");
+  }
+};
+
+// Middleware to athenticate the token
+const authenticateToken = async (req, res, next) => {
+  const authHeader = req.headers["authorization"];
+  const token = authHeader && authHeader.split(" ")[1];
+
+  if (token == null) {
+    return res.status(401).json({ error: "Token is missing" });
+  }
+
+  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
+    if (err) {
+      return res.status(403).json({ error: "Token is invalid" });
+    }
+    req.user = user;
+    next();
+  });
+};
+
+// Route to register a new user
+router.post("/users", async (req, res) => {
+  const { username, password, role } = req.body;
+  if (password.length < 6) {
+    return res
+      .status(400)
+      .json({ error: "Password must be at least 6 characters long" });
+  }
+
+  try {
+    const newUser = new User({ username, password, role });
+    await newUser.save();
+    const accessToken = generateAccessToken(newUser._id);
+    res.status(201).json({ id: newUser._id, accessToken });
+  } catch (error) {
+    console.error("Error registering user:", error);
+    if (error.code === 11000) {
+      res.status(400).json({ error: "Username already exists" });
+    } else {
+      res.status(500).json({ error: "Something went wrong" });
+    }
+  }
+});
+
+// Route to log in a user
+router.post("/sessions", async (req, res, next) => {
+  passport.authenticate("local", { session: false }, (err, user, info) => {
+    if (err || !user) {
+      console.log("Error during authentication:", err);
+      return res
+        .status(400)
+        .json({ error: info ? info.message : "Login failed" });
+    }
+    req.login(user, { session: false }, async (err) => {
+      if (err) {
+        return res.send(err);
+      }
+      const token = generateAccessToken(user._id);
+      const userWithoutAccessToken = user.toObject();
+      delete userWithoutAccessToken.accessToken;
+      return res.json({ user: userWithoutAccessToken, token });
+    });
+  })(req, res, next);
+});
+
+
+// Route for the current session (logged-in user)
+router.get("/session", authenticateToken, async (req, res) => {
+  try {
+    const user = req.user;
+    const loggedInUser = await User.findById(user.userId).select("-password");
+    if (!loggedInUser) {
+      return res.status(404).json({ error: "User not found" });
+    }
+    res.json(loggedInUser);
+  } catch (error) {
+    console.error("Error fetching logged-in user:", error);
+    res.status(500).json({ error: "Failed to fetch logged-in user" });
+  }
+});
+
+// Route to fetch profile
+router.get("/profile", authenticateToken, async (req, res) => {
+  console.log("GET /profile called");
+  try {
+    const user = await User.findById(req.user.userId).select("-password");
+    if (!user) {
+      return res.status(404).json({ error: "User not found" });
+    }
+    res.json(user);
+  } catch (error) {
+    console.error("Error fetching profile:", error);
+    res.status(500).json({ error: "Failed to fetch profile" });
+  }
+});
+
+//Route to update user profile
+router.put("/profile", authenticateToken, async (req, res) => {
+  const { name, bio, hobby } = req.body;
+  const updatedData = { name, bio, hobby };
+
+  try {
+    const user = await User.findByIdAndUpdate(req.user.userId, updatedData, {
+      new: true,
+    });
+    if (!user) {
+      return res.status(404).json({ error: "User not found" });
+    }
+    res.json(user);
+  } catch (error) {
+    console.error("Error updating profile:", error);
+    res.status(500).json({ error: "Failed to update profile" });
+  }
+});
+
+// Authenticated endpoint
+router.get("/secrets", authenticateToken, (req, res) => {
+  res.json({ secret: "This is secret content" });
+});
+
+export default router;

backend/server.js

@@ -1,31 +1,39 @@
-import express from "express";
 import cors from "cors";
-import mongoose from 'mongoose'
+import dotenv from "dotenv";
+import express from "express";
+import expressListEndpoints from "express-list-endpoints";
+import mongoose from "mongoose";
 
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/flowershop"
-mongoose.connect(mongoUrl)
-mongoose.Promise = Promise
+import passport from "./config/passport";
+import authProfileRoutes from "./routes/authProfile";
 
+dotenv.config();
 
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/project-final";
+mongoose.connect(mongoUrl);
+mongoose.Promise = global.Promise;
 
-// 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:
-// PORT=9000 npm start
-const port = process.env.PORT || 8080;
+const port = process.env.PORT || 9000;
 const app = express();
 
-// Add middlewares to enable cors and json body parsing
-app.use(cors());
+// middlewares to enable cors and json body parsing
+const corsOptions = {
+  origin: "https://adhd-connect.netlify.app",
+  credentials: true,
+};
+
+app.use(cors(corsOptions));
 app.use(express.json());
+app.use(passport.initialize());
+
+app.use("/api", authProfileRoutes);
 
-// Start defining your routes here
-// http://localhost:8080/
 app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
+  const endpoints = expressListEndpoints(app);
+  res.json(endpoints);
 });
 
-
 // Start the server
 app.listen(port, () => {
   console.log(`Server running on http://localhost:${port}`);
-});
+});

frontend/README.md

@@ -1,8 +1,30 @@
 # Frontend part of Final Project
 
-This boilerplate is designed to give you a head start in your React projects, with a focus on understanding the structure and components. As a student of Technigo, you'll find this guide helpful in navigating and utilizing the repository.
+The ADHD Community Project is a web application designed to support and empower individuals with ADHD by providing a safe space and understanding community. Users can sign up as either a "Listener" or a "Seeker" to offer or receive support, respectively. The application includes features such as event listings, community guidelines, and user profiles.
 
-## Getting Started
+## About the project
 
-1.  Install the required dependencies using `npm install`.
-2.  Start the development server using `npm run dev`.
+Developed using React for the frontend and Node.js with Express for the backend, the application integrates MongoDB for data storage and utilizes Passport.js with JWT for secure authentication. Key features include user authentication with roles (Listener and Seeker), event listings, and user profile management
+
+Future enhancements include a live chat feature to facilitate real-time communication within the community
+
+## Challenges
+
+Handling Modal Popups:
+
+Challenge: Managing the state and functionality of modal popups for login and signup forms.
+Solution: Created a custom modal context using React's Context API to manage the display and state of modals. This centralized approach streamlined modal management, making it easier to maintain and extend the functionality.
+
+API Integration:
+
+Challenge: Integrating the frontend with the backend API and ensuring seamless data flow.
+Solution: Developed a consistent API service layer to handle requests and responses between the frontend and backend. Implemented error handling and loading states to enhance user experience during data fetching operations.
+
+Profile Management:
+
+Challenge: Allowing users to view and update their profiles securely.
+Solution: Implemented profile fetching and updating functionalities with secure token-based authentication. Ensured data validation and used React forms to allow users to edit their profiles, providing real-time feedback and updates.
+
+## Link
+
+https://adhd-connect.netlify.app

frontend/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg" href="/images/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Technigo React Vite Boiler Plate</title>
+    <title>ADHD Connect</title>
   </head>
   <body>
     <div id="root"></div>

frontend/netlify.toml

@@ -0,0 +1,9 @@
+[build]
+  base = "frontend"
+  publish = "dist"
+  command = "npm run build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

frontend/package.json

@@ -10,17 +10,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "vite": "^4.4.5"
   }
-}
+}