22 |
23 |
28 |
29 |
31 | );
32 | }
33 |
34 | export default App;
35 |
--------------------------------------------------------------------------------
/client/src/pages/AuthPage.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | import LoginForm from "../components/LoginForm";
4 | import SignUpForm from "../components/SignUpForm";
5 |
6 | const AuthPage = () => {
7 | const [isLogin, setIsLogin] = useState(true);
8 |
9 | return (
10 |
15 |
38 | );
39 | };
40 | export default AuthPage;
41 |
--------------------------------------------------------------------------------
/client/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/api/server.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import dotenv from "dotenv";
3 | import cookieParser from "cookie-parser";
4 | import cors from "cors";
5 | import path from "path";
6 | import { createServer } from "http";
7 |
8 | // routes
9 | import authRoutes from "./routes/authRoutes.js";
10 | import userRoutes from "./routes/userRoutes.js";
11 | import matchRoutes from "./routes/matchRoutes.js";
12 | import messageRoutes from "./routes/messageRoutes.js";
13 |
14 | import { connectDB } from "./config/db.js";
15 | import { initializeSocket } from "./socket/socket.server.js";
16 |
17 | dotenv.config();
18 |
19 | const app = express();
20 | const httpServer = createServer(app);
21 | const PORT = process.env.PORT || 5000;
22 |
23 | const __dirname = path.resolve();
24 |
25 | initializeSocket(httpServer);
26 |
27 | app.use(express.json());
28 | app.use(cookieParser());
29 | app.use(
30 | cors({
31 | origin: process.env.CLIENT_URL,
32 | credentials: true,
33 | })
34 | );
35 |
36 | app.use("/api/auth", authRoutes);
37 | app.use("/api/users", userRoutes);
38 | app.use("/api/matches", matchRoutes);
39 | app.use("/api/messages", messageRoutes);
40 |
41 | if (process.env.NODE_ENV === "production") {
42 | app.use(express.static(path.join(__dirname, "/client/dist")));
43 |
44 | app.get("*", (req, res) => {
45 | res.sendFile(path.resolve(__dirname, "client", "dist", "index.html"));
46 | });
47 | }
48 |
49 | httpServer.listen(PORT, () => {
50 | console.log("Server started at this port:" + PORT);
51 | connectDB();
52 | });
53 |
--------------------------------------------------------------------------------
/client/src/components/SwipeArea.jsx:
--------------------------------------------------------------------------------
1 | import TinderCard from "react-tinder-card";
2 | import { useMatchStore } from "../store/useMatchStore";
3 |
4 | const SwipeArea = () => {
5 | const { userProfiles, swipeRight, swipeLeft } = useMatchStore();
6 |
7 | const handleSwipe = (dir, user) => {
8 | if (dir === "right") swipeRight(user);
9 | else if (dir === "left") swipeLeft(user);
10 | };
11 |
12 | return (
13 |
16 |
37 | 17 | {isLogin ? "Sign in to Swipe" : "Create a Swipe account"} 18 |
19 | 20 |
21 | {isLogin ?
36 |
24 |
35 | 25 | {isLogin ? "New to Swipe?" : "Already have an account?"} 26 |
27 | 28 | 34 |
14 | {userProfiles.map((user) => (
15 | handleSwipe(dir, user)}
19 | swipeRequirementType='position'
20 | swipeThreshold={100}
21 | preventSwipe={["up", "down"]}
22 | >
23 |
42 | ))}
43 |
44 | );
45 | };
46 | export default SwipeArea;
47 |
--------------------------------------------------------------------------------
/api/controllers/messageController.js:
--------------------------------------------------------------------------------
1 | import Message from "../models/Message.js";
2 | import { getConnectedUsers, getIO } from "../socket/socket.server.js";
3 |
4 | export const sendMessage = async (req, res) => {
5 | try {
6 | const { content, receiverId } = req.body;
7 |
8 | const newMessage = await Message.create({
9 | sender: req.user.id,
10 | receiver: receiverId,
11 | content,
12 | });
13 |
14 | const io = getIO();
15 | const connectedUsers = getConnectedUsers();
16 | const receiverSocketId = connectedUsers.get(receiverId);
17 |
18 | if (receiverSocketId) {
19 | io.to(receiverSocketId).emit("newMessage", {
20 | message: newMessage,
21 | });
22 | }
23 |
24 | res.status(201).json({
25 | success: true,
26 | message: newMessage,
27 | });
28 | } catch (error) {
29 | console.log("Error in sendMessage: ", error);
30 | res.status(500).json({
31 | success: false,
32 | message: "Internal server error",
33 | });
34 | }
35 | };
36 |
37 | export const getConversation = async (req, res) => {
38 | const { userId } = req.params;
39 | try {
40 | const messages = await Message.find({
41 | $or: [
42 | { sender: req.user._id, receiver: userId },
43 | { sender: userId, receiver: req.user._id },
44 | ],
45 | }).sort("createdAt");
46 |
47 | res.status(200).json({
48 | success: true,
49 | messages,
50 | });
51 | } catch (error) {
52 | console.log("Error in getConversation: ", error);
53 | res.status(500).json({
54 | success: false,
55 | message: "Internal server error",
56 | });
57 | }
58 | };
59 |
--------------------------------------------------------------------------------
/client/src/store/useMessageStore.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../lib/axios";
3 | import toast from "react-hot-toast";
4 | import { getSocket } from "../socket/socket.client";
5 | import { useAuthStore } from "./useAuthStore";
6 |
7 | export const useMessageStore = create((set) => ({
8 | messages: [],
9 | loading: true,
10 |
11 | sendMessage: async (receiverId, content) => {
12 | try {
13 | // mockup a message, show it in the chat immediately
14 | set((state) => ({
15 | messages: [
16 | ...state.messages,
17 | { _id: Date.now(), sender: useAuthStore.getState().authUser._id, content },
18 | ],
19 | }));
20 | const res = await axiosInstance.post("/messages/send", { receiverId, content });
21 | console.log("message sent", res.data);
22 | } catch (error) {
23 | toast.error(error.response.data.message || "Something went wrong");
24 | }
25 | },
26 |
27 | getMessages: async (userId) => {
28 | try {
29 | set({ loading: true });
30 | const res = await axiosInstance.get(`/messages/conversation/${userId}`);
31 | set({ messages: res.data.messages });
32 | } catch (error) {
33 | console.log(error);
34 | set({ messages: [] });
35 | } finally {
36 | set({ loading: false });
37 | }
38 | },
39 |
40 | subscribeToMessages: () => {
41 | const socket = getSocket();
42 | socket.on("newMessage", ({ message }) => {
43 | set((state) => ({ messages: [...state.messages, message] }));
44 | });
45 | },
46 |
47 | unsubscribeFromMessages: () => {
48 | const socket = getSocket();
49 | socket.off("newMessage");
50 | },
51 | }));
52 |
--------------------------------------------------------------------------------
/api/models/User.js:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | import bcrypt from "bcryptjs";
3 |
4 | const userSchema = new mongoose.Schema(
5 | {
6 | name: {
7 | type: String,
8 | required: true,
9 | },
10 | email: {
11 | type: String,
12 | required: true,
13 | unique: true,
14 | },
15 | password: {
16 | type: String,
17 | required: true,
18 | },
19 | age: {
20 | type: Number,
21 | required: true,
22 | },
23 | gender: {
24 | type: String,
25 | required: true,
26 | enum: ["male", "female"],
27 | },
28 | genderPreference: {
29 | type: String,
30 | required: true,
31 | enum: ["male", "female", "both"],
32 | },
33 | bio: { type: String, default: "" },
34 | image: { type: String, default: "" },
35 | likes: [
36 | {
37 | type: mongoose.Schema.Types.ObjectId,
38 | ref: "User",
39 | },
40 | ],
41 | dislikes: [
42 | {
43 | type: mongoose.Schema.Types.ObjectId,
44 | ref: "User",
45 | },
46 | ],
47 | matches: [
48 | {
49 | type: mongoose.Schema.Types.ObjectId,
50 | ref: "User",
51 | },
52 | ],
53 | },
54 | { timestamps: true }
55 | );
56 |
57 | userSchema.pre("save", async function (next) {
58 | // MAKE SURE TO ADD THIS IF CHECK!!! 👇 I forgot to add this in the tutorial
59 | // only hash if password is modified.
60 | if (!this.isModified("password")) {
61 | return next();
62 | }
63 |
64 | this.password = await bcrypt.hash(this.password, 10);
65 | next();
66 | });
67 |
68 | userSchema.methods.matchPassword = async function (enteredPassword) {
69 | return await bcrypt.compare(enteredPassword, this.password);
70 | };
71 |
72 | const User = mongoose.model("User", userSchema);
73 |
74 | export default User;
75 |
--------------------------------------------------------------------------------
/client/src/store/useAuthStore.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../lib/axios";
3 | import toast from "react-hot-toast";
4 | import { disconnectSocket, initializeSocket } from "../socket/socket.client";
5 |
6 | export const useAuthStore = create((set) => ({
7 | authUser: null,
8 | checkingAuth: true,
9 | loading: false,
10 |
11 | signup: async (signupData) => {
12 | try {
13 | set({ loading: true });
14 | const res = await axiosInstance.post("/auth/signup", signupData);
15 | set({ authUser: res.data.user });
16 | initializeSocket(res.data.user._id);
17 |
18 | toast.success("Account created successfully");
19 | } catch (error) {
20 | toast.error(error.response.data.message || "Something went wrong");
21 | } finally {
22 | set({ loading: false });
23 | }
24 | },
25 | login: async (loginData) => {
26 | try {
27 | set({ loading: true });
28 | const res = await axiosInstance.post("/auth/login", loginData);
29 | set({ authUser: res.data.user });
30 | initializeSocket(res.data.user._id);
31 | toast.success("Logged in successfully");
32 | } catch (error) {
33 | toast.error(error.response.data.message || "Something went wrong");
34 | } finally {
35 | set({ loading: false });
36 | }
37 | },
38 | logout: async () => {
39 | try {
40 | const res = await axiosInstance.post("/auth/logout");
41 | disconnectSocket();
42 | if (res.status === 200) set({ authUser: null });
43 | } catch (error) {
44 | toast.error(error.response.data.message || "Something went wrong");
45 | }
46 | },
47 | checkAuth: async () => {
48 | try {
49 | const res = await axiosInstance.get("/auth/me");
50 | initializeSocket(res.data.user._id);
51 | set({ authUser: res.data.user });
52 | } catch (error) {
53 | set({ authUser: null });
54 | console.log(error);
55 | } finally {
56 | set({ checkingAuth: false });
57 | }
58 | },
59 |
60 | setAuthUser: (user) => set({ authUser: user }),
61 | }));
62 |
--------------------------------------------------------------------------------
/client/src/components/LoginForm.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useAuthStore } from "../store/useAuthStore";
3 |
4 | const LoginForm = () => {
5 | const [email, setEmail] = useState("");
6 | const [password, setPassword] = useState("");
7 |
8 | const { login, loading } = useAuthStore();
9 |
10 | return (
11 |
67 | );
68 | };
69 | export default LoginForm;
70 |
--------------------------------------------------------------------------------
/client/src/components/MessageInput.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 | import { useMessageStore } from "../store/useMessageStore";
3 | import { Send, Smile } from "lucide-react";
4 | import EmojiPicker from "emoji-picker-react";
5 |
6 | const MessageInput = ({ match }) => {
7 | const [message, setMessage] = useState("");
8 | const [showEmojiPicker, setShowEmojiPicker] = useState(false);
9 | const emojiPickerRef = useRef(null);
10 |
11 | const { sendMessage } = useMessageStore();
12 |
13 | const handleSendMessage = (e) => {
14 | e.preventDefault();
15 | if (message.trim()) {
16 | sendMessage(match._id, message);
17 | setMessage("");
18 | }
19 | };
20 |
21 | useEffect(() => {
22 | const handleClickOutside = (event) => {
23 | if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target)) {
24 | setShowEmojiPicker(false);
25 | }
26 | };
27 |
28 | document.addEventListener("mousedown", handleClickOutside);
29 | return () => {
30 | document.removeEventListener("mousedown", handleClickOutside);
31 | };
32 | }, []);
33 |
34 | return (
35 |
70 | );
71 | };
72 | export default MessageInput;
73 |
--------------------------------------------------------------------------------
/api/seeds/user.js:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | import bcrypt from "bcryptjs";
3 | import User from "../models/User.js";
4 | import dotenv from "dotenv";
5 |
6 | dotenv.config();
7 |
8 | const maleNames = ["James", "John", "Robert", "Michael", "William", "David", "Richard", "Joseph", "Thomas"];
9 |
10 | const femaleNames = [
11 | "Mary",
12 | "Patricia",
13 | "Jennifer",
14 | "Linda",
15 | "Elizabeth",
16 | "Barbara",
17 | "Susan",
18 | "Jessica",
19 | "Sarah",
20 | "Karen",
21 | "Nancy",
22 | "Lisa",
23 | ];
24 |
25 | const genderPreferences = ["male", "female", "both"];
26 |
27 | const bioDescriptors = [
28 | "Coffee addict",
29 | "Cat lover",
30 | "Dog person",
31 | "Foodie",
32 | "Gym rat",
33 | "Bookworm",
34 | "Movie buff",
35 | "Music lover",
36 | "Travel junkie",
37 | "Beach bum",
38 | "City slicker",
39 | "Outdoor enthusiast",
40 | "Netflix binger",
41 | "Yoga enthusiast",
42 | "Craft beer connoisseur",
43 | "Sushi fanatic",
44 | "Adventure seeker",
45 | "Night owl",
46 | "Early bird",
47 | "Aspiring chef",
48 | ];
49 |
50 | const generateBio = () => {
51 | const descriptors = bioDescriptors.sort(() => 0.5 - Math.random()).slice(0, 3);
52 | return descriptors.join(" | ");
53 | };
54 |
55 | const generateRandomUser = (gender, index) => {
56 | const names = gender === "male" ? maleNames : femaleNames;
57 | const name = names[index];
58 | const age = Math.floor(Math.random() * (45 - 21 + 1) + 21);
59 | return {
60 | name,
61 | email: `${name.toLowerCase()}${age}@example.com`,
62 | password: bcrypt.hashSync("password123", 10),
63 | age,
64 | gender,
65 | genderPreference: genderPreferences[Math.floor(Math.random() * genderPreferences.length)],
66 | bio: generateBio(),
67 | image: `/${gender}/${index + 1}.jpg`,
68 | };
69 | };
70 |
71 | const seedUsers = async () => {
72 | try {
73 | await mongoose.connect(process.env.MONGO_URI);
74 |
75 | await User.deleteMany({});
76 |
77 | const maleUsers = maleNames.map((_, i) => generateRandomUser("male", i));
78 | const femaleUsers = femaleNames.map((_, i) => generateRandomUser("female", i));
79 |
80 | const allUsers = [...maleUsers, ...femaleUsers];
81 |
82 | await User.insertMany(allUsers);
83 |
84 | console.log("Database seeded successfully with users having concise bios");
85 | } catch (error) {
86 | console.error("Error seeding database:", error);
87 | } finally {
88 | mongoose.disconnect();
89 | }
90 | };
91 |
92 | seedUsers();
93 |
--------------------------------------------------------------------------------
/client/src/store/useMatchStore.js:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { axiosInstance } from "../lib/axios";
3 | import toast from "react-hot-toast";
4 | import { getSocket } from "../socket/socket.client";
5 |
6 | export const useMatchStore = create((set) => ({
7 | matches: [],
8 | isLoadingMyMatches: false,
9 | isLoadingUserProfiles: false,
10 | userProfiles: [],
11 | swipeFeedback: null,
12 |
13 | getMyMatches: async () => {
14 | try {
15 | set({ isLoadingMyMatches: true });
16 | const res = await axiosInstance.get("/matches");
17 | set({ matches: res.data.matches });
18 | } catch (error) {
19 | set({ matches: [] });
20 | toast.error(error.response.data.message || "Something went wrong");
21 | } finally {
22 | set({ isLoadingMyMatches: false });
23 | }
24 | },
25 |
26 | getUserProfiles: async () => {
27 | try {
28 | set({ isLoadingUserProfiles: true });
29 | const res = await axiosInstance.get("/matches/user-profiles");
30 | set({ userProfiles: res.data.users });
31 | } catch (error) {
32 | set({ userProfiles: [] });
33 | toast.error(error.response.data.message || "Something went wrong");
34 | } finally {
35 | set({ isLoadingUserProfiles: false });
36 | }
37 | },
38 |
39 | swipeLeft: async (user) => {
40 | try {
41 | set({ swipeFeedback: "passed" });
42 | await axiosInstance.post("/matches/swipe-left/" + user._id);
43 | } catch (error) {
44 | console.log(error);
45 | toast.error("Failed to swipe left");
46 | } finally {
47 | setTimeout(() => set({ swipeFeedback: null }), 1500);
48 | }
49 | },
50 | swipeRight: async (user) => {
51 | try {
52 | set({ swipeFeedback: "liked" });
53 | await axiosInstance.post("/matches/swipe-right/" + user._id);
54 | } catch (error) {
55 | console.log(error);
56 | toast.error("Failed to swipe right");
57 | } finally {
58 | setTimeout(() => set({ swipeFeedback: null }), 1500);
59 | }
60 | },
61 |
62 | subscribeToNewMatches: () => {
63 | try {
64 | const socket = getSocket();
65 |
66 | socket.on("newMatch", (newMatch) => {
67 | set((state) => ({
68 | matches: [...state.matches, newMatch],
69 | }));
70 | toast.success("You got a new match!");
71 | });
72 | } catch (error) {
73 | console.log(error);
74 | }
75 | },
76 |
77 | unsubscribeFromNewMatches: () => {
78 | try {
79 | const socket = getSocket();
80 | socket.off("newMatch");
81 | } catch (error) {
82 | console.error(error);
83 | }
84 | },
85 | }));
86 |
--------------------------------------------------------------------------------
/client/src/pages/HomePage.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import Sidebar from "../components/Sidebar";
3 | import { Header } from "../components/Header";
4 | import { useMatchStore } from "../store/useMatchStore";
5 | import { Frown } from "lucide-react";
6 |
7 | import SwipeArea from "../components/SwipeArea";
8 | import SwipeFeedback from "../components/SwipeFeedback";
9 | import { useAuthStore } from "../store/useAuthStore";
10 |
11 | const HomePage = () => {
12 | const { isLoadingUserProfiles, getUserProfiles, userProfiles, subscribeToNewMatches, unsubscribeFromNewMatches } =
13 | useMatchStore();
14 |
15 | const { authUser } = useAuthStore();
16 |
17 | useEffect(() => {
18 | getUserProfiles();
19 | }, [getUserProfiles]);
20 |
21 | useEffect(() => {
22 | authUser && subscribeToNewMatches();
23 |
24 | return () => {
25 | unsubscribeFromNewMatches();
26 | };
27 | }, [subscribeToNewMatches, unsubscribeFromNewMatches, authUser]);
28 |
29 | return (
30 |
27 |
28 | 
33 |
34 |
41 |
35 |
40 | 36 | {user.name}, {user.age} 37 |
38 |{user.bio}
39 |
35 |
52 | );
53 | };
54 | export default HomePage;
55 |
56 | const NoMoreProfiles = () => (
57 |
37 |
39 | {userProfiles.length > 0 && !isLoadingUserProfiles && (
40 | <>
41 |
50 |
51 |
58 |
62 | );
63 |
64 | const LoadingUI = () => {
65 | return (
66 | Woah there, speedy fingers!
60 |Bro are you OK? Maybe it's time to touch some grass.
61 |
67 |
79 | );
80 | };
81 |
--------------------------------------------------------------------------------
/api/controllers/authController.js:
--------------------------------------------------------------------------------
1 | import User from "../models/User.js";
2 | import jwt from "jsonwebtoken";
3 |
4 | const signToken = (id) => {
5 | // jwt token
6 | return jwt.sign({ id }, process.env.JWT_SECRET, {
7 | expiresIn: "7d",
8 | });
9 | };
10 |
11 | export const signup = async (req, res) => {
12 | const { name, email, password, age, gender, genderPreference } = req.body;
13 | try {
14 | if (!name || !email || !password || !age || !gender || !genderPreference) {
15 | return res.status(400).json({
16 | success: false,
17 | message: "All fields are required",
18 | });
19 | }
20 |
21 | if (age < 18) {
22 | return res.status(400).json({
23 | success: false,
24 | message: "You must at lest 18 years old",
25 | });
26 | }
27 |
28 | if (password.length < 6) {
29 | return res.status(400).json({
30 | success: false,
31 | message: "Password must be at least 6 characters",
32 | });
33 | }
34 |
35 | const newUser = await User.create({
36 | name,
37 | email,
38 | password,
39 | age,
40 | gender,
41 | genderPreference,
42 | });
43 |
44 | const token = signToken(newUser._id);
45 |
46 | res.cookie("jwt", token, {
47 | maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in milliseconds
48 | httpOnly: true, // prevents XSS attacks
49 | sameSite: "strict", // prevents CSRF attacks
50 | secure: process.env.NODE_ENV === "production",
51 | });
52 |
53 | res.status(201).json({
54 | success: true,
55 | user: newUser,
56 | });
57 | } catch (error) {
58 | console.log("Error in signup controller:", error);
59 | res.status(500).json({ success: false, message: "Server error" });
60 | }
61 | };
62 | export const login = async (req, res) => {
63 | const { email, password } = req.body;
64 | try {
65 | if (!email || !password) {
66 | return res.status(400).json({
67 | success: false,
68 | message: "All fields are required",
69 | });
70 | }
71 |
72 | const user = await User.findOne({ email }).select("+password");
73 |
74 | if (!user || !(await user.matchPassword(password))) {
75 | return res.status(401).json({
76 | success: false,
77 | message: "Invalid email or password",
78 | });
79 | }
80 |
81 | const token = signToken(user._id);
82 |
83 | res.cookie("jwt", token, {
84 | maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in milliseconds
85 | httpOnly: true, // prevents XSS attacks
86 | sameSite: "strict", // prevents CSRF attacks
87 | secure: process.env.NODE_ENV === "production",
88 | });
89 |
90 | res.status(200).json({
91 | success: true,
92 | user,
93 | });
94 | } catch (error) {
95 | console.log("Error in login controller:", error);
96 | res.status(500).json({ success: false, message: "Server error" });
97 | }
98 | };
99 | export const logout = async (req, res) => {
100 | res.clearCookie("jwt");
101 | res.status(200).json({ success: true, message: "Logged out successfully" });
102 | };
103 |
--------------------------------------------------------------------------------
/client/src/components/Sidebar.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { Heart, Loader, MessageCircle, X } from "lucide-react";
3 | import { Link } from "react-router-dom";
4 | import { useMatchStore } from "../store/useMatchStore";
5 |
6 | const Sidebar = () => {
7 | const [isOpen, setIsOpen] = useState(false);
8 |
9 | const toggleSidebar = () => setIsOpen(!isOpen);
10 |
11 | const { getMyMatches, matches, isLoadingMyMatches } = useMatchStore();
12 |
13 | useEffect(() => {
14 | getMyMatches();
15 | }, [getMyMatches]);
16 |
17 | return (
18 | <>
19 |
68 |
78 |
69 |
70 |
71 |
72 |
77 |
73 |
74 |
75 |
76 |
27 |
62 |
63 |
69 |
70 | );
71 | };
72 | export default Sidebar;
73 |
74 | const NoMatchesFound = () => (
75 |
28 | {/* Header */}
29 |
61 |
30 |
38 |
39 | Matches
31 | 37 |
40 | {isLoadingMyMatches ? (
41 |
60 |
48 | 
53 |
54 |
56 |
57 | ))
58 | )}
59 | {match.name}
55 |
76 |
82 | );
83 |
84 | const LoadingState = () => (
85 | No Matches Yet
78 |79 | Don't worry! Your perfect match is just around the corner. Keep swiping! 80 |
81 |
86 |
90 | );
91 |
--------------------------------------------------------------------------------
/api/controllers/matchController.js:
--------------------------------------------------------------------------------
1 | import User from "../models/User.js";
2 | import { getConnectedUsers, getIO } from "../socket/socket.server.js";
3 |
4 | export const swipeRight = async (req, res) => {
5 | try {
6 | const { likedUserId } = req.params;
7 | const currentUser = await User.findById(req.user.id);
8 | const likedUser = await User.findById(likedUserId);
9 |
10 | if (!likedUser) {
11 | return res.status(404).json({
12 | success: false,
13 | message: "User not found",
14 | });
15 | }
16 |
17 | if (!currentUser.likes.includes(likedUserId)) {
18 | currentUser.likes.push(likedUserId);
19 | await currentUser.save();
20 |
21 | // if the other user already liked us, it's a match, so let's update both users
22 | if (likedUser.likes.includes(currentUser.id)) {
23 | currentUser.matches.push(likedUserId);
24 | likedUser.matches.push(currentUser.id);
25 |
26 | await Promise.all([await currentUser.save(), await likedUser.save()]);
27 |
28 | // send notification in real-time with socket.io
29 | const connectedUsers = getConnectedUsers();
30 | const io = getIO();
31 |
32 | const likedUserSocketId = connectedUsers.get(likedUserId);
33 |
34 | if (likedUserSocketId) {
35 | io.to(likedUserSocketId).emit("newMatch", {
36 | _id: currentUser._id,
37 | name: currentUser.name,
38 | image: currentUser.image,
39 | });
40 | }
41 |
42 | const currentSocketId = connectedUsers.get(currentUser._id.toString());
43 | if (currentSocketId) {
44 | io.to(currentSocketId).emit("newMatch", {
45 | _id: likedUser._id,
46 | name: likedUser.name,
47 | image: likedUser.image,
48 | });
49 | }
50 | }
51 | }
52 |
53 | res.status(200).json({
54 | success: true,
55 | user: currentUser,
56 | });
57 | } catch (error) {
58 | console.log("Error in swipeRight: ", error);
59 |
60 | res.status(500).json({
61 | success: false,
62 | message: "Internal server error",
63 | });
64 | }
65 | };
66 |
67 | export const swipeLeft = async (req, res) => {
68 | try {
69 | const { dislikedUserId } = req.params;
70 | const currentUser = await User.findById(req.user.id);
71 |
72 | if (!currentUser.dislikes.includes(dislikedUserId)) {
73 | currentUser.dislikes.push(dislikedUserId);
74 | await currentUser.save();
75 | }
76 |
77 | res.status(200).json({
78 | success: true,
79 | user: currentUser,
80 | });
81 | } catch (error) {
82 | console.log("Error in swipeLeft: ", error);
83 |
84 | res.status(500).json({
85 | success: false,
86 | message: "Internal server error",
87 | });
88 | }
89 | };
90 |
91 | export const getMatches = async (req, res) => {
92 | try {
93 | const user = await User.findById(req.user.id).populate("matches", "name image");
94 |
95 | res.status(200).json({
96 | success: true,
97 | matches: user.matches,
98 | });
99 | } catch (error) {
100 | console.log("Error in getMatches: ", error);
101 |
102 | res.status(500).json({
103 | success: false,
104 | message: "Internal server error",
105 | });
106 | }
107 | };
108 |
109 | export const getUserProfiles = async (req, res) => {
110 | try {
111 | const currentUser = await User.findById(req.user.id);
112 |
113 | const users = await User.find({
114 | $and: [
115 | { _id: { $ne: currentUser.id } },
116 | { _id: { $nin: currentUser.likes } },
117 | { _id: { $nin: currentUser.dislikes } },
118 | { _id: { $nin: currentUser.matches } },
119 | {
120 | gender:
121 | currentUser.genderPreference === "both"
122 | ? { $in: ["male", "female"] }
123 | : currentUser.genderPreference,
124 | },
125 | { genderPreference: { $in: [currentUser.gender, "both"] } },
126 | ],
127 | });
128 |
129 | res.status(200).json({
130 | success: true,
131 | users,
132 | });
133 | } catch (error) {
134 | console.log("Error in getUserProfiles: ", error);
135 |
136 | res.status(500).json({
137 | success: false,
138 | message: "Internal server error",
139 | });
140 | }
141 | };
142 |
--------------------------------------------------------------------------------
/client/src/pages/ChatPage.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { Header } from "../components/Header";
3 | import { useAuthStore } from "../store/useAuthStore";
4 | import { useMatchStore } from "../store/useMatchStore";
5 | import { useMessageStore } from "../store/useMessageStore";
6 | import { Link, useParams } from "react-router-dom";
7 | import { Loader, UserX } from "lucide-react";
8 | import MessageInput from "../components/MessageInput";
9 |
10 | const ChatPage = () => {
11 | const { getMyMatches, matches, isLoadingMyMatches } = useMatchStore();
12 | const { messages, getMessages, subscribeToMessages, unsubscribeFromMessages } = useMessageStore();
13 | const { authUser } = useAuthStore();
14 |
15 | const { id } = useParams();
16 |
17 | const match = matches.find((m) => m?._id === id);
18 |
19 | useEffect(() => {
20 | if (authUser && id) {
21 | getMyMatches();
22 | getMessages(id);
23 | subscribeToMessages();
24 | }
25 |
26 | return () => {
27 | unsubscribeFromMessages();
28 | };
29 | }, [getMyMatches, authUser, getMessages, subscribeToMessages, unsubscribeFromMessages, id]);
30 |
31 | if (isLoadingMyMatches) return Loading Matches
88 |We're finding your perfect matches. This might take a moment...
89 |
36 |
72 | );
73 | };
74 | export default ChatPage;
75 |
76 | const MatchNotFound = () => (
77 |
39 |
71 |
40 |
44 |
46 |
47 | {match.name}
45 |
48 | {messages.length === 0 ? (
49 |
69 | Start your conversation with {match.name}
50 | ) : ( 51 | messages.map((msg) => ( 52 |
56 |
63 | {msg.content}
64 |
65 |
66 | ))
67 | )}
68 |
78 |
91 | );
92 |
93 | const LoadingMessagesUI = () => (
94 |
79 |
90 | Match Not Found
81 |Oops! It seems this match doesn't exist or has been removed.
82 | 87 | Go Back To Home 88 | 89 |
95 |
112 | );
113 |
--------------------------------------------------------------------------------
/client/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 | import { useAuthStore } from "../store/useAuthStore";
3 | import { Link } from "react-router-dom";
4 | import { Flame, User, LogOut, Menu } from "lucide-react";
5 |
6 | export const Header = () => {
7 | const { authUser, logout } = useAuthStore();
8 | const [dropdownOpen, setDropdownOpen] = useState(false);
9 | const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
10 | const dropdownRef = useRef(null);
11 |
12 | useEffect(() => {
13 | const handleClickOutside = (event) => {
14 | if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
15 | setDropdownOpen(false);
16 | }
17 | };
18 |
19 | document.addEventListener("mousedown", handleClickOutside);
20 |
21 | return () => document.removeEventListener("mousedown", handleClickOutside);
22 | }, []);
23 |
24 | return (
25 |
96 |
111 | Loading Chat
98 |Please wait while we fetch your conversation...
99 |
100 |
101 |
105 |
109 |
110 |
27 |
98 |
99 | {/* MOBILE MENU */}
100 |
101 | {mobileMenuOpen && (
102 |
28 |
97 |
29 |
30 |
34 |
35 |
36 | {authUser ? (
37 |
87 |
88 |
38 |
49 | {dropdownOpen && (
50 |
69 | ) : (
70 | <>
71 |
75 | Login
76 |
77 |
82 | Sign Up
83 |
84 |
85 | )}
86 |
51 | setDropdownOpen(false)}
55 | >
56 |
67 | )}
68 |
89 |
95 |
96 |
103 |
143 | )}
144 |
104 | {authUser ? (
105 | <>
106 | setMobileMenuOpen(false)}
110 | >
111 | Profile
112 |
113 |
122 |
123 | ) : (
124 | <>
125 | setMobileMenuOpen(false)}
129 | >
130 | Login
131 |
132 | setMobileMenuOpen(false)}
136 | >
137 | Sign Up
138 |
139 |
140 | )}
141 |
142 |
40 |
43 |
44 |
46 |
47 | Your Profile
45 |
48 |
49 |