├── .gitignore
├── LICENSE
├── README.md
├── backend
├── dist
│ └── src
│ │ ├── controllers
│ │ ├── auth.controller.js
│ │ └── message.controller.js
│ │ ├── db
│ │ └── prisma.js
│ │ ├── index.js
│ │ ├── middleware
│ │ └── protectRoute.js
│ │ ├── routes
│ │ ├── auth.route.js
│ │ └── message.route.js
│ │ ├── socket
│ │ └── socket.js
│ │ └── utils
│ │ └── generateToken.js
├── prisma
│ └── schema.prisma
└── src
│ ├── controllers
│ ├── auth.controller.ts
│ └── message.controller.ts
│ ├── db
│ └── prisma.ts
│ ├── index.ts
│ ├── middleware
│ └── protectRoute.ts
│ ├── routes
│ ├── auth.route.ts
│ └── message.route.ts
│ ├── socket
│ └── socket.ts
│ └── utils
│ └── generateToken.ts
├── frontend
├── .eslintrc.cjs
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── bg.jpg
│ └── vite.svg
├── src
│ ├── App.tsx
│ ├── _ui_design
│ │ ├── assets
│ │ │ └── sounds
│ │ │ │ └── notification.mp3
│ │ ├── bg.jpg
│ │ ├── components
│ │ │ ├── GenderCheckbox.tsx
│ │ │ ├── messages
│ │ │ │ ├── Message.tsx
│ │ │ │ ├── MessageContainer.tsx
│ │ │ │ ├── MessageInput.tsx
│ │ │ │ └── Messages.tsx
│ │ │ ├── sidebar
│ │ │ │ ├── Conversation.tsx
│ │ │ │ ├── Conversations.tsx
│ │ │ │ ├── LogoutButton.tsx
│ │ │ │ ├── SearchInput.tsx
│ │ │ │ └── Sidebar.tsx
│ │ │ └── skeletons
│ │ │ │ └── MessageSkeleton.tsx
│ │ ├── dummy_data
│ │ │ └── dummy.ts
│ │ └── pages
│ │ │ ├── Home.tsx
│ │ │ ├── Login.tsx
│ │ │ └── SignUp.tsx
│ ├── assets
│ │ └── sounds
│ │ │ └── notification.mp3
│ ├── components
│ │ ├── GenderCheckbox.tsx
│ │ ├── messages
│ │ │ ├── Message.tsx
│ │ │ ├── MessageContainer.tsx
│ │ │ ├── MessageInput.tsx
│ │ │ └── Messages.tsx
│ │ ├── sidebar
│ │ │ ├── Conversation.tsx
│ │ │ ├── Conversations.tsx
│ │ │ ├── LogoutButton.tsx
│ │ │ ├── SearchInput.tsx
│ │ │ └── Sidebar.tsx
│ │ └── skeletons
│ │ │ └── MessageSkeleton.tsx
│ ├── context
│ │ ├── AuthContext.tsx
│ │ └── SocketContext.tsx
│ ├── dummy_data
│ │ └── dummy.ts
│ ├── hooks
│ │ ├── useChatScroll.ts
│ │ ├── useGetConversations.ts
│ │ ├── useGetMessages.ts
│ │ ├── useListenMessages.ts
│ │ ├── useLogin.tsx
│ │ ├── useLogout.tsx
│ │ ├── useSendMessage.tsx
│ │ └── useSignup.tsx
│ ├── index.css
│ ├── main.tsx
│ ├── pages
│ │ ├── Home.tsx
│ │ ├── Login.tsx
│ │ └── SignUp.tsx
│ ├── types
│ │ └── global.d.ts
│ ├── utils
│ │ ├── emojis.ts
│ │ └── extractTime.ts
│ ├── vite-env.d.ts
│ └── zustand
│ │ └── useConversation.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
├── package-lock.json
├── package.json
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | # Keep environment variables out of version control
3 | .env
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Burak
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # PERN Stack Project: Build a Real Time Chat App | Postgres, TypeScript, Prisma
2 |
3 | 
4 |
5 | [Video Tutorial on Youtube](https://youtu.be/vL24eiwAG_g)
6 |
7 | Some Features:
8 |
9 | - 🌟 Tech stack: PERN + TypeScript + Socket.io + Prisma + TailwindCSS
10 | - 🎃 Authentication && Authorization with JWT
11 | - 👾 Real-time messaging with Socket.io
12 | - 🚀 Online user status (Socket.io and React Context)
13 | - 👌 Global state management with Zustand
14 | - 🐞 Error handling both on the server and on the client
15 | - 👻 TypeScript Tips and Tricks
16 | - ⭐ At the end Deployment like a pro for FREE!
17 | - ⏳ And much more!
18 |
19 | # Run Locally
20 |
21 | ### Setup .env file
22 |
23 | ```js
24 | DATABASE_URL=...
25 | JWT_SECRET=...
26 | NODE_ENV=...
27 | PORT=...
28 | ```
29 |
30 | ### Install dependencies
31 |
32 | ```shell
33 | npm install
34 | ```
35 |
36 | ### Build the app
37 |
38 | ```shell
39 | npm run build
40 | ```
41 |
42 | ### Start the app
43 |
44 | ```shell
45 | npm start
46 | ```
47 |
48 | ### Like and Subscribe 🌟
49 |
--------------------------------------------------------------------------------
/backend/dist/src/controllers/auth.controller.js:
--------------------------------------------------------------------------------
1 | import prisma from "../db/prisma.js";
2 | import bcryptjs from "bcryptjs";
3 | import generateToken from "../utils/generateToken.js";
4 | export const signup = async (req, res) => {
5 | try {
6 | const { fullName, username, password, confirmPassword, gender } = req.body;
7 | if (!fullName || !username || !password || !confirmPassword || !gender) {
8 | return res.status(400).json({ error: "Please fill in all fields" });
9 | }
10 | if (password !== confirmPassword) {
11 | return res.status(400).json({ error: "Passwords don't match" });
12 | }
13 | const user = await prisma.user.findUnique({ where: { username } });
14 | if (user) {
15 | return res.status(400).json({ error: "Username already exists" });
16 | }
17 | const salt = await bcryptjs.genSalt(10);
18 | const hashedPassword = await bcryptjs.hash(password, salt);
19 | // https://avatar-placeholder.iran.liara.run/
20 | const boyProfilePic = `https://avatar.iran.liara.run/public/boy?username=${username}`;
21 | const girlProfilePic = `https://avatar.iran.liara.run/public/girl?username=${username}`;
22 | const newUser = await prisma.user.create({
23 | data: {
24 | fullName,
25 | username,
26 | password: hashedPassword,
27 | gender,
28 | profilePic: gender === "male" ? boyProfilePic : girlProfilePic,
29 | },
30 | });
31 | if (newUser) {
32 | // generate token in a sec
33 | generateToken(newUser.id, res);
34 | res.status(201).json({
35 | id: newUser.id,
36 | fullName: newUser.fullName,
37 | username: newUser.username,
38 | profilePic: newUser.profilePic,
39 | });
40 | }
41 | else {
42 | res.status(400).json({ error: "Invalid user data" });
43 | }
44 | }
45 | catch (error) {
46 | console.log("Error in signup controller", error.message);
47 | res.status(500).json({ error: "Internal Server Error" });
48 | }
49 | };
50 | export const login = async (req, res) => {
51 | try {
52 | const { username, password } = req.body;
53 | const user = await prisma.user.findUnique({ where: { username } });
54 | if (!user) {
55 | return res.status(400).json({ error: "Invalid credentials" });
56 | }
57 | const isPasswordCorrect = await bcryptjs.compare(password, user.password);
58 | if (!isPasswordCorrect) {
59 | return res.status(400).json({ error: "Invalid credentials" });
60 | }
61 | generateToken(user.id, res);
62 | res.status(200).json({
63 | id: user.id,
64 | fullName: user.fullName,
65 | username: user.username,
66 | profilePic: user.profilePic,
67 | });
68 | }
69 | catch (error) {
70 | console.log("Error in login controller", error.message);
71 | res.status(500).json({ error: "Internal Server Error" });
72 | }
73 | };
74 | export const logout = async (req, res) => {
75 | try {
76 | res.cookie("jwt", "", { maxAge: 0 });
77 | res.status(200).json({ message: "Logged out successfully" });
78 | }
79 | catch (error) {
80 | console.log("Error in logout controller", error.message);
81 | res.status(500).json({ error: "Internal Server Error" });
82 | }
83 | };
84 | export const getMe = async (req, res) => {
85 | try {
86 | const user = await prisma.user.findUnique({ where: { id: req.user.id } });
87 | if (!user) {
88 | return res.status(404).json({ error: "User not found" });
89 | }
90 | res.status(200).json({
91 | id: user.id,
92 | fullName: user.fullName,
93 | username: user.username,
94 | profilePic: user.profilePic,
95 | });
96 | }
97 | catch (error) {
98 | console.log("Error in getMe controller", error.message);
99 | res.status(500).json({ error: "Internal Server Error" });
100 | }
101 | };
102 |
--------------------------------------------------------------------------------
/backend/dist/src/controllers/message.controller.js:
--------------------------------------------------------------------------------
1 | import prisma from "../db/prisma.js";
2 | import { getReceiverSocketId, io } from "../socket/socket.js";
3 | export const sendMessage = async (req, res) => {
4 | try {
5 | const { message } = req.body;
6 | const { id: receiverId } = req.params;
7 | const senderId = req.user.id;
8 | let conversation = await prisma.conversation.findFirst({
9 | where: {
10 | participantIds: {
11 | hasEvery: [senderId, receiverId],
12 | },
13 | },
14 | });
15 | // the very first message is being sent, that's why we need to create a new conversation
16 | if (!conversation) {
17 | conversation = await prisma.conversation.create({
18 | data: {
19 | participantIds: {
20 | set: [senderId, receiverId],
21 | },
22 | },
23 | });
24 | }
25 | const newMessage = await prisma.message.create({
26 | data: {
27 | senderId,
28 | body: message,
29 | conversationId: conversation.id,
30 | },
31 | });
32 | if (newMessage) {
33 | conversation = await prisma.conversation.update({
34 | where: {
35 | id: conversation.id,
36 | },
37 | data: {
38 | messages: {
39 | connect: {
40 | id: newMessage.id,
41 | },
42 | },
43 | },
44 | });
45 | }
46 | // Socket io will go here
47 | const receiverSocketId = getReceiverSocketId(receiverId);
48 | if (receiverSocketId) {
49 | io.to(receiverSocketId).emit("newMessage", newMessage);
50 | }
51 | res.status(201).json(newMessage);
52 | }
53 | catch (error) {
54 | console.error("Error in sendMessage: ", error.message);
55 | res.status(500).json({ error: "Internal server error" });
56 | }
57 | };
58 | export const getMessages = async (req, res) => {
59 | try {
60 | const { id: userToChatId } = req.params;
61 | const senderId = req.user.id;
62 | const conversation = await prisma.conversation.findFirst({
63 | where: {
64 | participantIds: {
65 | hasEvery: [senderId, userToChatId],
66 | },
67 | },
68 | include: {
69 | messages: {
70 | orderBy: {
71 | createdAt: "asc",
72 | },
73 | },
74 | },
75 | });
76 | if (!conversation) {
77 | return res.status(200).json([]);
78 | }
79 | res.status(200).json(conversation.messages);
80 | }
81 | catch (error) {
82 | console.error("Error in getMessages: ", error.message);
83 | res.status(500).json({ error: "Internal server error" });
84 | }
85 | };
86 | export const getUsersForSidebar = async (req, res) => {
87 | try {
88 | const authUserId = req.user.id;
89 | const users = await prisma.user.findMany({
90 | where: {
91 | id: {
92 | not: authUserId,
93 | },
94 | },
95 | select: {
96 | id: true,
97 | fullName: true,
98 | profilePic: true,
99 | },
100 | });
101 | res.status(200).json(users);
102 | }
103 | catch (error) {
104 | console.error("Error in getUsersForSidebar: ", error.message);
105 | res.status(500).json({ error: "Internal server error" });
106 | }
107 | };
108 |
--------------------------------------------------------------------------------
/backend/dist/src/db/prisma.js:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 | const prisma = new PrismaClient();
3 | export default prisma;
4 |
--------------------------------------------------------------------------------
/backend/dist/src/index.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import cookieParser from "cookie-parser";
3 | import authRoutes from "./routes/auth.route.js";
4 | import messageRoutes from "./routes/message.route.js";
5 | import dotenv from "dotenv";
6 | import { app, server } from "./socket/socket.js";
7 | dotenv.config();
8 | const PORT = process.env.PORT || 5001;
9 | app.use(cookieParser()); // for parsing cookies
10 | app.use(express.json()); // for parsing application/json
11 | app.use("/api/auth", authRoutes);
12 | app.use("/api/messages", messageRoutes);
13 | server.listen(PORT, () => {
14 | console.log("Server is running on port " + PORT);
15 | });
16 | // Todo: Configure this server for the deployment
17 |
--------------------------------------------------------------------------------
/backend/dist/src/middleware/protectRoute.js:
--------------------------------------------------------------------------------
1 | import jwt from "jsonwebtoken";
2 | import prisma from "../db/prisma.js";
3 | const protectRoute = async (req, res, next) => {
4 | try {
5 | const token = req.cookies.jwt;
6 | if (!token) {
7 | return res.status(401).json({ error: "Unauthorized - No token provided" });
8 | }
9 | const decoded = jwt.verify(token, process.env.JWT_SECRET);
10 | if (!decoded) {
11 | return res.status(401).json({ error: "Unauthorized - Invalid Token" });
12 | }
13 | const user = await prisma.user.findUnique({
14 | where: { id: decoded.userId },
15 | select: { id: true, username: true, fullName: true, profilePic: true },
16 | });
17 | if (!user) {
18 | return res.status(404).json({ error: "User not found" });
19 | }
20 | req.user = user;
21 | next();
22 | }
23 | catch (error) {
24 | console.log("Error in protectRoute middleware", error.message);
25 | res.status(500).json({ error: "Internal Server Error" });
26 | }
27 | };
28 | export default protectRoute;
29 |
--------------------------------------------------------------------------------
/backend/dist/src/routes/auth.route.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import { login, logout, signup, getMe } from "../controllers/auth.controller.js";
3 | import protectRoute from "../middleware/protectRoute.js";
4 | const router = express.Router();
5 | router.get("/me", protectRoute, getMe);
6 | router.post("/signup", signup);
7 | router.post("/login", login);
8 | router.post("/logout", logout);
9 | export default router;
10 |
--------------------------------------------------------------------------------
/backend/dist/src/routes/message.route.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import protectRoute from "../middleware/protectRoute.js";
3 | import { getMessages, getUsersForSidebar, sendMessage } from "../controllers/message.controller.js";
4 | const router = express.Router();
5 | router.get("/conversations", protectRoute, getUsersForSidebar);
6 | router.get("/:id", protectRoute, getMessages);
7 | router.post("/send/:id", protectRoute, sendMessage);
8 | export default router;
9 |
--------------------------------------------------------------------------------
/backend/dist/src/socket/socket.js:
--------------------------------------------------------------------------------
1 | import { Server } from "socket.io";
2 | import http from "http";
3 | import express from "express";
4 | const app = express();
5 | const server = http.createServer(app);
6 | const io = new Server(server, {
7 | cors: {
8 | origin: ["http://localhost:5173"],
9 | methods: ["GET", "POST"],
10 | },
11 | });
12 | export const getReceiverSocketId = (receiverId) => {
13 | return userSocketMap[receiverId];
14 | };
15 | const userSocketMap = {}; // {userId: socketId}
16 | io.on("connection", (socket) => {
17 | // console.log("a user connected", socket.id);
18 | const userId = socket.handshake.query.userId;
19 | if (userId)
20 | userSocketMap[userId] = socket.id;
21 | // io.emit() is used to send events to all the connected clients
22 | io.emit("getOnlineUsers", Object.keys(userSocketMap));
23 | // socket.on() is used to listen to the events. can be used both on client and server side
24 | socket.on("disconnect", () => {
25 | // console.log("user disconnected", socket.id);
26 | delete userSocketMap[userId];
27 | io.emit("getOnlineUsers", Object.keys(userSocketMap));
28 | });
29 | });
30 | export { app, io, server };
31 |
--------------------------------------------------------------------------------
/backend/dist/src/utils/generateToken.js:
--------------------------------------------------------------------------------
1 | import jwt from "jsonwebtoken";
2 | const generateToken = (userId, res) => {
3 | const token = jwt.sign({ userId }, process.env.JWT_SECRET, {
4 | expiresIn: "15d",
5 | });
6 | res.cookie("jwt", token, {
7 | maxAge: 15 * 24 * 60 * 60 * 1000, // MS,
8 | httpOnly: true, // prevent XSS cross site scripting
9 | sameSite: "strict", // CSRF attack cross-site request forgery
10 | secure: process.env.NODE_ENV !== "development", // HTTPS
11 | });
12 | return token;
13 | };
14 | export default generateToken;
15 |
--------------------------------------------------------------------------------
/backend/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | // This is your Prisma schema file,
2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
3 |
4 | // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
5 | // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
6 |
7 | generator client {
8 | provider = "prisma-client-js"
9 | }
10 |
11 | datasource db {
12 | provider = "postgresql"
13 | url = env("DATABASE_URL")
14 | }
15 |
16 | model User {
17 | id String @id @default(cuid())
18 | username String @unique
19 | fullName String
20 | password String
21 | gender Gender
22 | profilePic String
23 | createdAt DateTime @default(now())
24 | updatedAt DateTime @updatedAt
25 | conversationsIds String[]
26 |
27 | conversations Conversation[]
28 | messages Message[]
29 | }
30 |
31 | model Conversation {
32 | id String @id @default(cuid())
33 | createdAt DateTime @default(now())
34 | updatedAt DateTime @updatedAt
35 |
36 | participantIds String[]
37 | participants User[]
38 |
39 | messageIds String[]
40 | messages Message[]
41 | }
42 |
43 | model Message {
44 | id String @id @default(cuid())
45 |
46 | conversationId String
47 | conversation Conversation @relation(fields: [conversationId], references: [id])
48 |
49 | senderId String
50 | sender User @relation(fields: [senderId], references: [id])
51 |
52 | body String
53 | createdAt DateTime @default(now())
54 | updatedAt DateTime @updatedAt
55 | }
56 |
57 | enum Gender {
58 | male
59 | female
60 | }
61 |
--------------------------------------------------------------------------------
/backend/src/controllers/auth.controller.ts:
--------------------------------------------------------------------------------
1 | import { Request, Response } from "express";
2 | import prisma from "../db/prisma.js";
3 | import bcryptjs from "bcryptjs";
4 | import generateToken from "../utils/generateToken.js";
5 |
6 | export const signup = async (req: Request, res: Response) => {
7 | try {
8 | const { fullName, username, password, confirmPassword, gender } = req.body;
9 |
10 | if (!fullName || !username || !password || !confirmPassword || !gender) {
11 | return res.status(400).json({ error: "Please fill in all fields" });
12 | }
13 |
14 | if (password !== confirmPassword) {
15 | return res.status(400).json({ error: "Passwords don't match" });
16 | }
17 |
18 | const user = await prisma.user.findUnique({ where: { username } });
19 |
20 | if (user) {
21 | return res.status(400).json({ error: "Username already exists" });
22 | }
23 |
24 | const salt = await bcryptjs.genSalt(10);
25 | const hashedPassword = await bcryptjs.hash(password, salt);
26 |
27 | // https://avatar-placeholder.iran.liara.run/
28 | const boyProfilePic = `https://avatar.iran.liara.run/public/boy?username=${username}`;
29 | const girlProfilePic = `https://avatar.iran.liara.run/public/girl?username=${username}`;
30 |
31 | const newUser = await prisma.user.create({
32 | data: {
33 | fullName,
34 | username,
35 | password: hashedPassword,
36 | gender,
37 | profilePic: gender === "male" ? boyProfilePic : girlProfilePic,
38 | },
39 | });
40 |
41 | if (newUser) {
42 | // generate token in a sec
43 | generateToken(newUser.id, res);
44 |
45 | res.status(201).json({
46 | id: newUser.id,
47 | fullName: newUser.fullName,
48 | username: newUser.username,
49 | profilePic: newUser.profilePic,
50 | });
51 | } else {
52 | res.status(400).json({ error: "Invalid user data" });
53 | }
54 | } catch (error: any) {
55 | console.log("Error in signup controller", error.message);
56 | res.status(500).json({ error: "Internal Server Error" });
57 | }
58 | };
59 |
60 | export const login = async (req: Request, res: Response) => {
61 | try {
62 | const { username, password } = req.body;
63 | const user = await prisma.user.findUnique({ where: { username } });
64 |
65 | if (!user) {
66 | return res.status(400).json({ error: "Invalid credentials" });
67 | }
68 |
69 | const isPasswordCorrect = await bcryptjs.compare(password, user.password);
70 |
71 | if (!isPasswordCorrect) {
72 | return res.status(400).json({ error: "Invalid credentials" });
73 | }
74 |
75 | generateToken(user.id, res);
76 |
77 | res.status(200).json({
78 | id: user.id,
79 | fullName: user.fullName,
80 | username: user.username,
81 | profilePic: user.profilePic,
82 | });
83 | } catch (error: any) {
84 | console.log("Error in login controller", error.message);
85 | res.status(500).json({ error: "Internal Server Error" });
86 | }
87 | };
88 | export const logout = async (req: Request, res: Response) => {
89 | try {
90 | res.cookie("jwt", "", { maxAge: 0 });
91 | res.status(200).json({ message: "Logged out successfully" });
92 | } catch (error: any) {
93 | console.log("Error in logout controller", error.message);
94 | res.status(500).json({ error: "Internal Server Error" });
95 | }
96 | };
97 |
98 | export const getMe = async (req: Request, res: Response) => {
99 | try {
100 | const user = await prisma.user.findUnique({ where: { id: req.user.id } });
101 |
102 | if (!user) {
103 | return res.status(404).json({ error: "User not found" });
104 | }
105 |
106 | res.status(200).json({
107 | id: user.id,
108 | fullName: user.fullName,
109 | username: user.username,
110 | profilePic: user.profilePic,
111 | });
112 | } catch (error: any) {
113 | console.log("Error in getMe controller", error.message);
114 | res.status(500).json({ error: "Internal Server Error" });
115 | }
116 | };
117 |
--------------------------------------------------------------------------------
/backend/src/controllers/message.controller.ts:
--------------------------------------------------------------------------------
1 | import { Request, Response } from "express";
2 | import prisma from "../db/prisma.js";
3 | import { getReceiverSocketId, io } from "../socket/socket.js";
4 |
5 | export const sendMessage = async (req: Request, res: Response) => {
6 | try {
7 | const { message } = req.body;
8 | const { id: receiverId } = req.params;
9 | const senderId = req.user.id;
10 |
11 | let conversation = await prisma.conversation.findFirst({
12 | where: {
13 | participantIds: {
14 | hasEvery: [senderId, receiverId],
15 | },
16 | },
17 | });
18 |
19 | // the very first message is being sent, that's why we need to create a new conversation
20 | if (!conversation) {
21 | conversation = await prisma.conversation.create({
22 | data: {
23 | participantIds: {
24 | set: [senderId, receiverId],
25 | },
26 | },
27 | });
28 | }
29 |
30 | const newMessage = await prisma.message.create({
31 | data: {
32 | senderId,
33 | body: message,
34 | conversationId: conversation.id,
35 | },
36 | });
37 |
38 | if (newMessage) {
39 | conversation = await prisma.conversation.update({
40 | where: {
41 | id: conversation.id,
42 | },
43 | data: {
44 | messages: {
45 | connect: {
46 | id: newMessage.id,
47 | },
48 | },
49 | },
50 | });
51 | }
52 |
53 | // Socket io will go here
54 | const receiverSocketId = getReceiverSocketId(receiverId);
55 |
56 | if (receiverSocketId) {
57 | io.to(receiverSocketId).emit("newMessage", newMessage);
58 | }
59 |
60 | res.status(201).json(newMessage);
61 | } catch (error: any) {
62 | console.error("Error in sendMessage: ", error.message);
63 | res.status(500).json({ error: "Internal server error" });
64 | }
65 | };
66 |
67 | export const getMessages = async (req: Request, res: Response) => {
68 | try {
69 | const { id: userToChatId } = req.params;
70 | const senderId = req.user.id;
71 |
72 | const conversation = await prisma.conversation.findFirst({
73 | where: {
74 | participantIds: {
75 | hasEvery: [senderId, userToChatId],
76 | },
77 | },
78 | include: {
79 | messages: {
80 | orderBy: {
81 | createdAt: "asc",
82 | },
83 | },
84 | },
85 | });
86 |
87 | if (!conversation) {
88 | return res.status(200).json([]);
89 | }
90 |
91 | res.status(200).json(conversation.messages);
92 | } catch (error: any) {
93 | console.error("Error in getMessages: ", error.message);
94 | res.status(500).json({ error: "Internal server error" });
95 | }
96 | };
97 |
98 | export const getUsersForSidebar = async (req: Request, res: Response) => {
99 | try {
100 | const authUserId = req.user.id;
101 |
102 | const users = await prisma.user.findMany({
103 | where: {
104 | id: {
105 | not: authUserId,
106 | },
107 | },
108 | select: {
109 | id: true,
110 | fullName: true,
111 | profilePic: true,
112 | },
113 | });
114 |
115 | res.status(200).json(users);
116 | } catch (error: any) {
117 | console.error("Error in getUsersForSidebar: ", error.message);
118 | res.status(500).json({ error: "Internal server error" });
119 | }
120 | };
121 |
--------------------------------------------------------------------------------
/backend/src/db/prisma.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 |
3 | const prisma = new PrismaClient();
4 |
5 | export default prisma;
6 |
--------------------------------------------------------------------------------
/backend/src/index.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import cookieParser from "cookie-parser";
3 | import path from "path";
4 |
5 | import authRoutes from "./routes/auth.route.js";
6 | import messageRoutes from "./routes/message.route.js";
7 |
8 | import dotenv from "dotenv";
9 | import { app, server } from "./socket/socket.js";
10 | dotenv.config();
11 |
12 | const PORT = process.env.PORT || 5001;
13 | const __dirname = path.resolve();
14 |
15 | app.use(cookieParser()); // for parsing cookies
16 | app.use(express.json()); // for parsing application/json
17 |
18 | app.use("/api/auth", authRoutes);
19 | app.use("/api/messages", messageRoutes);
20 |
21 | if (process.env.NODE_ENV !== "development") {
22 | app.use(express.static(path.join(__dirname, "/frontend/dist")));
23 | app.get("*", (req, res) => {
24 | res.sendFile(path.join(__dirname, "frontend", "dist", "index.html"));
25 | });
26 | }
27 |
28 | server.listen(PORT, () => {
29 | console.log("Server is running on port " + PORT);
30 | });
31 |
--------------------------------------------------------------------------------
/backend/src/middleware/protectRoute.ts:
--------------------------------------------------------------------------------
1 | import jwt, { JwtPayload } from "jsonwebtoken";
2 |
3 | import { Request, Response, NextFunction } from "express";
4 | import prisma from "../db/prisma.js";
5 |
6 | interface DecodedToken extends JwtPayload {
7 | userId: string;
8 | }
9 |
10 | declare global {
11 | namespace Express {
12 | export interface Request {
13 | user: {
14 | id: string;
15 | };
16 | }
17 | }
18 | }
19 |
20 | const protectRoute = async (req: Request, res: Response, next: NextFunction) => {
21 | try {
22 | const token = req.cookies.jwt;
23 |
24 | if (!token) {
25 | return res.status(401).json({ error: "Unauthorized - No token provided" });
26 | }
27 |
28 | const decoded = jwt.verify(token, process.env.JWT_SECRET!) as DecodedToken;
29 |
30 | if (!decoded) {
31 | return res.status(401).json({ error: "Unauthorized - Invalid Token" });
32 | }
33 |
34 | const user = await prisma.user.findUnique({
35 | where: { id: decoded.userId },
36 | select: { id: true, username: true, fullName: true, profilePic: true },
37 | });
38 |
39 | if (!user) {
40 | return res.status(404).json({ error: "User not found" });
41 | }
42 |
43 | req.user = user;
44 |
45 | next();
46 | } catch (error: any) {
47 | console.log("Error in protectRoute middleware", error.message);
48 | res.status(500).json({ error: "Internal Server Error" });
49 | }
50 | };
51 |
52 | export default protectRoute;
53 |
--------------------------------------------------------------------------------
/backend/src/routes/auth.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import { login, logout, signup, getMe } from "../controllers/auth.controller.js";
3 | import protectRoute from "../middleware/protectRoute.js";
4 |
5 | const router = express.Router();
6 |
7 | router.get("/me", protectRoute, getMe);
8 | router.post("/signup", signup);
9 | router.post("/login", login);
10 | router.post("/logout", logout);
11 |
12 | export default router;
13 |
--------------------------------------------------------------------------------
/backend/src/routes/message.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import protectRoute from "../middleware/protectRoute.js";
3 | import { getMessages, getUsersForSidebar, sendMessage } from "../controllers/message.controller.js";
4 | const router = express.Router();
5 |
6 | router.get("/conversations", protectRoute, getUsersForSidebar);
7 | router.get("/:id", protectRoute, getMessages);
8 | router.post("/send/:id", protectRoute, sendMessage);
9 |
10 | export default router;
11 |
--------------------------------------------------------------------------------
/backend/src/socket/socket.ts:
--------------------------------------------------------------------------------
1 | import { Server } from "socket.io";
2 | import http from "http";
3 | import express from "express";
4 |
5 | const app = express();
6 |
7 | const server = http.createServer(app);
8 | const io = new Server(server, {
9 | cors: {
10 | origin: ["http://localhost:5173"],
11 | methods: ["GET", "POST"],
12 | },
13 | });
14 |
15 | export const getReceiverSocketId = (receiverId: string) => {
16 | return userSocketMap[receiverId];
17 | };
18 |
19 | const userSocketMap: { [key: string]: string } = {}; // {userId: socketId}
20 |
21 | io.on("connection", (socket) => {
22 | // console.log("a user connected", socket.id);
23 |
24 | const userId = socket.handshake.query.userId as string;
25 |
26 | if (userId) userSocketMap[userId] = socket.id;
27 |
28 | // io.emit() is used to send events to all the connected clients
29 | io.emit("getOnlineUsers", Object.keys(userSocketMap));
30 |
31 | // socket.on() is used to listen to the events. can be used both on client and server side
32 | socket.on("disconnect", () => {
33 | // console.log("user disconnected", socket.id);
34 | delete userSocketMap[userId];
35 | io.emit("getOnlineUsers", Object.keys(userSocketMap));
36 | });
37 | });
38 |
39 | export { app, io, server };
40 |
--------------------------------------------------------------------------------
/backend/src/utils/generateToken.ts:
--------------------------------------------------------------------------------
1 | import jwt from "jsonwebtoken";
2 | import { Response } from "express";
3 |
4 | const generateToken = (userId: string, res: Response) => {
5 | const token = jwt.sign({ userId }, process.env.JWT_SECRET!, {
6 | expiresIn: "15d",
7 | });
8 |
9 | res.cookie("jwt", token, {
10 | maxAge: 15 * 24 * 60 * 60 * 1000, // MS,
11 | httpOnly: true, // prevent XSS cross site scripting
12 | sameSite: "strict", // CSRF attack cross-site request forgery
13 | secure: process.env.NODE_ENV !== "development", // HTTPS
14 | });
15 |
16 | return token;
17 | };
18 |
19 | export default generateToken;
20 |
--------------------------------------------------------------------------------
/frontend/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
5 | ignorePatterns: ["dist", ".eslintrc.cjs"],
6 | parser: "@typescript-eslint/parser",
7 | plugins: ["react-refresh"],
8 | rules: {
9 | "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
10 | "@typescript-eslint/no-explicit-any": "off",
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 |
14 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | export default {
18 | // other rules...
19 | parserOptions: {
20 | ecmaVersion: 'latest',
21 | sourceType: 'module',
22 | project: ['./tsconfig.json', './tsconfig.node.json'],
23 | tsconfigRootDir: __dirname,
24 | },
25 | }
26 | ```
27 |
28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
31 |
--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "lucide-react": "^0.379.0",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-hot-toast": "^2.4.1",
17 | "react-router-dom": "^6.23.1",
18 | "socket.io-client": "^4.7.5",
19 | "zustand": "^4.5.2"
20 | },
21 | "devDependencies": {
22 | "@types/react": "^18.2.66",
23 | "@types/react-dom": "^18.2.22",
24 | "@typescript-eslint/eslint-plugin": "^7.2.0",
25 | "@typescript-eslint/parser": "^7.2.0",
26 | "@vitejs/plugin-react": "^4.2.1",
27 | "autoprefixer": "^10.4.19",
28 | "daisyui": "^4.11.1",
29 | "eslint": "^8.57.0",
30 | "eslint-plugin-react-hooks": "^4.6.0",
31 | "eslint-plugin-react-refresh": "^0.4.6",
32 | "postcss": "^8.4.38",
33 | "tailwindcss": "^3.4.3",
34 | "typescript": "^5.2.2",
35 | "vite": "^5.2.0"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/frontend/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/public/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/pern-chat-app/fd77a7ad29bf121dea4c2bc7a1fb21daffd91913/frontend/public/bg.jpg
--------------------------------------------------------------------------------
/frontend/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { Navigate, Route, Routes } from "react-router-dom";
2 | import Home from "./pages/Home";
3 | import SignUp from "./pages/SignUp";
4 | import Login from "./pages/Login";
5 | import { useAuthContext } from "./context/AuthContext";
6 | import { Toaster } from "react-hot-toast";
7 |
8 | function App() {
9 | const { authUser, isLoading } = useAuthContext();
10 |
11 | if (isLoading) return null;
12 |
13 | return (
14 |
15 |
16 | : } />
17 | : } />
18 | : } />
19 |
20 |
21 |
22 | );
23 | }
24 |
25 | export default App;
26 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/assets/sounds/notification.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/pern-chat-app/fd77a7ad29bf121dea4c2bc7a1fb21daffd91913/frontend/src/_ui_design/assets/sounds/notification.mp3
--------------------------------------------------------------------------------
/frontend/src/_ui_design/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/pern-chat-app/fd77a7ad29bf121dea4c2bc7a1fb21daffd91913/frontend/src/_ui_design/bg.jpg
--------------------------------------------------------------------------------
/frontend/src/_ui_design/components/GenderCheckbox.tsx:
--------------------------------------------------------------------------------
1 | const GenderCheckbox = () => {
2 | return (
3 |
17 | );
18 | };
19 | export default GenderCheckbox;
20 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/components/messages/Message.tsx:
--------------------------------------------------------------------------------
1 | const Message = ({ message }: { message?: any }) => {
2 | const fromMe = message.fromMe;
3 | const chatClass = fromMe ? "chat-end" : "chat-start";
4 | const img = fromMe
5 | ? "https://avatar.iran.liara.run/public/boy?username=johndoe"
6 | : "https://avatar.iran.liara.run/public/boy?username=janedoe";
7 |
8 | const bubbleBg = fromMe ? "bg-blue-500" : "";
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
{message.body}
17 |
22:59
18 |
9 | <>
10 | {/* Header */}
11 |
12 | To: John doe
13 |
14 |
15 |
16 |
17 |
18 |
26 | //
27 | //
Welcome 👋 John Doe ❄
28 | //
Select a chat to start messaging
29 | //
30 | //
31 | //
7 | {DUMMY_MESSAGES.map((message) => (
8 |
9 | ))}
10 |
11 | );
12 | };
13 | export default Messages;
14 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/components/sidebar/Conversation.tsx:
--------------------------------------------------------------------------------
1 | const Conversation = ({ conversation }: { conversation: any }) => {
2 | return (
3 | <>
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
{conversation.fullName}
14 |
{conversation.emoji}
15 |
16 |
17 |
7 | {DUMMY_CONVERSATIONS.map((conversation) => (
8 |
9 | ))}
10 |
11 | );
12 | };
13 | export default Conversations;
14 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/components/sidebar/LogoutButton.tsx:
--------------------------------------------------------------------------------
1 | import { LogOut } from "lucide-react";
2 |
3 | const LogoutButton = () => {
4 | const logout = () => {
5 | alert("You are logged out");
6 | };
7 |
8 | return (
9 |
10 |
11 |
12 | );
13 | };
14 | export default LogoutButton;
15 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/components/sidebar/SearchInput.tsx:
--------------------------------------------------------------------------------
1 | import { Search } from "lucide-react";
2 |
3 | const SearchInput = () => {
4 | return (
5 |
15 | );
16 | };
17 | export default SearchInput;
18 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/components/sidebar/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import Conversations from "./Conversations";
2 | import LogoutButton from "./LogoutButton";
3 | import SearchInput from "./SearchInput";
4 |
5 | const Sidebar = () => {
6 | return (
7 |
13 | );
14 | };
15 | export default Sidebar;
16 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/components/skeletons/MessageSkeleton.tsx:
--------------------------------------------------------------------------------
1 | const MessageSkeleton = () => {
2 | return (
3 | <>
4 |
11 |
17 |
18 | );
19 | };
20 | export default MessageSkeleton;
21 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/dummy_data/dummy.ts:
--------------------------------------------------------------------------------
1 | export const DUMMY_CONVERSATIONS = [
2 | {
3 | id: 1,
4 | fullName: "John Doe",
5 | profilePic: "https://avatar.iran.liara.run/public/boy?username=johndoe",
6 | emoji: "🎃",
7 | },
8 | {
9 | id: 2,
10 | fullName: "Jane Doe",
11 | profilePic: "https://avatar.iran.liara.run/public/girl?username=janedoe",
12 | emoji: "👻",
13 | },
14 | {
15 | id: 3,
16 | fullName: "Alice",
17 | profilePic: "https://avatar.iran.liara.run/public/girl?username=alice",
18 | emoji: "🦇",
19 | },
20 | {
21 | id: 4,
22 | fullName: "Bob",
23 | profilePic: "https://avatar.iran.liara.run/public/boy?username=bob",
24 | emoji: "🧟♂️",
25 | },
26 | {
27 | id: 5,
28 | fullName: "Charlie",
29 | profilePic: "https://avatar.iran.liara.run/public/girl?username=charlie",
30 | emoji: "🧛",
31 | },
32 | ];
33 |
34 | export const DUMMY_MESSAGES = [
35 | {
36 | id: 1,
37 | fromMe: false,
38 | body: "Hello John!",
39 | },
40 | {
41 | id: 2,
42 | fromMe: true,
43 | body: "Hi! How's it going?",
44 | },
45 | {
46 | id: 3,
47 | fromMe: false,
48 | body: "I'm doing well, thanks for asking. How about you?",
49 | },
50 | {
51 | id: 4,
52 | fromMe: true,
53 | body: "I'm good too. Been busy with work.",
54 | },
55 | {
56 | id: 5,
57 | fromMe: false,
58 | body: "I can imagine. Have you had any time to relax?",
59 | },
60 | {
61 | id: 6,
62 | fromMe: true,
63 | body: "A little bit. I watched a movie last night.",
64 | },
65 | {
66 | id: 7,
67 | fromMe: false,
68 | body: "That's great! Which movie did you watch?",
69 | },
70 | ];
71 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import MessageContainer from "../components/messages/MessageContainer";
2 | import Sidebar from "../components/sidebar/Sidebar";
3 |
4 | const Home = () => {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | };
12 | export default Home;
13 |
--------------------------------------------------------------------------------
/frontend/src/_ui_design/pages/Login.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | const Login = () => {
4 | return (
5 |
6 |
7 |
8 | Login
9 | ChatApp
10 |
11 |
12 |
41 |
42 |
7 |
8 |
9 | Sign Up ChatApp
10 |
11 |
12 |
62 |
63 |
18 |
19 |
20 |
21 |
22 |
23 |
{message.body}
24 |
25 | {extractTime(message.createdAt)}
26 |
27 |
13 | {!selectedConversation ? (
14 |
15 | ) : (
16 | <>
17 | {/* Header */}
18 |
19 | To:{" "}
20 | {selectedConversation.fullName}
21 |
22 |
23 |
24 |
25 |
26 | )}
27 |
36 |
37 |
Welcome 👋 {authUser?.fullName} ❄
38 |
Select a chat to start messaging
39 |
40 |
41 |
15 | {loading && [...Array(3)].map((_, idx) =>
)}
16 |
17 | {!loading && messages.map((message) =>
)}
18 |
19 | {!loading && messages.length === 0 && (
20 |
Send a message to start the conversation
21 | )}
22 |
setSelectedConversation(conversation)}
18 | >
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
{conversation.fullName}
28 |
{emoji}
29 |
30 |
31 |
9 | {conversations.map((conversation) => (
10 |
11 | ))}
12 | {loading ? : null}
13 |
14 | );
15 | };
16 | export default Conversations;
17 |
--------------------------------------------------------------------------------
/frontend/src/components/sidebar/LogoutButton.tsx:
--------------------------------------------------------------------------------
1 | import { LogOut } from "lucide-react";
2 | import useLogout from "../../hooks/useLogout";
3 |
4 | const LogoutButton = () => {
5 | const { logout } = useLogout();
6 |
7 | return (
8 |
9 |
10 |
11 | );
12 | };
13 | export default LogoutButton;
14 |
--------------------------------------------------------------------------------
/frontend/src/components/sidebar/SearchInput.tsx:
--------------------------------------------------------------------------------
1 | import { Search } from "lucide-react";
2 | import { useState } from "react";
3 | import toast from "react-hot-toast";
4 | import useConversation from "../../zustand/useConversation";
5 | import useGetConversations from "../../hooks/useGetConversations";
6 |
7 | const SearchInput = () => {
8 | const [search, setSearch] = useState("");
9 | const { setSelectedConversation } = useConversation();
10 | const { conversations } = useGetConversations();
11 |
12 | const handleSubmit = (e: React.FormEvent) => {
13 | e.preventDefault();
14 | if (!search) return;
15 | if (search.length < 3) {
16 | return toast.error("Search term must be at least 3 characters long");
17 | }
18 |
19 | const conversation = conversations.find((c: ConversationType) =>
20 | c.fullName.toLowerCase().includes(search.toLowerCase())
21 | );
22 |
23 | if (conversation) {
24 | setSelectedConversation(conversation);
25 | setSearch("");
26 | } else toast.error("No such user found!");
27 | };
28 |
29 | return (
30 |
42 | );
43 | };
44 | export default SearchInput;
45 |
--------------------------------------------------------------------------------
/frontend/src/components/sidebar/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import Conversations from "./Conversations";
2 | import LogoutButton from "./LogoutButton";
3 | import SearchInput from "./SearchInput";
4 |
5 | const Sidebar = () => {
6 | return (
7 |
13 | );
14 | };
15 | export default Sidebar;
16 |
--------------------------------------------------------------------------------
/frontend/src/components/skeletons/MessageSkeleton.tsx:
--------------------------------------------------------------------------------
1 | const MessageSkeleton = () => {
2 | return (
3 | <>
4 |
11 |
17 |
18 | );
19 | };
20 | export default MessageSkeleton;
21 |
--------------------------------------------------------------------------------
/frontend/src/context/AuthContext.tsx:
--------------------------------------------------------------------------------
1 | import { Dispatch, ReactNode, SetStateAction, createContext, useContext, useEffect, useState } from "react";
2 | import toast from "react-hot-toast";
3 |
4 | type AuthUserType = {
5 | id: string;
6 | fullName: string;
7 | email: string;
8 | profilePic: string;
9 | gender: string;
10 | };
11 |
12 | const AuthContext = createContext<{
13 | authUser: AuthUserType | null;
14 | setAuthUser: Dispatch>;
15 | isLoading: boolean;
16 | }>({
17 | authUser: null,
18 | setAuthUser: () => {},
19 | isLoading: true,
20 | });
21 |
22 | // eslint-disable-next-line react-refresh/only-export-components
23 | export const useAuthContext = () => {
24 | return useContext(AuthContext);
25 | };
26 |
27 | export const AuthContextProvider = ({ children }: { children: ReactNode }) => {
28 | const [authUser, setAuthUser] = useState(null);
29 | const [isLoading, setIsLoading] = useState(true);
30 |
31 | // logic will go here
32 | useEffect(() => {
33 | const fetchAuthUser = async () => {
34 | try {
35 | const res = await fetch("/api/auth/me");
36 | const data = await res.json();
37 | if (!res.ok) {
38 | throw new Error(data.error);
39 | }
40 | setAuthUser(data);
41 | } catch (error: any) {
42 | console.error(error);
43 | toast.error(error.message);
44 | } finally {
45 | setIsLoading(false);
46 | }
47 | };
48 |
49 | fetchAuthUser();
50 | }, []);
51 |
52 | return (
53 |
60 | {children}
61 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/frontend/src/context/SocketContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useState, useEffect, useContext, ReactNode, useRef } from "react";
2 | import { useAuthContext } from "./AuthContext";
3 | import io, { Socket } from "socket.io-client";
4 |
5 | interface ISocketContext {
6 | socket: Socket | null;
7 | onlineUsers: string[];
8 | }
9 |
10 | const SocketContext = createContext(undefined);
11 |
12 | export const useSocketContext = (): ISocketContext => {
13 | const context = useContext(SocketContext);
14 | if (context === undefined) {
15 | throw new Error("useSocketContext must be used within a SocketContextProvider");
16 | }
17 | return context;
18 | };
19 |
20 | const socketURL = import.meta.env.MODE === "development" ? "http://localhost:5001" : "/";
21 |
22 | const SocketContextProvider = ({ children }: { children: ReactNode }) => {
23 | const socketRef = useRef(null);
24 |
25 | const [onlineUsers, setOnlineUsers] = useState([]);
26 | const { authUser, isLoading } = useAuthContext();
27 |
28 | useEffect(() => {
29 | if (authUser && !isLoading) {
30 | const socket = io(socketURL, {
31 | query: {
32 | userId: authUser.id,
33 | },
34 | });
35 | socketRef.current = socket;
36 |
37 | socket.on("getOnlineUsers", (users: string[]) => {
38 | setOnlineUsers(users);
39 | });
40 |
41 | return () => {
42 | socket.close();
43 | socketRef.current = null;
44 | };
45 | } else if (!authUser && !isLoading) {
46 | if (socketRef.current) {
47 | socketRef.current.close();
48 | socketRef.current = null;
49 | }
50 | }
51 | }, [authUser, isLoading]);
52 |
53 | return (
54 | {children}
55 | );
56 | };
57 |
58 | export default SocketContextProvider;
59 |
--------------------------------------------------------------------------------
/frontend/src/dummy_data/dummy.ts:
--------------------------------------------------------------------------------
1 | export const DUMMY_CONVERSATIONS = [
2 | {
3 | id: 1,
4 | fullName: "John Doe",
5 | profilePic: "https://avatar.iran.liara.run/public/boy?username=johndoe",
6 | emoji: "🎃",
7 | },
8 | {
9 | id: 2,
10 | fullName: "Jane Doe",
11 | profilePic: "https://avatar.iran.liara.run/public/girl?username=janedoe",
12 | emoji: "👻",
13 | },
14 | {
15 | id: 3,
16 | fullName: "Alice",
17 | profilePic: "https://avatar.iran.liara.run/public/girl?username=alice",
18 | emoji: "🦇",
19 | },
20 | {
21 | id: 4,
22 | fullName: "Bob",
23 | profilePic: "https://avatar.iran.liara.run/public/boy?username=bob",
24 | emoji: "🧟♂️",
25 | },
26 | {
27 | id: 5,
28 | fullName: "Charlie",
29 | profilePic: "https://avatar.iran.liara.run/public/girl?username=charlie",
30 | emoji: "🧛",
31 | },
32 | ];
33 |
34 | export const DUMMY_MESSAGES = [
35 | {
36 | id: 1,
37 | fromMe: false,
38 | body: "Hello John!",
39 | },
40 | {
41 | id: 2,
42 | fromMe: true,
43 | body: "Hi! How's it going?",
44 | },
45 | {
46 | id: 3,
47 | fromMe: false,
48 | body: "I'm doing well, thanks for asking. How about you?",
49 | },
50 | {
51 | id: 4,
52 | fromMe: true,
53 | body: "I'm good too. Been busy with work.",
54 | },
55 | {
56 | id: 5,
57 | fromMe: false,
58 | body: "I can imagine. Have you had any time to relax?",
59 | },
60 | {
61 | id: 6,
62 | fromMe: true,
63 | body: "A little bit. I watched a movie last night.",
64 | },
65 | {
66 | id: 7,
67 | fromMe: false,
68 | body: "That's great! Which movie did you watch?",
69 | },
70 | ];
71 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useChatScroll.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 |
3 | function useChatScroll(dep: any) {
4 | const ref = useRef();
5 |
6 | useEffect(() => {
7 | setTimeout(() => {
8 | if (ref.current) {
9 | ref.current.scrollTop = ref.current.scrollHeight;
10 | }
11 | }, 100);
12 | }, [dep]);
13 |
14 | return ref;
15 | }
16 |
17 | export default useChatScroll;
18 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useGetConversations.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import toast from "react-hot-toast";
3 |
4 | const useGetConversations = () => {
5 | const [loading, setLoading] = useState(false);
6 | const [conversations, setConversations] = useState([]);
7 |
8 | useEffect(() => {
9 | const getConversations = async () => {
10 | setLoading(true);
11 | try {
12 | const res = await fetch("/api/messages/conversations");
13 | const data = await res.json();
14 | if (data.error) {
15 | throw new Error(data.error);
16 | }
17 | setConversations(data);
18 | } catch (error: any) {
19 | toast.error(error.message);
20 | } finally {
21 | setLoading(false);
22 | }
23 | };
24 |
25 | getConversations();
26 | }, []);
27 |
28 | return { loading, conversations };
29 | };
30 | export default useGetConversations;
31 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useGetMessages.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import useConversation from "../zustand/useConversation";
3 | import toast from "react-hot-toast";
4 |
5 | const useGetMessages = () => {
6 | const [loading, setLoading] = useState(false);
7 | const { messages, setMessages, selectedConversation } = useConversation();
8 |
9 | useEffect(() => {
10 | const getMessages = async () => {
11 | if (!selectedConversation) return;
12 | setLoading(true);
13 | setMessages([]);
14 | try {
15 | const res = await fetch(`/api/messages/${selectedConversation.id}`);
16 | const data = await res.json();
17 | if (!res.ok) throw new Error(data.error || "An error occurred");
18 | setMessages(data);
19 | } catch (error: any) {
20 | toast.error(error.message);
21 | } finally {
22 | setLoading(false);
23 | }
24 | };
25 |
26 | getMessages();
27 | }, [selectedConversation, setMessages]);
28 |
29 | return { messages, loading };
30 | };
31 | export default useGetMessages;
32 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useListenMessages.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | import { useSocketContext } from "../context/SocketContext";
4 | import useConversation from "../zustand/useConversation";
5 |
6 | import notificationSound from "../assets/sounds/notification.mp3";
7 |
8 | const useListenMessages = () => {
9 | const { socket } = useSocketContext();
10 | const { messages, setMessages } = useConversation();
11 |
12 | useEffect(() => {
13 | socket?.on("newMessage", (newMessage) => {
14 | newMessage.shouldShake = true;
15 | const sound = new Audio(notificationSound);
16 | sound.play();
17 | setMessages([...messages, newMessage]);
18 | });
19 |
20 | return () => {
21 | socket?.off("newMessage");
22 | };
23 | }, [socket, messages, setMessages]);
24 | };
25 | export default useListenMessages;
26 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useLogin.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useAuthContext } from "../context/AuthContext";
3 | import toast from "react-hot-toast";
4 |
5 | const useLogin = () => {
6 | const [loading, setLoading] = useState(false);
7 | const { setAuthUser } = useAuthContext();
8 |
9 | const login = async (username: string, password: string) => {
10 | try {
11 | setLoading(true);
12 | const res = await fetch("/api/auth/login", {
13 | method: "POST",
14 | headers: { "Content-Type": "application/json" },
15 | body: JSON.stringify({ username, password }),
16 | });
17 |
18 | const data = await res.json();
19 |
20 | if (!res.ok) throw new Error(data.error);
21 | setAuthUser(data);
22 | } catch (error: any) {
23 | toast.error(error.message);
24 | } finally {
25 | setLoading(false);
26 | }
27 | };
28 |
29 | return { loading, login };
30 | };
31 | export default useLogin;
32 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useLogout.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useAuthContext } from "../context/AuthContext";
3 | import toast from "react-hot-toast";
4 |
5 | const useLogout = () => {
6 | const [loading, setLoading] = useState(false);
7 | const { setAuthUser } = useAuthContext();
8 |
9 | const logout = async () => {
10 | setLoading(true);
11 | try {
12 | const res = await fetch("/api/auth/logout", {
13 | method: "POST",
14 | });
15 | const data = await res.json();
16 | if (!res.ok) {
17 | throw new Error(data.error);
18 | }
19 |
20 | setAuthUser(null);
21 | } catch (error: any) {
22 | console.error(error.message);
23 | toast.error(error.message);
24 | } finally {
25 | setLoading(false);
26 | }
27 | };
28 |
29 | return { loading, logout };
30 | };
31 | export default useLogout;
32 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useSendMessage.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import useConversation from "../zustand/useConversation";
3 | import toast from "react-hot-toast";
4 |
5 | const useSendMessage = () => {
6 | const [loading, setLoading] = useState(false);
7 | const { messages, setMessages, selectedConversation } = useConversation();
8 |
9 | const sendMessage = async (message: string) => {
10 | if (!selectedConversation) return;
11 | setLoading(true);
12 | try {
13 | const res = await fetch(`/api/messages/send/${selectedConversation.id}`, {
14 | method: "POST",
15 | headers: {
16 | "Content-Type": "application/json",
17 | },
18 | body: JSON.stringify({ message }),
19 | });
20 | const data = await res.json();
21 | if (data.error) throw new Error(data.error);
22 |
23 | setMessages([...messages, data]);
24 | } catch (error: any) {
25 | toast.error(error.message);
26 | } finally {
27 | setLoading(false);
28 | }
29 | };
30 |
31 | return { sendMessage, loading };
32 | };
33 | export default useSendMessage;
34 |
--------------------------------------------------------------------------------
/frontend/src/hooks/useSignup.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useAuthContext } from "../context/AuthContext";
3 | import toast from "react-hot-toast";
4 |
5 | type SignupInputs = {
6 | fullName: string;
7 | username: string;
8 | password: string;
9 | confirmPassword: string;
10 | gender: string;
11 | };
12 |
13 | const useSignup = () => {
14 | const [loading, setLoading] = useState(false);
15 | const { setAuthUser } = useAuthContext();
16 |
17 | const signup = async (inputs: SignupInputs) => {
18 | try {
19 | setLoading(true);
20 | const res = await fetch("/api/auth/signup", {
21 | method: "POST",
22 | headers: {
23 | "Content-Type": "application/json",
24 | },
25 | body: JSON.stringify(inputs),
26 | });
27 | const data = await res.json();
28 |
29 | if (!res.ok) throw new Error(data.error);
30 | setAuthUser(data);
31 | } catch (error: any) {
32 | console.error(error.message);
33 | toast.error(error.message);
34 | } finally {
35 | setLoading(false);
36 | }
37 | };
38 |
39 | return { loading, signup };
40 | };
41 | export default useSignup;
42 |
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("/bg.jpg");
7 | background-size: cover;
8 | background-repeat: no-repeat;
9 | background-position: center;
10 | }
11 |
12 | .label-text {
13 | color: white;
14 | }
15 |
16 | /* dark mode looking scrollbar */
17 | ::-webkit-scrollbar {
18 | width: 8px;
19 | }
20 |
21 | ::-webkit-scrollbar-track {
22 | background: #555;
23 | }
24 |
25 | ::-webkit-scrollbar-thumb {
26 | background: #121212;
27 | border-radius: 5px;
28 | }
29 |
30 | ::-webkit-scrollbar-thumb:hover {
31 | background: #242424;
32 | }
33 |
34 | .shake {
35 | animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0.2s both;
36 | transform: translate3d(0, 0, 0);
37 | backface-visibility: hidden;
38 | perspective: 1000px;
39 | }
40 |
41 | @keyframes shake {
42 | 10%,
43 | 90% {
44 | transform: translate3d(-1px, 0, 0);
45 | }
46 |
47 | 20%,
48 | 80% {
49 | transform: translate3d(2px, 0, 0);
50 | }
51 |
52 | 30%,
53 | 50%,
54 | 70% {
55 | transform: translate3d(-4px, 0, 0);
56 | }
57 |
58 | 40%,
59 | 60% {
60 | transform: translate3d(4px, 0, 0);
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/frontend/src/main.tsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom/client";
2 | import App from "./App.tsx";
3 | import "./index.css";
4 | import { BrowserRouter } from "react-router-dom";
5 | import { AuthContextProvider } from "./context/AuthContext.tsx";
6 | import SocketContextProvider from "./context/SocketContext.tsx";
7 |
8 | ReactDOM.createRoot(document.getElementById("root")!).render(
9 | //
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | //
18 | );
19 |
--------------------------------------------------------------------------------
/frontend/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import MessageContainer from "../components/messages/MessageContainer";
2 | import Sidebar from "../components/sidebar/Sidebar";
3 |
4 | const Home = () => {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | };
12 | export default Home;
13 |
--------------------------------------------------------------------------------
/frontend/src/pages/Login.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import useLogin from "../hooks/useLogin";
4 |
5 | const Login = () => {
6 | const [inputs, setInputs] = useState({
7 | username: "",
8 | password: "",
9 | });
10 |
11 | const { loading, login } = useLogin();
12 |
13 | const handleSubmitForm = (e: React.FormEvent) => {
14 | e.preventDefault();
15 | login(inputs.username, inputs.password);
16 | };
17 |
18 | return (
19 |
20 |
21 |
22 | Login
23 | ChatApp
24 |
25 |
26 |
65 |
66 |
27 |
28 |
29 | Sign Up ChatApp
30 |
31 |
32 |
100 |
101 |