ADHD CONNECT - FINAL PROJECT _ BMM

README.md

@@ -1,13 +1,30 @@
-# Final Project
+# Frontend part of Final Project
 
-Replace this readme with your own information about your project.
+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.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## About the project
 
-## The problem
+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
 
-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?
+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.
 
 ## 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.
+https://adhd-connect.netlify.app

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,37 @@
 # 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.
+This document provides an overview of the frontend development process, tools used, and key features implemented for the ADHD Community project.
 
-## Getting Started
+# Tools and Technologies
 
-1.  Install the required dependencies using `npm install`.
-2.  Start the development server using `npm run dev`.
+React: Building the user interface.
+Tailwind CSS: Styling the application.
+Axios: HTTP requests to the backend.
+React Router: Navigation between pages.
+Context API: Managing global state.
+
+# Key Components
+
+1. # AuthForm.jsx
+   Handles both login and signup functionalities within a modal.
+   Switches between login and signup modes.
+   Validates user input and displays error messages.
+   Integrates with the backend for authentication.
+   Shows a loading animation during network requests.
+2. # ModalContext.jsx
+   Provides context for showing and hiding modals.
+3. # EventCard.jsx
+   Displays event details with a flip animation for more information.
+   Responsive design for different screen sizes.
+4. #ProfilePage.jsx
+   Displays and updates user profile information.
+   Allows users to log out.
+5. # Menu.jsx and Footer.jsx
+   Navigation menu and footer for the application.
+6. # AboutUsPage.jsx and FindOutMorePage.jsx
+   About Us page with information on the community's mission, values, and team.
+   Find Out More page with facts about ADHD and roles in the community.
+
+# Conclusion
+
+This project integrates various frontend technologies to create a responsive, user-friendly web application. Using React, Tailwind CSS, and context API, it offers seamless user experiences and robust authentication mechanisms.