[ { "path": "api/.gitignore", "content": "node_modules\n.env" }, { "path": "api/app.js", "content": "import express from \"express\";\nimport cors from \"cors\";\nimport cookieParser from \"cookie-parser\";\nimport authRoute from \"./routes/auth.route.js\";\nimport postRoute from \"./routes/post.route.js\";\nimport testRoute from \"./routes/test.route.js\";\nimport userRoute from \"./routes/user.route.js\";\nimport chatRoute from \"./routes/chat.route.js\";\nimport messageRoute from \"./routes/message.route.js\";\n\nconst app = express();\n\napp.use(cors({ origin: process.env.CLIENT_URL, credentials: true }));\napp.use(express.json());\napp.use(cookieParser());\n\napp.use(\"/api/auth\", authRoute);\napp.use(\"/api/users\", userRoute);\napp.use(\"/api/posts\", postRoute);\napp.use(\"/api/test\", testRoute);\napp.use(\"/api/chats\", chatRoute);\napp.use(\"/api/messages\", messageRoute);\n\napp.listen(8800, () => {\n console.log(\"Server is running!\");\n});\n" }, { "path": "api/controllers/auth.controller.js", "content": "import bcrypt from \"bcrypt\";\nimport jwt from \"jsonwebtoken\";\nimport prisma from \"../lib/prisma.js\";\n\nexport const register = async (req, res) => {\n const { username, email, password } = req.body;\n\n try {\n // HASH THE PASSWORD\n\n const hashedPassword = await bcrypt.hash(password, 10);\n\n console.log(hashedPassword);\n\n // CREATE A NEW USER AND SAVE TO DB\n const newUser = await prisma.user.create({\n data: {\n username,\n email,\n password: hashedPassword,\n },\n });\n\n console.log(newUser);\n\n res.status(201).json({ message: \"User created successfully\" });\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to create user!\" });\n }\n};\n\nexport const login = async (req, res) => {\n const { username, password } = req.body;\n\n try {\n // CHECK IF THE USER EXISTS\n\n const user = await prisma.user.findUnique({\n where: { username },\n });\n\n if (!user) return res.status(400).json({ message: \"Invalid Credentials!\" });\n\n // CHECK IF THE PASSWORD IS CORRECT\n\n const isPasswordValid = await bcrypt.compare(password, user.password);\n\n if (!isPasswordValid)\n return res.status(400).json({ message: \"Invalid Credentials!\" });\n\n // GENERATE COOKIE TOKEN AND SEND TO THE USER\n\n // res.setHeader(\"Set-Cookie\", \"test=\" + \"myValue\").json(\"success\")\n const age = 1000 * 60 * 60 * 24 * 7;\n\n const token = jwt.sign(\n {\n id: user.id,\n isAdmin: false,\n },\n process.env.JWT_SECRET_KEY,\n { expiresIn: age }\n );\n\n const { password: userPassword, ...userInfo } = user;\n\n res\n .cookie(\"token\", token, {\n httpOnly: true,\n // secure:true,\n maxAge: age,\n })\n .status(200)\n .json(userInfo);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to login!\" });\n }\n};\n\nexport const logout = (req, res) => {\n res.clearCookie(\"token\").status(200).json({ message: \"Logout Successful\" });\n};\n" }, { "path": "api/controllers/chat.controller.js", "content": "import prisma from \"../lib/prisma.js\";\n\nexport const getChats = async (req, res) => {\n const tokenUserId = req.userId;\n\n try {\n const chats = await prisma.chat.findMany({\n where: {\n userIDs: {\n hasSome: [tokenUserId],\n },\n },\n });\n\n for (const chat of chats) {\n const receiverId = chat.userIDs.find((id) => id !== tokenUserId);\n\n const receiver = await prisma.user.findUnique({\n where: {\n id: receiverId,\n },\n select: {\n id: true,\n username: true,\n avatar: true,\n },\n });\n chat.receiver = receiver;\n }\n\n res.status(200).json(chats);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get chats!\" });\n }\n};\n\nexport const getChat = async (req, res) => {\n const tokenUserId = req.userId;\n\n try {\n const chat = await prisma.chat.findUnique({\n where: {\n id: req.params.id,\n userIDs: {\n hasSome: [tokenUserId],\n },\n },\n include: {\n messages: {\n orderBy: {\n createdAt: \"asc\",\n },\n },\n },\n });\n\n await prisma.chat.update({\n where: {\n id: req.params.id,\n },\n data: {\n seenBy: {\n push: [tokenUserId],\n },\n },\n });\n res.status(200).json(chat);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get chat!\" });\n }\n};\n\nexport const addChat = async (req, res) => {\n const tokenUserId = req.userId;\n try {\n const newChat = await prisma.chat.create({\n data: {\n userIDs: [tokenUserId, req.body.receiverId],\n },\n });\n res.status(200).json(newChat);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to add chat!\" });\n }\n};\n\nexport const readChat = async (req, res) => {\n const tokenUserId = req.userId;\n\n \n try {\n const chat = await prisma.chat.update({\n where: {\n id: req.params.id,\n userIDs: {\n hasSome: [tokenUserId],\n },\n },\n data: {\n seenBy: {\n set: [tokenUserId],\n },\n },\n });\n res.status(200).json(chat);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to read chat!\" });\n }\n};\n" }, { "path": "api/controllers/message.controller.js", "content": "import prisma from \"../lib/prisma.js\";\n\nexport const addMessage = async (req, res) => {\n const tokenUserId = req.userId;\n const chatId = req.params.chatId;\n const text = req.body.text;\n\n try {\n const chat = await prisma.chat.findUnique({\n where: {\n id: chatId,\n userIDs: {\n hasSome: [tokenUserId],\n },\n },\n });\n\n if (!chat) return res.status(404).json({ message: \"Chat not found!\" });\n\n const message = await prisma.message.create({\n data: {\n text,\n chatId,\n userId: tokenUserId,\n },\n });\n\n await prisma.chat.update({\n where: {\n id: chatId,\n },\n data: {\n seenBy: [tokenUserId],\n lastMessage: text,\n },\n });\n\n res.status(200).json(message);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to add message!\" });\n }\n};\n" }, { "path": "api/controllers/post.controller.js", "content": "import prisma from \"../lib/prisma.js\";\nimport jwt from \"jsonwebtoken\";\n\nexport const getPosts = async (req, res) => {\n const query = req.query;\n\n try {\n const posts = await prisma.post.findMany({\n where: {\n city: query.city || undefined,\n type: query.type || undefined,\n property: query.property || undefined,\n bedroom: parseInt(query.bedroom) || undefined,\n price: {\n gte: parseInt(query.minPrice) || undefined,\n lte: parseInt(query.maxPrice) || undefined,\n },\n },\n });\n\n // setTimeout(() => {\n res.status(200).json(posts);\n // }, 3000);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get posts\" });\n }\n};\n\nexport const getPost = async (req, res) => {\n const id = req.params.id;\n try {\n const post = await prisma.post.findUnique({\n where: { id },\n include: {\n postDetail: true,\n user: {\n select: {\n username: true,\n avatar: true,\n },\n },\n },\n });\n\n const token = req.cookies?.token;\n\n if (token) {\n jwt.verify(token, process.env.JWT_SECRET_KEY, async (err, payload) => {\n if (!err) {\n const saved = await prisma.savedPost.findUnique({\n where: {\n userId_postId: {\n postId: id,\n userId: payload.id,\n },\n },\n });\n res.status(200).json({ ...post, isSaved: saved ? true : false });\n }\n });\n }\n res.status(200).json({ ...post, isSaved: false });\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get post\" });\n }\n};\n\nexport const addPost = async (req, res) => {\n const body = req.body;\n const tokenUserId = req.userId;\n\n try {\n const newPost = await prisma.post.create({\n data: {\n ...body.postData,\n userId: tokenUserId,\n postDetail: {\n create: body.postDetail,\n },\n },\n });\n res.status(200).json(newPost);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to create post\" });\n }\n};\n\nexport const updatePost = async (req, res) => {\n try {\n res.status(200).json();\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to update posts\" });\n }\n};\n\nexport const deletePost = async (req, res) => {\n const id = req.params.id;\n const tokenUserId = req.userId;\n\n try {\n const post = await prisma.post.findUnique({\n where: { id },\n });\n\n if (post.userId !== tokenUserId) {\n return res.status(403).json({ message: \"Not Authorized!\" });\n }\n\n await prisma.post.delete({\n where: { id },\n });\n\n res.status(200).json({ message: \"Post deleted\" });\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to delete post\" });\n }\n};\n" }, { "path": "api/controllers/test.controller.js", "content": "import jwt from \"jsonwebtoken\";\n\nexport const shouldBeLoggedIn = async (req, res) => {\n console.log(req.userId)\n res.status(200).json({ message: \"You are Authenticated\" });\n};\n\nexport const shouldBeAdmin = async (req, res) => {\n const token = req.cookies.token;\n\n if (!token) return res.status(401).json({ message: \"Not Authenticated!\" });\n\n jwt.verify(token, process.env.JWT_SECRET_KEY, async (err, payload) => {\n if (err) return res.status(403).json({ message: \"Token is not Valid!\" });\n if (!payload.isAdmin) {\n return res.status(403).json({ message: \"Not authorized!\" });\n }\n });\n\n res.status(200).json({ message: \"You are Authenticated\" });\n};\n" }, { "path": "api/controllers/user.controller.js", "content": "import prisma from \"../lib/prisma.js\";\nimport bcrypt from \"bcrypt\";\n\nexport const getUsers = async (req, res) => {\n try {\n const users = await prisma.user.findMany();\n res.status(200).json(users);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get users!\" });\n }\n};\n\nexport const getUser = async (req, res) => {\n const id = req.params.id;\n try {\n const user = await prisma.user.findUnique({\n where: { id },\n });\n res.status(200).json(user);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get user!\" });\n }\n};\n\nexport const updateUser = async (req, res) => {\n const id = req.params.id;\n const tokenUserId = req.userId;\n const { password, avatar, ...inputs } = req.body;\n\n if (id !== tokenUserId) {\n return res.status(403).json({ message: \"Not Authorized!\" });\n }\n\n let updatedPassword = null;\n try {\n if (password) {\n updatedPassword = await bcrypt.hash(password, 10);\n }\n\n const updatedUser = await prisma.user.update({\n where: { id },\n data: {\n ...inputs,\n ...(updatedPassword && { password: updatedPassword }),\n ...(avatar && { avatar }),\n },\n });\n\n const { password: userPassword, ...rest } = updatedUser;\n\n res.status(200).json(rest);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to update users!\" });\n }\n};\n\nexport const deleteUser = async (req, res) => {\n const id = req.params.id;\n const tokenUserId = req.userId;\n\n if (id !== tokenUserId) {\n return res.status(403).json({ message: \"Not Authorized!\" });\n }\n\n try {\n await prisma.user.delete({\n where: { id },\n });\n res.status(200).json({ message: \"User deleted\" });\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to delete users!\" });\n }\n};\n\nexport const savePost = async (req, res) => {\n const postId = req.body.postId;\n const tokenUserId = req.userId;\n\n try {\n const savedPost = await prisma.savedPost.findUnique({\n where: {\n userId_postId: {\n userId: tokenUserId,\n postId,\n },\n },\n });\n\n if (savedPost) {\n await prisma.savedPost.delete({\n where: {\n id: savedPost.id,\n },\n });\n res.status(200).json({ message: \"Post removed from saved list\" });\n } else {\n await prisma.savedPost.create({\n data: {\n userId: tokenUserId,\n postId,\n },\n });\n res.status(200).json({ message: \"Post saved\" });\n }\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to delete users!\" });\n }\n};\n\nexport const profilePosts = async (req, res) => {\n const tokenUserId = req.userId;\n try {\n const userPosts = await prisma.post.findMany({\n where: { userId: tokenUserId },\n });\n const saved = await prisma.savedPost.findMany({\n where: { userId: tokenUserId },\n include: {\n post: true,\n },\n });\n\n const savedPosts = saved.map((item) => item.post);\n res.status(200).json({ userPosts, savedPosts });\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get profile posts!\" });\n }\n};\n\nexport const getNotificationNumber = async (req, res) => {\n const tokenUserId = req.userId;\n try {\n const number = await prisma.chat.count({\n where: {\n userIDs: {\n hasSome: [tokenUserId],\n },\n NOT: {\n seenBy: {\n hasSome: [tokenUserId],\n },\n },\n },\n });\n res.status(200).json(number);\n } catch (err) {\n console.log(err);\n res.status(500).json({ message: \"Failed to get profile posts!\" });\n }\n};\n" }, { "path": "api/lib/prisma.js", "content": "import { PrismaClient } from \"@prisma/client\";\n\nconst prisma = new PrismaClient();\n\nexport default prisma;\n" }, { "path": "api/middleware/verifyToken.js", "content": "import jwt from \"jsonwebtoken\";\n\nexport const verifyToken = (req, res, next) => {\n const token = req.cookies.token;\n\n if (!token) return res.status(401).json({ message: \"Not Authenticated!\" });\n\n jwt.verify(token, process.env.JWT_SECRET_KEY, async (err, payload) => {\n if (err) return res.status(403).json({ message: \"Token is not Valid!\" });\n req.userId = payload.id;\n\n next();\n });\n};\n" }, { "path": "api/package.json", "content": "{\n \"name\": \"api\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"app.js\",\n \"type\": \"module\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"@prisma/client\": \"^5.11.0\",\n \"bcrypt\": \"^5.1.1\",\n \"cookie-parser\": \"^1.4.6\",\n \"cors\": \"^2.8.5\",\n \"express\": \"^4.18.3\",\n \"jsonwebtoken\": \"^9.0.2\",\n \"prisma\": \"^5.11.0\"\n }\n}\n" }, { "path": "api/prisma/schema.prisma", "content": "// This is your Prisma schema file,\n// learn more about it in the docs: https://pris.ly/d/prisma-schema\n\n// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?\n// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init\n\ngenerator client {\n provider = \"prisma-client-js\"\n}\n\ndatasource db {\n provider = \"mongodb\"\n url = env(\"DATABASE_URL\")\n}\n\nmodel Post {\n id String @id @default(auto()) @map(\"_id\") @db.ObjectId\n title String\n price Int\n images String[]\n address String\n city String\n bedroom Int\n bathroom Int\n latitude String\n longitude String\n type Type\n property Property\n createdAt DateTime @default(now())\n user User @relation(fields: [userId], references: [id])\n userId String @db.ObjectId\n postDetail PostDetail?\n savedPosts SavedPost[]\n}\n\nenum Type {\n buy\n rent\n}\n\nenum Property {\n apartment\n house\n condo\n land\n}\n\nmodel PostDetail {\n id String @id @default(auto()) @map(\"_id\") @db.ObjectId\n desc String\n utilities String?\n pet String?\n income String?\n size Int?\n school Int?\n bus Int?\n restaurant Int?\n post Post @relation(fields: [postId], references: [id])\n postId String @unique @db.ObjectId\n}\n\nmodel SavedPost {\n id String @id @default(auto()) @map(\"_id\") @db.ObjectId\n user User @relation(fields: [userId], references: [id])\n post Post @relation(fields: [postId], references: [id])\n userId String @unique @db.ObjectId\n postId String @unique @db.ObjectId\n createdAt DateTime @default(now())\n\n @@unique([userId, postId])\n}\n\nmodel User {\n id String @id @default(auto()) @map(\"_id\") @db.ObjectId\n email String @unique\n username String @unique\n password String\n avatar String?\n createdAt DateTime @default(now())\n posts Post[]\n savedPosts SavedPost[]\n chats Chat[] @relation(fields: [chatIDs], references: [id])\n chatIDs String[] @db.ObjectId\n}\n\nmodel Chat {\n id String @id @default(auto()) @map(\"_id\") @db.ObjectId\n users User[] @relation(fields: [userIDs], references: [id])\n userIDs String[] @db.ObjectId\n createdAt DateTime @default(now())\n seenBy String[] @db.ObjectId\n messages Message[]\n lastMessage String?\n}\n\nmodel Message {\n id String @id @default(auto()) @map(\"_id\") @db.ObjectId\n text String\n userId String\n chat Chat @relation(fields: [chatId], references: [id])\n chatId String @db.ObjectId\n createdAt DateTime @default(now())\n}\n" }, { "path": "api/routes/auth.route.js", "content": "import express from \"express\";\nimport { login, logout, register } from \"../controllers/auth.controller.js\";\n\nconst router = express.Router();\n\nrouter.post(\"/register\", register);\nrouter.post(\"/login\", login);\nrouter.post(\"/logout\", logout);\n\nexport default router;\n" }, { "path": "api/routes/chat.route.js", "content": "import express from \"express\";\nimport {\n getChats,\n getChat,\n addChat,\n readChat,\n} from \"../controllers/chat.controller.js\";\nimport { verifyToken } from \"../middleware/verifyToken.js\";\n\nconst router = express.Router();\n\nrouter.get(\"/\", verifyToken, getChats);\nrouter.get(\"/:id\", verifyToken, getChat);\nrouter.post(\"/\", verifyToken, addChat);\nrouter.put(\"/read/:id\", verifyToken, readChat);\n\nexport default router;\n" }, { "path": "api/routes/message.route.js", "content": "import express from \"express\";\nimport {\n addMessage\n} from \"../controllers/message.controller.js\";\nimport {verifyToken} from \"../middleware/verifyToken.js\";\n\nconst router = express.Router();\n\n\nrouter.post(\"/:chatId\", verifyToken, addMessage);\n\nexport default router;\n" }, { "path": "api/routes/post.route.js", "content": "import express from \"express\";\nimport {verifyToken} from \"../middleware/verifyToken.js\";\nimport { addPost, deletePost, getPost, getPosts, updatePost } from \"../controllers/post.controller.js\";\n\nconst router = express.Router();\n\nrouter.get(\"/\", getPosts);\nrouter.get(\"/:id\", getPost);\nrouter.post(\"/\", verifyToken, addPost);\nrouter.put(\"/:id\", verifyToken, updatePost);\nrouter.delete(\"/:id\", verifyToken, deletePost);\n\nexport default router;\n" }, { "path": "api/routes/test.route.js", "content": "import express from \"express\";\nimport { shouldBeAdmin, shouldBeLoggedIn } from \"../controllers/test.controller.js\";\nimport { verifyToken } from \"../middleware/verifyToken.js\";\n\nconst router = express.Router();\n\nrouter.get(\"/should-be-logged-in\", verifyToken, shouldBeLoggedIn);\n\nrouter.get(\"/should-be-admin\", shouldBeAdmin);\n\nexport default router;\n" }, { "path": "api/routes/user.route.js", "content": "import express from \"express\";\nimport {\n deleteUser,\n getUser,\n getUsers,\n updateUser,\n savePost,\n profilePosts,\n getNotificationNumber\n} from \"../controllers/user.controller.js\";\nimport {verifyToken} from \"../middleware/verifyToken.js\";\n\nconst router = express.Router();\n\nrouter.get(\"/\", getUsers);\n// router.get(\"/search/:id\", verifyToken, getUser);\nrouter.put(\"/:id\", verifyToken, updateUser);\nrouter.delete(\"/:id\", verifyToken, deleteUser);\nrouter.post(\"/save\", verifyToken, savePost);\nrouter.get(\"/profilePosts\", verifyToken, profilePosts);\nrouter.get(\"/notification\", verifyToken, getNotificationNumber);\n\nexport default router;\n" }, { "path": "client/.eslintrc.cjs", "content": "module.exports = {\n root: true,\n env: { browser: true, es2020: true },\n extends: [\n 'eslint:recommended',\n 'plugin:react/recommended',\n 'plugin:react/jsx-runtime',\n 'plugin:react-hooks/recommended',\n ],\n ignorePatterns: ['dist', '.eslintrc.cjs'],\n parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },\n settings: { react: { version: '18.2' } },\n plugins: ['react-refresh'],\n rules: {\n \"react/prop-types\": \"off\",\n \"no-unused-vars\": \"warn\",\n 'react/jsx-no-target-blank': 'off',\n 'react-refresh/only-export-components': [\n 'warn',\n { allowConstantExport: true },\n ],\n },\n}\n" }, { "path": "client/.gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n" }, { "path": "client/README.md", "content": "# React Real Estate UI Design" }, { "path": "client/index.html", "content": "\n\n \n \n \n \n Lama Real Estate App\n \n \n \n \n
\n \n \n\n" }, { "path": "client/package.json", "content": "{\n \"name\": \"estateui\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"lint\": \"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"axios\": \"^1.6.7\",\n \"dompurify\": \"^3.0.9\",\n \"leaflet\": \"^1.9.4\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-leaflet\": \"^4.2.1\",\n \"react-quill\": \"^2.0.0\",\n \"react-router-dom\": \"^6.22.2\",\n \"sass\": \"^1.71.1\",\n \"socket.io-client\": \"^4.7.5\",\n \"timeago.js\": \"^4.0.2\",\n \"zustand\": \"^4.5.2\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.2.56\",\n \"@types/react-dom\": \"^18.2.19\",\n \"@vitejs/plugin-react\": \"^4.2.1\",\n \"eslint\": \"^8.56.0\",\n \"eslint-plugin-react\": \"^7.33.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.5\",\n \"vite\": \"^5.1.4\"\n }\n}\n" }, { "path": "client/src/App.jsx", "content": "import HomePage from \"./routes/homePage/homePage\";\nimport { createBrowserRouter, RouterProvider } from \"react-router-dom\";\nimport ListPage from \"./routes/listPage/listPage\";\nimport { Layout, RequireAuth } from \"./routes/layout/layout\";\nimport SinglePage from \"./routes/singlePage/singlePage\";\nimport ProfilePage from \"./routes/profilePage/profilePage\";\nimport Login from \"./routes/login/login\";\nimport Register from \"./routes/register/register\";\nimport ProfileUpdatePage from \"./routes/profileUpdatePage/profileUpdatePage\";\nimport NewPostPage from \"./routes/newPostPage/newPostPage\";\nimport { listPageLoader, profilePageLoader, singlePageLoader } from \"./lib/loaders\";\n\nfunction App() {\n const router = createBrowserRouter([\n {\n path: \"/\",\n element: ,\n children: [\n {\n path: \"/\",\n element: ,\n },\n {\n path: \"/list\",\n element: ,\n loader: listPageLoader,\n },\n {\n path: \"/:id\",\n element: ,\n loader: singlePageLoader,\n },\n\n {\n path: \"/login\",\n element: ,\n },\n {\n path: \"/register\",\n element: ,\n },\n ],\n },\n {\n path: \"/\",\n element: ,\n children: [\n {\n path: \"/profile\",\n element: ,\n loader: profilePageLoader\n },\n {\n path: \"/profile/update\",\n element: ,\n },\n {\n path: \"/add\",\n element: ,\n },\n ],\n },\n ]);\n\n return ;\n}\n\nexport default App;\n" }, { "path": "client/src/components/card/Card.jsx", "content": "import { Link } from \"react-router-dom\";\nimport \"./card.scss\";\n\nfunction Card({ item }) {\n return (\n
\n \n \"\"\n \n
\n

\n {item.title}\n

\n

\n \"\"\n {item.address}\n

\n

$ {item.price}

\n
\n
\n
\n \"\"\n {item.bedroom} bedroom\n
\n
\n \"\"\n {item.bathroom} bathroom\n
\n
\n
\n
\n \"\"\n
\n
\n \"\"\n
\n
\n
\n
\n
\n );\n}\n\nexport default Card;\n" }, { "path": "client/src/components/card/card.scss", "content": "@import \"../../responsive.scss\";\n\n.card {\n display: flex;\n gap: 20px;\n\n .imageContainer {\n flex: 2;\n height: 200px;\n\n @include md {\n display: none;\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 10px;\n }\n }\n .textContainer {\n flex: 3;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 10px;\n\n img {\n width: 16px;\n height: 16px;\n }\n\n .title {\n font-size: 20px;\n font-weight: 600;\n color: #444;\n transition: all 0.4s ease;\n\n &:hover {\n color: #000;\n scale: 1.01;\n }\n }\n\n .address {\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 5px;\n color: #888;\n }\n\n .price {\n font-size: 20px;\n font-weight: 300;\n padding: 5px;\n border-radius: 5px;\n background-color: rgba(254, 205, 81, 0.438);\n width: max-content;\n }\n\n .bottom {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n\n .features {\n display: flex;\n gap: 20px;\n font-size: 14px;\n\n .feature {\n display: flex;\n align-items: center;\n gap: 5px;\n background-color: whitesmoke;\n padding: 5px;\n border-radius: 5px;\n }\n }\n\n .icons {\n display: flex;\n gap: 20px;\n\n .icon {\n border: 1px solid #999;\n padding: 2px 5px;\n border-radius: 5px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n background-color: lightgray;\n }\n }\n }\n }\n }\n}\n" }, { "path": "client/src/components/chat/Chat.jsx", "content": "import { useContext, useEffect, useRef, useState } from \"react\";\nimport \"./chat.scss\";\nimport { AuthContext } from \"../../context/AuthContext\";\nimport apiRequest from \"../../lib/apiRequest\";\nimport { format } from \"timeago.js\";\nimport { SocketContext } from \"../../context/SocketContext\";\nimport { useNotificationStore } from \"../../lib/notificationStore\";\n\nfunction Chat({ chats }) {\n const [chat, setChat] = useState(null);\n const { currentUser } = useContext(AuthContext);\n const { socket } = useContext(SocketContext);\n\n const messageEndRef = useRef();\n\n const decrease = useNotificationStore((state) => state.decrease);\n\n useEffect(() => {\n messageEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [chat]);\n\n const handleOpenChat = async (id, receiver) => {\n try {\n const res = await apiRequest(\"/chats/\" + id);\n if (!res.data.seenBy.includes(currentUser.id)) {\n decrease();\n }\n setChat({ ...res.data, receiver });\n } catch (err) {\n console.log(err);\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n\n const formData = new FormData(e.target);\n const text = formData.get(\"text\");\n\n if (!text) return;\n try {\n const res = await apiRequest.post(\"/messages/\" + chat.id, { text });\n setChat((prev) => ({ ...prev, messages: [...prev.messages, res.data] }));\n e.target.reset();\n socket.emit(\"sendMessage\", {\n receiverId: chat.receiver.id,\n data: res.data,\n });\n } catch (err) {\n console.log(err);\n }\n };\n\n useEffect(() => {\n const read = async () => {\n try {\n await apiRequest.put(\"/chats/read/\" + chat.id);\n } catch (err) {\n console.log(err);\n }\n };\n\n if (chat && socket) {\n socket.on(\"getMessage\", (data) => {\n if (chat.id === data.chatId) {\n setChat((prev) => ({ ...prev, messages: [...prev.messages, data] }));\n read();\n }\n });\n }\n return () => {\n socket.off(\"getMessage\");\n };\n }, [socket, chat]);\n\n return (\n
\n
\n

Messages

\n {chats?.map((c) => (\n handleOpenChat(c.id, c.receiver)}\n >\n \"\"\n {c.receiver.username}\n

{c.lastMessage}

\n
\n ))}\n
\n {chat && (\n
\n
\n
\n \"\"\n {chat.receiver.username}\n
\n setChat(null)}>\n X\n \n
\n
\n {chat.messages.map((message) => (\n \n

{message.text}

\n {format(message.createdAt)}\n
\n ))}\n
\n
\n
\n \n \n
\n \n )}\n \n );\n}\n\nexport default Chat;\n" }, { "path": "client/src/components/chat/chat.scss", "content": ".chat {\n height: 100%;\n display: flex;\n flex-direction: column;\n\n .messages {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 20px;\n overflow-y: scroll;\n\n h1 {\n font-weight: 300;\n }\n\n .message {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n gap: 20px;\n cursor: pointer;\n\n img {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n }\n\n span {\n font-weight: bold;\n }\n }\n }\n\n .chatBox {\n flex: 1;\n background-color: white;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n .top {\n background-color: #f7c14b85;\n padding: 20px;\n font-weight: bold;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .user {\n display: flex;\n align-items: center;\n gap: 20px;\n\n img {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n object-fit: cover;\n }\n }\n .close {\n cursor: pointer;\n }\n }\n .center {\n height: 350px;\n overflow: scroll;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n .chatMessage{\n width: 50%;\n\n &.own{\n align-self: flex-end;\n text-align: right;\n }\n\n span{\n font-size: 12px;\n background-color: #f7c14b39;\n padding: 2px;\n border-radius: 5px;\n }\n }\n }\n .bottom {\n border-top: 2px solid #f7c14b85;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n textarea{\n flex:3;\n height: 100%;\n border: none;\n padding: 20px;\n }\n\n button{\n flex:1;\n background-color: #f7c14b85;\n height: 100%;\n border: none;\n cursor: pointer;\n }\n }\n }\n}\n" }, { "path": "client/src/components/filter/Filter.jsx", "content": "import { useState } from \"react\";\nimport \"./filter.scss\";\nimport { useSearchParams } from \"react-router-dom\";\n\nfunction Filter() {\n const [searchParams, setSearchParams] = useSearchParams();\n const [query, setQuery] = useState({\n type: searchParams.get(\"type\") || \"\",\n city: searchParams.get(\"city\") || \"\",\n property: searchParams.get(\"property\") || \"\",\n minPrice: searchParams.get(\"minPrice\") || \"\",\n maxPrice: searchParams.get(\"maxPrice\") || \"\",\n bedroom: searchParams.get(\"bedroom\") || \"\",\n });\n\n const handleChange = (e) => {\n setQuery({\n ...query,\n [e.target.name]: e.target.value,\n });\n };\n\n const handleFilter = () => {\n setSearchParams(query);\n };\n\n return (\n
\n

\n Search results for {searchParams.get(\"city\")}\n

\n
\n
\n \n \n
\n
\n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n
\n );\n}\n\nexport default Filter;\n" }, { "path": "client/src/components/filter/filter.scss", "content": ".filter {\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n h1 {\n font-weight: 300;\n font-size: 24px;\n }\n\n .item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n label {\n font-size: 10px;\n }\n\n input,\n select {\n width: 100px;\n padding: 10px;\n border: 1px solid #e0e0e0;\n border-radius: 5px;\n font-size: 14px;\n }\n }\n\n .top {\n input {\n width: 100%;\n }\n }\n\n .bottom {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 20px;\n\n button {\n width: 100px;\n padding: 10px;\n border: none;\n cursor: pointer;\n background-color: #fece51;\n\n img {\n width: 24px;\n height: 24px;\n }\n }\n }\n}\n" }, { "path": "client/src/components/list/List.jsx", "content": "import './list.scss'\nimport Card from\"../card/Card\"\n\nfunction List({posts}){\n return (\n
\n {posts.map(item=>(\n \n ))}\n
\n )\n}\n\nexport default List" }, { "path": "client/src/components/list/list.scss", "content": ".list{\n display: flex;\n flex-direction: column;\n gap: 50px;\n}" }, { "path": "client/src/components/map/Map.jsx", "content": "import { MapContainer, TileLayer } from \"react-leaflet\";\nimport \"./map.scss\";\nimport \"leaflet/dist/leaflet.css\";\nimport Pin from \"../pin/Pin\";\n\nfunction Map({ items }) {\n return (\n \n \n {items.map((item) => (\n \n ))}\n \n );\n}\n\nexport default Map;\n" }, { "path": "client/src/components/map/map.scss", "content": ".map{\n width: 100%;\n height: 100%;\n border-radius: 20px;\n}" }, { "path": "client/src/components/navbar/Navbar.jsx", "content": "import { useContext, useState } from \"react\";\nimport \"./navbar.scss\";\nimport { Link } from \"react-router-dom\";\nimport { AuthContext } from \"../../context/AuthContext\";\nimport { useNotificationStore } from \"../../lib/notificationStore\";\n\nfunction Navbar() {\n const [open, setOpen] = useState(false);\n\n const { currentUser } = useContext(AuthContext);\n\n const fetch = useNotificationStore((state) => state.fetch);\n const number = useNotificationStore((state) => state.number);\n\n if(currentUser) fetch();\n\n return (\n \n );\n}\n\nexport default Navbar;\n" }, { "path": "client/src/components/navbar/navbar.scss", "content": "@import \"../../responsive.scss\";\n\nnav {\n height: 100px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n a {\n transition: all 0.4s ease;\n\n @include sm {\n display: none;\n }\n\n &:hover {\n scale: 1.05;\n }\n }\n\n .left {\n flex: 3;\n display: flex;\n align-items: center;\n gap: 50px;\n\n .logo {\n font-weight: bold;\n font-size: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n img {\n width: 28px;\n }\n\n span {\n @include md {\n display: none;\n }\n\n @include sm {\n display: initial;\n }\n }\n }\n }\n .right {\n flex: 2;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n background-color: #fcf5f3;\n height: 100%;\n\n @include md {\n background-color: transparent;\n }\n\n a {\n padding: 12px 24px;\n margin: 20px;\n }\n\n .user{\n display: flex;\n align-items: center;\n font-weight: bold;\n\n img{\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n margin-right: 20px;\n }\n\n span{\n @include sm{\n display: none;\n }\n }\n\n .profile{\n padding: 12px 24px;\n background-color: #fece51;\n cursor: pointer;\n border: none;\n position: relative;\n \n .notification{\n position: absolute;\n top: -8px;\n right: -8px;\n background-color: red;\n color: white;\n border-radius: 50%;\n width: 26px;\n height: 26px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n }\n }\n\n .register {\n background-color: #fece51;\n }\n\n .menuIcon {\n display: none;\n z-index: 999;\n\n img {\n width: 36px;\n height: 36px;\n cursor: pointer;\n }\n\n @include sm {\n display: inline;\n }\n }\n\n .menu {\n position: absolute;\n top: 0;\n right: -50%;\n background-color: black;\n color: white;\n height: 100vh;\n width: 50%;\n transition: all 1s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n\n &.active {\n right: 0;\n }\n\n @include sm {\n a {\n display: initial;\n }\n }\n }\n }\n}\n" }, { "path": "client/src/components/pin/Pin.jsx", "content": "import { Marker, Popup } from \"react-leaflet\";\nimport \"./pin.scss\";\nimport { Link } from \"react-router-dom\";\n\nfunction Pin({ item }) {\n return (\n \n \n
\n \"\"\n
\n {item.title}\n {item.bedroom} bedroom\n $ {item.price}\n
\n
\n \n \n );\n}\n\nexport default Pin;\n" }, { "path": "client/src/components/pin/pin.scss", "content": ".popupContainer{\n display: flex;\n gap: 20px;\n\n img{\n width: 64px;\n height: 48px;\n object-fit: cover;\n border-radius: 5px;\n }\n\n .textContainer{\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n}" }, { "path": "client/src/components/searchBar/SearchBar.jsx", "content": "import { useState } from \"react\";\nimport \"./searchBar.scss\";\nimport { Link } from \"react-router-dom\";\n\nconst types = [\"buy\", \"rent\"];\n\nfunction SearchBar() {\n const [query, setQuery] = useState({\n type: \"buy\",\n city: \"\",\n minPrice: 0,\n maxPrice: 0,\n });\n\n const switchType = (val) => {\n setQuery((prev) => ({ ...prev, type: val }));\n };\n\n const handleChange = (e) => {\n setQuery((prev) => ({ ...prev, [e.target.name]: e.target.value }));\n };\n\n return (\n
\n
\n {types.map((type) => (\n switchType(type)}\n className={query.type === type ? \"active\" : \"\"}\n >\n {type}\n \n ))}\n
\n
\n \n \n \n \n \n \n \n
\n );\n}\n\nexport default SearchBar;\n" }, { "path": "client/src/components/searchBar/searchBar.scss", "content": "@import \"../../responsive.scss\";\n\n.searchBar {\n .type {\n\n\n button {\n padding: 16px 36px;\n border: 1px solid #999;\n border-bottom: none;\n cursor: pointer;\n background-color: white;\n text-transform: capitalize;\n\n &.active {\n background-color: black;\n color: white;\n }\n\n &:first-child {\n border-top-left-radius: 5px;\n border-right: none;\n }\n &:last-child {\n border-top-right-radius: 5px;\n border-left: none;\n }\n }\n }\n\n form {\n border: 1px solid #999;\n display: flex;\n justify-content: space-between;\n height: 64px;\n gap: 5px;\n\n @include sm {\n flex-direction: column;\n border: none;\n }\n\n input {\n border: none;\n padding: 0px 10px;\n width: 200px;\n\n @include lg {\n padding: 0px 5px;\n\n &:nth-child(2),\n &:nth-child(3) {\n width: 140px;\n }\n }\n @include md {\n width: 200px;\n &:nth-child(2),\n &:nth-child(3) {\n width: 200px;\n }\n }\n\n @include sm{\n width: auto;\n &:nth-child(2),\n &:nth-child(3) {\n width: auto;\n }\n padding: 20px;\n border: 1px solid #999;\n }\n }\n\n a{\n flex: 1;\n background-color: #fece51;\n display: flex;\n align-items: center;\n justify-content: center;\n\n button {\n border: none;\n cursor: pointer;\n background-color: #fece51;\n \n @include sm{\n padding: 10px;\n }\n \n img {\n width: 24px;\n height: 24px;\n }\n }\n }\n }\n}\n" }, { "path": "client/src/components/slider/Slider.jsx", "content": "import { useState } from \"react\";\nimport \"./slider.scss\";\n\nfunction Slider({ images }) {\n const [imageIndex, setImageIndex] = useState(null);\n\n const changeSlide = (direction) => {\n if (direction === \"left\") {\n if (imageIndex === 0) {\n setImageIndex(images.length - 1);\n } else {\n setImageIndex(imageIndex - 1);\n }\n } else {\n if (imageIndex === images.length - 1) {\n setImageIndex(0);\n } else {\n setImageIndex(imageIndex + 1);\n }\n }\n };\n\n return (\n
\n {imageIndex !== null && (\n
\n
changeSlide(\"left\")}>\n \"\"\n
\n
\n \"\"\n
\n
changeSlide(\"right\")}>\n \"\"\n
\n
setImageIndex(null)}>\n X\n
\n
\n )}\n
\n \"\" setImageIndex(0)} />\n
\n
\n {images.slice(1).map((image, index) => (\n setImageIndex(index + 1)}\n />\n ))}\n
\n
\n );\n}\n\nexport default Slider;\n" }, { "path": "client/src/components/slider/slider.scss", "content": "@import \"../../responsive.scss\";\n\n.slider {\n width: 100%;\n height: 350px;\n display: flex;\n gap: 20px;\n\n @include sm {\n height: 280px;\n }\n\n .fullSlider {\n position: absolute;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: black;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 9999;\n\n .arrow {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 50px;\n\n @include md {\n width: 30px;\n }\n\n @include sm {\n width: 20px;\n }\n\n &.right {\n transform: rotate(180deg);\n }\n }\n }\n .imgContainer {\n flex: 10;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n .close {\n position: absolute;\n top: 0;\n right: 0;\n color: white;\n font-size: 36px;\n font-weight: bold;\n padding: 50px;\n cursor: pointer;\n }\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 10px;\n cursor: pointer;\n }\n\n .bigImage {\n flex: 3;\n\n @include sm {\n flex: 2;\n }\n }\n .smallImages {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @include sm {\n flex: 1;\n }\n\n img {\n height: 100px;\n\n @include sm {\n height: 80px;\n }\n }\n }\n}\n" }, { "path": "client/src/components/uploadWidget/UploadWidget.jsx", "content": "import { createContext, useEffect, useState } from \"react\";\n\n// Create a context to manage the script loading state\nconst CloudinaryScriptContext = createContext();\n\nfunction UploadWidget({ uwConfig, setPublicId, setState }) {\n const [loaded, setLoaded] = useState(false);\n\n useEffect(() => {\n // Check if the script is already loaded\n if (!loaded) {\n const uwScript = document.getElementById(\"uw\");\n if (!uwScript) {\n // If not loaded, create and load the script\n const script = document.createElement(\"script\");\n script.setAttribute(\"async\", \"\");\n script.setAttribute(\"id\", \"uw\");\n script.src = \"https://upload-widget.cloudinary.com/global/all.js\";\n script.addEventListener(\"load\", () => setLoaded(true));\n document.body.appendChild(script);\n } else {\n // If already loaded, update the state\n setLoaded(true);\n }\n }\n }, [loaded]);\n\n const initializeCloudinaryWidget = () => {\n if (loaded) {\n var myWidget = window.cloudinary.createUploadWidget(\n uwConfig,\n (error, result) => {\n if (!error && result && result.event === \"success\") {\n console.log(\"Done! Here is the image info: \", result.info);\n setState((prev) => [...prev, result.info.secure_url]);\n }\n }\n );\n\n document.getElementById(\"upload_widget\").addEventListener(\n \"click\",\n function () {\n myWidget.open();\n },\n false\n );\n }\n };\n\n return (\n \n \n Upload\n \n \n );\n}\n\nexport default UploadWidget;\nexport { CloudinaryScriptContext };\n" }, { "path": "client/src/context/AuthContext.jsx", "content": "import { createContext, useEffect, useState } from \"react\";\n\nexport const AuthContext = createContext();\n\nexport const AuthContextProvider = ({ children }) => {\n const [currentUser, setCurrentUser] = useState(\n JSON.parse(localStorage.getItem(\"user\")) || null\n );\n\n const updateUser = (data) => {\n setCurrentUser(data);\n };\n\n useEffect(() => {\n localStorage.setItem(\"user\", JSON.stringify(currentUser));\n }, [currentUser]);\n\n return (\n \n {children}\n \n );\n};\n" }, { "path": "client/src/context/SocketContext.jsx", "content": "import { createContext, useContext, useEffect, useState } from \"react\";\nimport { io } from \"socket.io-client\";\nimport { AuthContext } from \"./AuthContext\";\n\nexport const SocketContext = createContext();\n\nexport const SocketContextProvider = ({ children }) => {\n const { currentUser } = useContext(AuthContext);\n const [socket, setSocket] = useState(null);\n\n useEffect(() => {\n setSocket(io(\"http://localhost:4000\"));\n }, []);\n\n useEffect(() => {\n currentUser && socket?.emit(\"newUser\", currentUser.id);\n }, [currentUser, socket]);\n\n return (\n \n {children}\n \n );\n};\n" }, { "path": "client/src/index.css", "content": "" }, { "path": "client/src/index.scss", "content": "*{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n}\n\na {\n text-decoration: none;\n color: inherit;\n}\n\nbody{\n font-family: \"Lato\", sans-serif;\n overflow: hidden;\n}" }, { "path": "client/src/lib/apiRequest.js", "content": "import axios from \"axios\";\n\nconst apiRequest = axios.create({\n baseURL: \"http://localhost:8800/api\",\n withCredentials: true,\n});\n\nexport default apiRequest;" }, { "path": "client/src/lib/dummydata.js", "content": "export const listData = [\n {\n id: 1,\n title: \"A Great Apartment Next to the Beach!\",\n images: [\"https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 2,\n bathroom: 1,\n price: 1000,\n address: \"456 Park Avenue, London\",\n latitude: 51.5074,\n longitude: -0.1278,\n },\n {\n id: 2,\n title: \"An Awesome Apartment Near the Park! Almost too good to be true!\",\n images: [\"https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 3,\n bathroom: 2,\n price: 1500,\n address: \"789 Oxford Street, London\",\n latitude: 52.4862,\n longitude: -1.8904,\n },\n {\n id: 3,\n title: \"A New Apartment in the City!\",\n images: [\"https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 1,\n bathroom: 1,\n price: 800,\n address: \"101 Baker Street, London\",\n latitude: 53.4808,\n longitude: -2.2426,\n },\n {\n id: 4,\n title: \"Great Location! Great Price! Great Apartment!\",\n images: [\"https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 2,\n bathroom: 1,\n price: 1000,\n address: \"234 Kingsway, London,\",\n latitude: 53.8008,\n longitude: -1.5491,\n },\n {\n id: 5,\n title: \"Apartment 5\",\n images: [\"https://images.pexels.com/photos/276625/pexels-photo-276625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 3,\n bathroom: 2,\n price: 1500,\n address: \"567 Victoria Road, London\",\n latitude: 53.4084,\n longitude: -2.9916,\n },\n {\n id: 6,\n title: \"Apartment 6\",\n images: [\"https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 1,\n bathroom: 1,\n price: 800,\n address: \"890 Regent Street, London\",\n latitude: 54.9783,\n longitude: -1.6174,\n },\n {\n id: 7,\n title: \"Apartment 7\",\n images: [\"https://images.pexels.com/photos/2029667/pexels-photo-2029667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 2,\n bathroom: 1,\n price: 1000,\n address: \"112 Piccadilly, London\",\n latitude: 53.3811,\n longitude: -1.4701,\n },\n {\n id: 8,\n title: \"Apartment 8\",\n images: [\"https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"],\n bedroom: 3,\n bathroom: 2,\n price: 1500,\n address: \"8765 Main High Street, London\",\n latitude: 51.4545,\n longitude: -2.5879,\n },\n];\n\nexport const singlePostData = {\n id: 1,\n title: \"Beautiful Apartment\",\n price: 1200,\n images: [\n \"https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n \"https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n \"https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n \"https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n ],\n bedRooms: 2,\n bathroom: 1,\n size: 861,\n latitude: 51.5074,\n longitude: -0.1278,\n city: \"London\",\n address: \"1234 Broadway St\",\n school: \"250m away\",\n bus: \"100m away\",\n restaurant: \"50m away\",\n description:\n \"Future alike hill pull picture swim magic chain seed engineer nest outer raise bound easy poetry gain loud weigh me recognize farmer bare danger. actually put square leg vessels earth engine matter key cup indeed body film century shut place environment were stage vertical roof bottom lady function breeze darkness beside tin view local breathe carbon swam declared magnet escape has from pile apart route coffee storm someone hold space use ahead sheep jungle closely natural attached part top grain your grade trade corn salmon trouble new bend most teacher range anybody every seat fifteen eventually\",\n};\n\nexport const userData = {\n id: 1,\n name: \"John Doe\",\n img: \"https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\",\n};" }, { "path": "client/src/lib/loaders.js", "content": "import { defer } from \"react-router-dom\";\nimport apiRequest from \"./apiRequest\";\n\nexport const singlePageLoader = async ({ request, params }) => {\n const res = await apiRequest(\"/posts/\" + params.id);\n return res.data;\n};\nexport const listPageLoader = async ({ request, params }) => {\n const query = request.url.split(\"?\")[1];\n const postPromise = apiRequest(\"/posts?\" + query);\n return defer({\n postResponse: postPromise,\n });\n};\n\nexport const profilePageLoader = async () => {\n const postPromise = apiRequest(\"/users/profilePosts\");\n const chatPromise = apiRequest(\"/chats\");\n return defer({\n postResponse: postPromise,\n chatResponse: chatPromise,\n });\n};\n" }, { "path": "client/src/lib/notificationStore.js", "content": "import { create } from \"zustand\";\nimport apiRequest from \"./apiRequest\";\n\nexport const useNotificationStore = create((set) => ({\n number: 0,\n fetch: async () => {\n const res = await apiRequest(\"/users/notification\");\n set({ number: res.data });\n },\n decrease: () => {\n set((prev) => ({ number: prev.number - 1 }));\n },\n reset: () => {\n set({ number: 0 });\n },\n}));\n" }, { "path": "client/src/main.jsx", "content": "import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport App from \"./App.jsx\";\nimport \"./index.scss\";\nimport { AuthContextProvider } from \"./context/AuthContext.jsx\";\nimport { SocketContextProvider } from \"./context/SocketContext.jsx\";\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n \n \n \n \n \n \n \n);\n" }, { "path": "client/src/responsive.scss", "content": "@mixin sm {\n @media (max-width: 738px) {\n @content;\n }\n}\n\n@mixin md {\n @media (max-width: 1024px) {\n @content;\n }\n}\n\n@mixin lg {\n @media (max-width: 1366px) {\n @content;\n }\n}\n" }, { "path": "client/src/routes/homePage/homePage.jsx", "content": "import { useContext } from \"react\";\nimport SearchBar from \"../../components/searchBar/SearchBar\";\nimport \"./homePage.scss\";\nimport { AuthContext } from \"../../context/AuthContext\";\n\nfunction HomePage() {\n\n const {currentUser} = useContext(AuthContext)\n\n return (\n
\n
\n
\n

Find Real Estate & Get Your Dream Place

\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos\n explicabo suscipit cum eius, iure est nulla animi consequatur\n facilis id pariatur fugit quos laudantium temporibus dolor ea\n repellat provident impedit!\n

\n \n
\n
\n

16+

\n

Years of Experience

\n
\n
\n

200

\n

Award Gained

\n
\n
\n

2000+

\n

Property Ready

\n
\n
\n
\n
\n
\n \"\"\n
\n
\n );\n}\n\nexport default HomePage;\n" }, { "path": "client/src/routes/homePage/homePage.scss", "content": "@import \"../../responsive.scss\";\n\n.homePage {\n display: flex;\n height: 100%;\n\n .textContainer {\n flex: 3;\n\n .wrapper {\n padding-right: 100px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 50px;\n height: 100%;\n\n @include lg{\n padding-right: 50px;\n }\n\n @include md{\n padding: 0;\n }\n\n @include sm{\n justify-content: flex-start;\n }\n\n .title {\n font-size: 64px;\n\n @include lg {\n font-size: 48px;\n }\n }\n\n .boxes {\n display: flex;\n justify-content: space-between;\n\n @include sm {\n display: none;\n }\n\n h1 {\n font-size: 36px;\n\n @include lg {\n font-size: 32px;\n }\n }\n\n h2 {\n font-size: 20px;\n font-weight: 300;\n }\n }\n }\n }\n\n .imgContainer {\n flex: 2;\n background-color: #fcf5f3;\n position: relative;\n display: flex;\n align-items: center;\n\n @include md {\n display: none;\n }\n\n img {\n width: 115%;\n position: absolute;\n right: 0;\n\n @include lg {\n width: 105%;\n }\n }\n }\n}\n" }, { "path": "client/src/routes/layout/layout.jsx", "content": "import \"./layout.scss\";\nimport Navbar from \"../../components/navbar/Navbar\";\nimport { Navigate, Outlet } from \"react-router-dom\";\nimport { useContext } from \"react\";\nimport { AuthContext } from \"../../context/AuthContext\";\n\nfunction Layout() {\n return (\n
\n
\n \n
\n
\n \n
\n
\n );\n}\n\nfunction RequireAuth() {\n const { currentUser } = useContext(AuthContext);\n\n if (!currentUser) return ;\n else {\n return (\n
\n
\n \n
\n
\n \n
\n
\n );\n }\n}\n\nexport { Layout, RequireAuth };\n" }, { "path": "client/src/routes/layout/layout.scss", "content": "@import \"../../responsive.scss\";\n\n.layout {\n height: 100vh;\n max-width: 1366px;\n margin-left: auto;\n margin-right: auto;\n padding-left: 20px;\n padding-right: 20px;\n display: flex;\n flex-direction: column;\n\n @include lg {\n // background-color: rgb(247, 210, 196);\n max-width: 1280px;\n }\n\n @include md {\n // background-color: rgb(186, 203, 234);\n max-width: 768px;\n }\n\n @include sm {\n // background-color: rgb(239, 200, 200);\n max-width: 640px;\n }\n\n .content {\n // flex: 1;\n height: calc(100vh - 100px);\n }\n}\n" }, { "path": "client/src/routes/listPage/listPage.jsx", "content": "import \"./listPage.scss\";\nimport Filter from \"../../components/filter/Filter\";\nimport Card from \"../../components/card/Card\";\nimport Map from \"../../components/map/Map\";\nimport { Await, useLoaderData } from \"react-router-dom\";\nimport { Suspense } from \"react\";\n\nfunction ListPage() {\n const data = useLoaderData();\n\n return (\n
\n
\n
\n \n Loading...

}>\n Error loading posts!

}\n >\n {(postResponse) =>\n postResponse.data.map((post) => (\n \n ))\n }\n \n \n
\n
\n
\n Loading...

}>\n Error loading posts!

}\n >\n {(postResponse) => }\n \n \n
\n
\n );\n}\n\nexport default ListPage;\n" }, { "path": "client/src/routes/listPage/listPage.scss", "content": "@import \"../../responsive.scss\";\n\n.listPage {\n display: flex;\n height: 100%;\n\n .listContainer {\n flex: 3;\n height: 100%;\n\n .wrapper{\n height: 100%;\n padding-right: 50px;\n display: flex;\n flex-direction: column;\n gap: 50px;\n overflow-y: scroll;\n padding-bottom: 50px;\n }\n }\n .mapContainer {\n flex: 2;\n height: 100%;\n background-color: #fcf5f3;\n\n @include md{\n display: none;\n }\n }\n}\n" }, { "path": "client/src/routes/login/login.jsx", "content": "import { useContext, useState } from \"react\";\nimport \"./login.scss\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport apiRequest from \"../../lib/apiRequest\";\nimport { AuthContext } from \"../../context/AuthContext\";\n\nfunction Login() {\n const [error, setError] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const {updateUser} = useContext(AuthContext)\n\n const navigate = useNavigate();\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setIsLoading(true);\n setError(\"\");\n const formData = new FormData(e.target);\n\n const username = formData.get(\"username\");\n const password = formData.get(\"password\");\n\n try {\n const res = await apiRequest.post(\"/auth/login\", {\n username,\n password,\n });\n\n updateUser(res.data)\n\n navigate(\"/\");\n } catch (err) {\n setError(err.response.data.message);\n } finally {\n setIsLoading(false);\n }\n };\n return (\n
\n
\n
\n

Welcome back

\n \n \n \n {error && {error}}\n {\"Don't\"} you have an account?\n \n
\n
\n \"\"\n
\n
\n );\n}\n\nexport default Login;\n" }, { "path": "client/src/routes/login/login.scss", "content": ".login {\r\n height: 100%;\r\n display: flex;\r\n\r\n .formContainer {\r\n flex: 3;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n\r\n input{\r\n padding: 20px;\r\n border: 1px solid gray;\r\n border-radius: 5px;\r\n }\r\n\r\n button{\r\n padding: 20px;\r\n border-radius: 5px;\r\n border: none;\r\n background-color: teal;\r\n color: white;\r\n font-weight: bold;\r\n cursor: pointer;\r\n\r\n &:disabled{\r\n background-color: #BED9D8;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n span{\r\n color: rgba(255, 0, 0, 0.591);\r\n }\r\n\r\n a{\r\n font-size: 14px;\r\n color: gray;\r\n border-bottom: 1px solid gray;\r\n width: max-content;\r\n }\r\n }\r\n }\r\n\r\n .imgContainer {\r\n flex: 2;\r\n background-color: #fcf5f3;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n img {\r\n width: 100%;\r\n }\r\n }\r\n}\r\n" }, { "path": "client/src/routes/newPostPage/newPostPage.jsx", "content": "import { useState } from \"react\";\nimport \"./newPostPage.scss\";\nimport ReactQuill from \"react-quill\";\nimport \"react-quill/dist/quill.snow.css\";\nimport apiRequest from \"../../lib/apiRequest\";\nimport UploadWidget from \"../../components/uploadWidget/UploadWidget\";\nimport { useNavigate } from \"react-router-dom\";\n\nfunction NewPostPage() {\n const [value, setValue] = useState(\"\");\n const [images, setImages] = useState([]);\n const [error, setError] = useState(\"\");\n\n const navigate = useNavigate()\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const formData = new FormData(e.target);\n const inputs = Object.fromEntries(formData);\n\n try {\n const res = await apiRequest.post(\"/posts\", {\n postData: {\n title: inputs.title,\n price: parseInt(inputs.price),\n address: inputs.address,\n city: inputs.city,\n bedroom: parseInt(inputs.bedroom),\n bathroom: parseInt(inputs.bathroom),\n type: inputs.type,\n property: inputs.property,\n latitude: inputs.latitude,\n longitude: inputs.longitude,\n images: images,\n },\n postDetail: {\n desc: value,\n utilities: inputs.utilities,\n pet: inputs.pet,\n income: inputs.income,\n size: parseInt(inputs.size),\n school: parseInt(inputs.school),\n bus: parseInt(inputs.bus),\n restaurant: parseInt(inputs.restaurant),\n },\n });\n navigate(\"/\"+res.data.id)\n } catch (err) {\n console.log(err);\n setError(error);\n }\n };\n\n return (\n
\n
\n

Add New Post

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n {error && error}\n
\n
\n
\n
\n {images.map((image, index) => (\n \"\"\n ))}\n \n
\n
\n );\n}\n\nexport default NewPostPage;\n" }, { "path": "client/src/routes/newPostPage/newPostPage.scss", "content": ".newPostPage {\n height: 100%;\n display: flex;\n\n .formContainer {\n flex: 3;\n overflow: scroll;\n\n .wrapper {\n margin: 30px 50px 100px 0px;\n\n form {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 20px;\n\n .item {\n width: 30%;\n display: flex;\n flex-direction: column;\n gap: 5px;\n\n label {\n }\n\n input {\n padding: 20px;\n border-radius: 5px;\n border: 1px solid gray;\n }\n\n select {\n padding: 19px;\n }\n\n &.description {\n width: 100%;\n height: 320px;\n\n .quill > .ql-container > .ql-editor{\n height: 200px;\n font-size: 16px;\n }\n }\n }\n .sendButton {\n width: 30%;\n border-radius: 5px;\n border: none;\n background-color: teal;\n color: white;\n font-weight: bold;\n cursor: pointer;\n }\n }\n }\n }\n\n .sideContainer {\n flex: 2;\n background-color: #fcf5f3;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: center;\n justify-content: center;\n\n img {\n width: 50%;\n height: 180px;\n object-fit: cover;\n border-radius: 5px;\n }\n }\n}\n" }, { "path": "client/src/routes/profilePage/profilePage.jsx", "content": "import Chat from \"../../components/chat/Chat\";\nimport List from \"../../components/list/List\";\nimport \"./profilePage.scss\";\nimport apiRequest from \"../../lib/apiRequest\";\nimport { Await, Link, useLoaderData, useNavigate } from \"react-router-dom\";\nimport { Suspense, useContext } from \"react\";\nimport { AuthContext } from \"../../context/AuthContext\";\n\nfunction ProfilePage() {\n const data = useLoaderData();\n\n const { updateUser, currentUser } = useContext(AuthContext);\n\n const navigate = useNavigate();\n\n const handleLogout = async () => {\n try {\n await apiRequest.post(\"/auth/logout\");\n updateUser(null);\n navigate(\"/\");\n } catch (err) {\n console.log(err);\n }\n };\n return (\n
\n
\n
\n
\n

User Information

\n \n \n \n
\n
\n \n Avatar:\n \"\"\n \n \n Username: {currentUser.username}\n \n \n E-mail: {currentUser.email}\n \n \n
\n
\n

My List

\n \n \n \n
\n Loading...

}>\n Error loading posts!

}\n >\n {(postResponse) => }\n \n \n
\n

Saved List

\n
\n Loading...

}>\n Error loading posts!

}\n >\n {(postResponse) => }\n \n \n
\n
\n
\n
\n Loading...

}>\n Error loading chats!

}\n >\n {(chatResponse) => }\n \n \n
\n
\n
\n );\n}\n\nexport default ProfilePage;\n" }, { "path": "client/src/routes/profilePage/profilePage.scss", "content": "@import \"../../responsive.scss\";\n\n.profilePage {\n display: flex;\n height: 100%;\n\n @include md{\n flex-direction: column;\n overflow: scroll;\n }\n\n .details {\n flex: 3;\n overflow-y: scroll;\n padding-bottom: 50px;\n\n @include md{\n flex:none;\n height: max-content;\n }\n\n .wrapper{\n padding-right: 50px;\n display: flex;\n flex-direction: column;\n gap: 50px;\n\n .title{\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n h1{\n font-weight: 300;\n }\n\n button{\n padding: 12px 24px;\n background-color: #fece51;\n cursor: pointer;\n border: none;\n }\n }\n\n .info{\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n span{\n display: flex;\n align-items: center;\n gap: 20px;\n }\n\n button{\n width: 100px;\n background-color: teal;\n border: none;\n color: white;\n padding: 10px 20px;\n cursor: pointer;\n border-radius: 5px;\n }\n\n img{\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n }\n }\n }\n }\n .chatContainer {\n flex: 2;\n background-color: #fcf5f3;\n height: 100%;\n\n @include md{\n flex:none;\n height: max-content;\n }\n\n .wrapper{\n padding: 0px 20px;\n height: 100%;\n }\n }\n}\n" }, { "path": "client/src/routes/profileUpdatePage/profileUpdatePage.jsx", "content": "import { useContext, useState } from \"react\";\nimport \"./profileUpdatePage.scss\";\nimport { AuthContext } from \"../../context/AuthContext\";\nimport apiRequest from \"../../lib/apiRequest\";\nimport { useNavigate } from \"react-router-dom\";\nimport UploadWidget from \"../../components/uploadWidget/UploadWidget\";\n\nfunction ProfileUpdatePage() {\n const { currentUser, updateUser } = useContext(AuthContext);\n const [error, setError] = useState(\"\");\n const [avatar, setAvatar] = useState([]);\n\n const navigate = useNavigate();\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const formData = new FormData(e.target);\n\n const { username, email, password } = Object.fromEntries(formData);\n\n try {\n const res = await apiRequest.put(`/users/${currentUser.id}`, {\n username,\n email,\n password,\n avatar:avatar[0]\n });\n updateUser(res.data);\n navigate(\"/profile\");\n } catch (err) {\n console.log(err);\n setError(err.response.data.message);\n }\n };\n\n return (\n
\n
\n
\n

Update Profile

\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n {error && error}\n
\n
\n
\n \"\"\n \n
\n
\n );\n}\n\nexport default ProfileUpdatePage;\n" }, { "path": "client/src/routes/profileUpdatePage/profileUpdatePage.scss", "content": ".profileUpdatePage {\n height: 100%;\n display: flex;\n\n .formContainer {\n flex:3;\n display: flex;\n align-items: center;\n justify-content: center;\n form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n .item {\n display: flex;\n flex-direction: column;\n gap: 5px;\n\n label {\n }\n\n input {\n padding: 20px;\n border-radius: 5px;\n border: 1px solid gray;\n }\n }\n button {\n padding: 20px;\n border-radius: 5px;\n border: none;\n background-color: teal;\n color: white;\n font-weight: bold;\n cursor: pointer;\n }\n }\n }\n\n .sideContainer {\n flex: 2;\n background-color: #fcf5f3;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: center;\n justify-content: center;\n\n .avatar{\n width: 50%;\n object-fit: cover;\n }\n }\n}\n" }, { "path": "client/src/routes/register/register.jsx", "content": "import \"./register.scss\";\nimport { Link, useNavigate } from \"react-router-dom\";\nimport axios from \"axios\";\nimport { useState } from \"react\";\nimport apiRequest from \"../../lib/apiRequest\";\n\nfunction Register() {\n const [error, setError] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const navigate = useNavigate();\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError(\"\")\n setIsLoading(true);\n const formData = new FormData(e.target);\n\n const username = formData.get(\"username\");\n const email = formData.get(\"email\");\n const password = formData.get(\"password\");\n\n try {\n const res = await apiRequest.post(\"/auth/register\", {\n username,\n email,\n password,\n });\n\n navigate(\"/login\");\n } catch (err) {\n setError(err.response.data.message);\n } finally {\n setIsLoading(false);\n }\n };\n return (\n
\n
\n
\n

Create an Account

\n \n \n \n \n {error && {error}}\n Do you have an account?\n
\n
\n
\n \"\"\n
\n
\n );\n}\n\nexport default Register;\n" }, { "path": "client/src/routes/register/register.scss", "content": ".registerPage {\n height: 100%;\n display: flex;\n\n .formContainer {\n flex: 3;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n input {\n padding: 20px;\n border: 1px solid gray;\n border-radius: 5px;\n }\n\n button {\n padding: 20px;\n border-radius: 5px;\n border: none;\n background-color: teal;\n color: white;\n font-weight: bold;\n cursor: pointer;\n\n &:disabled {\n background-color: #bed9d8;\n cursor: not-allowed;\n }\n }\n\n span {\n color: rgba(255, 0, 0, 0.591);\n }\n\n a {\n font-size: 14px;\n color: gray;\n border-bottom: 1px solid gray;\n width: max-content;\n }\n }\n }\n\n .imgContainer {\n flex: 2;\n background-color: #fcf5f3;\n display: flex;\n align-items: center;\n justify-content: center;\n img {\n width: 100%;\n }\n }\n}\n" }, { "path": "client/src/routes/singlePage/singlePage.jsx", "content": "import \"./singlePage.scss\";\nimport Slider from \"../../components/slider/Slider\";\nimport Map from \"../../components/map/Map\";\nimport { useNavigate, useLoaderData } from \"react-router-dom\";\nimport DOMPurify from \"dompurify\";\nimport { useContext, useState } from \"react\";\nimport { AuthContext } from \"../../context/AuthContext\";\nimport apiRequest from \"../../lib/apiRequest\";\n\nfunction SinglePage() {\n const post = useLoaderData();\n const [saved, setSaved] = useState(post.isSaved);\n const { currentUser } = useContext(AuthContext);\n const navigate = useNavigate();\n\n const handleSave = async () => {\n if (!currentUser) {\n navigate(\"/login\");\n }\n // AFTER REACT 19 UPDATE TO USEOPTIMISTIK HOOK\n setSaved((prev) => !prev);\n try {\n await apiRequest.post(\"/users/save\", { postId: post.id });\n } catch (err) {\n console.log(err);\n setSaved((prev) => !prev);\n }\n };\n\n return (\n
\n
\n
\n \n
\n
\n
\n

{post.title}

\n
\n \"\"\n {post.address}\n
\n
$ {post.price}
\n
\n
\n \"\"\n {post.user.username}\n
\n
\n
\n
\n
\n
\n
\n
\n

General

\n
\n
\n \"\"\n
\n Utilities\n {post.postDetail.utilities === \"owner\" ? (\n

Owner is responsible

\n ) : (\n

Tenant is responsible

\n )}\n
\n
\n
\n \"\"\n
\n Pet Policy\n {post.postDetail.pet === \"allowed\" ? (\n

Pets Allowed

\n ) : (\n

Pets not Allowed

\n )}\n
\n
\n
\n \"\"\n
\n Income Policy\n

{post.postDetail.income}

\n
\n
\n
\n

Sizes

\n
\n
\n \"\"\n {post.postDetail.size} sqft\n
\n
\n \"\"\n {post.bedroom} beds\n
\n
\n \"\"\n {post.bathroom} bathroom\n
\n
\n

Nearby Places

\n
\n
\n \"\"\n
\n School\n

\n {post.postDetail.school > 999\n ? post.postDetail.school / 1000 + \"km\"\n : post.postDetail.school + \"m\"}{\" \"}\n away\n

\n
\n
\n
\n \"\"\n
\n Bus Stop\n

{post.postDetail.bus}m away

\n
\n
\n
\n \"\"\n
\n Restaurant\n

{post.postDetail.restaurant}m away

\n
\n
\n
\n

Location

\n
\n \n
\n
\n \n \n \"\"\n {saved ? \"Place Saved\" : \"Save the Place\"}\n \n
\n
\n
\n \n );\n}\n\nexport default SinglePage;\n" }, { "path": "client/src/routes/singlePage/singlePage.scss", "content": "@import \"../../responsive.scss\";\n\n.singlePage {\n display: flex;\n height: 100%;\n\n @include md {\n flex-direction: column;\n overflow: scroll;\n }\n\n .details {\n flex: 3;\n height: 100%;\n overflow-y: scroll;\n\n @include md {\n flex: none;\n height: max-content;\n margin-bottom: 50px;\n }\n\n .wrapper {\n padding-right: 50px;\n\n @include lg {\n padding-right: 20px;\n }\n @include md {\n padding-right: 0px;\n }\n\n .info {\n margin-top: 50px;\n .top {\n display: flex;\n justify-content: space-between;\n\n @include sm {\n flex-direction: column;\n gap: 20px;\n }\n\n .post {\n display: flex;\n flex-direction: column;\n gap: 20px;\n h1 {\n font-weight: 400;\n }\n .address {\n display: flex;\n gap: 5px;\n align-items: center;\n color: #888;\n font-size: 14px;\n\n img {\n width: 16px;\n height: 16px;\n }\n }\n .price {\n padding: 5px;\n background-color: rgba(254, 205, 81, 0.438);\n border-radius: 5px;\n width: max-content;\n font-size: 20px;\n font-weight: 300;\n }\n }\n .user {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding: 0px 50px;\n border-radius: 10px;\n background-color: rgba(254, 205, 81, 0.209);\n font-weight: 600;\n\n @include sm {\n padding: 20px 50px;\n }\n\n img {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n object-fit: cover;\n }\n }\n }\n .bottom {\n margin-top: 50px;\n color: #555;\n line-height: 20px;\n }\n }\n }\n }\n .features {\n flex: 2;\n background-color: #fcf5f3;\n height: 100%;\n overflow-y: scroll;\n\n @include md {\n flex: none;\n height: max-content;\n margin-bottom: 50px;\n }\n\n .wrapper {\n padding: 0px 20px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @include md {\n padding: 20px;\n }\n\n img {\n width: 24px;\n height: 24px;\n }\n\n .title {\n font-weight: bold;\n font-size: 18px;\n margin-bottom: 10px;\n }\n\n .feature {\n display: flex;\n align-items: center;\n gap: 10px;\n\n img {\n background-color: rgba(254, 205, 81, 0.209);\n }\n\n .featureText {\n span {\n font-weight: bold;\n }\n p {\n font-size: 14px;\n }\n }\n }\n\n .listVertical {\n display: flex;\n flex-direction: column;\n gap: 20px;\n padding: 20px 10px;\n background-color: white;\n border-radius: 10px;\n }\n .listHorizontal {\n display: flex;\n justify-content: space-between;\n padding: 20px 10px;\n background-color: white;\n border-radius: 10px;\n }\n\n .sizes {\n display: flex;\n justify-content: space-between;\n\n @include lg {\n font-size: 12px;\n }\n\n .size {\n display: flex;\n align-items: center;\n gap: 10px;\n background-color: white;\n padding: 10px;\n border-radius: 5px;\n }\n }\n\n .mapContainer {\n width: 100%;\n height: 200px;\n }\n\n .buttons {\n display: flex;\n justify-content: space-between;\n\n button {\n padding: 20px;\n display: flex;\n align-items: center;\n gap: 5px;\n background-color: white;\n border: 1px solid #fece51;\n border-radius: 5px;\n cursor: pointer;\n\n img {\n width: 16px;\n height: 16px;\n }\n }\n }\n }\n }\n}\n" }, { "path": "client/vite.config.js", "content": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [react()],\n})\n" }, { "path": "socket/.gitignore", "content": "node_modules" }, { "path": "socket/app.js", "content": "import { Server } from \"socket.io\";\n\nconst io = new Server({\n cors: {\n origin: \"http://localhost:5173\",\n },\n});\n\nlet onlineUser = [];\n\nconst addUser = (userId, socketId) => {\n const userExits = onlineUser.find((user) => user.userId === userId);\n if (!userExits) {\n onlineUser.push({ userId, socketId });\n }\n};\n\nconst removeUser = (socketId) => {\n onlineUser = onlineUser.filter((user) => user.socketId !== socketId);\n};\n\nconst getUser = (userId) => {\n return onlineUser.find((user) => user.userId === userId);\n};\n\nio.on(\"connection\", (socket) => {\n socket.on(\"newUser\", (userId) => {\n addUser(userId, socket.id);\n });\n\n socket.on(\"sendMessage\", ({ receiverId, data }) => {\n const receiver = getUser(receiverId);\n io.to(receiver.socketId).emit(\"getMessage\", data);\n });\n\n socket.on(\"disconnect\", () => {\n removeUser(socket.id);\n });\n});\n\nio.listen(\"4000\");\n" }, { "path": "socket/package.json", "content": "{\n \"name\": \"socket\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"app.js\",\n \"type\": \"module\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"socket.io\": \"^4.7.5\"\n }\n}\n" } ]