+ 
+
+ );
+}
diff --git a/src/components/header/header.css b/src/components/header/header.css
new file mode 100644
index 0000000..de23bde
--- /dev/null
+++ b/src/components/header/header.css
@@ -0,0 +1,30 @@
+.header{
+ margin-top: 60px;
+}
+
+.headerTitles{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-family: 'Lora', serif;
+ color: #444;
+}
+
+.headerTitleSm{
+ position: absolute;
+ top: 18%;
+ font-size: 20px;
+}
+
+.headerTitleLg{
+ position: absolute;
+ top: 20%;
+ font-size: 100px;
+}
+
+.headerImg{
+ width: 100%;
+ height: 450px;
+ margin-top: 80px;
+ object-fit: cover;
+}
\ No newline at end of file
diff --git a/src/components/post/Post.jsx b/src/components/post/Post.jsx
new file mode 100644
index 0000000..861e64d
--- /dev/null
+++ b/src/components/post/Post.jsx
@@ -0,0 +1,34 @@
+import "./post.css"
+import {Link } from "react-router-dom";
+
+const Post = ({post}) => {
+ const PF = "http://localhost:5000/images/"
+ return (
+
+ React & Node
+ Blog
+
+
+
+ {post.photo && (
+
+ 
+ )}
+
+
+ );
+}
+
+export default Post;
diff --git a/src/components/post/post.css b/src/components/post/post.css
new file mode 100644
index 0000000..c7aeea9
--- /dev/null
+++ b/src/components/post/post.css
@@ -0,0 +1,56 @@
+.post{
+ width: 385px;
+ margin: 0px 25px 40px 25px;
+}
+
+.postImg{
+ width: 100%;
+ height: 280px;
+ object-fit: cover;
+ border-radius: 7px;
+}
+
+.postInfo {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.postCat {
+ font-family: 'Varela Round', sans-serif;
+ font-size: 11px;
+ color: #be9656;
+ line-height: 20px;
+ margin-top: 15px;
+ margin-right: 10px;
+ cursor: pointer;
+}
+
+.postTitle{
+ font-family: 'Josefin Sans', sans-serif;
+ font-size: 24px;
+ font-weight: 700;
+ margin-top: 15px;
+ cursor: pointer;
+}
+
+.postDate{
+ font-family: 'Lora', serif;
+ font-style: italic;
+ font-size: 13px;
+ color: #999;
+ margin-top: 15px;
+}
+
+.postDesc{
+ font-family: 'Varela', sans-serif;
+ font-size: 14px;
+ color: #444;
+ line-height: 24px;
+ margin-top: 15px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clam: 4;
+ -webkit-box-orient: vertical;
+}
\ No newline at end of file
diff --git a/src/components/posts/Posts.jsx b/src/components/posts/Posts.jsx
new file mode 100644
index 0000000..49e6e75
--- /dev/null
+++ b/src/components/posts/Posts.jsx
@@ -0,0 +1,12 @@
+import Post from "../../components/post/Post"
+import "./posts.css"
+
+export default function Posts({posts}) {
+ return (
+
+
+
+
+ {post.categories.map((c) => (
+ {c.name}
+ ))}
+
+
+ {post.title}
+
+ {new Date(post.createdAt).toDateString( )}
+ +
+ {post.desc} +
+
+ {posts.map((p) => (
+
+ )
+}
diff --git a/src/components/posts/posts.css b/src/components/posts/posts.css
new file mode 100644
index 0000000..391fb91
--- /dev/null
+++ b/src/components/posts/posts.css
@@ -0,0 +1,6 @@
+.posts{
+ flex: 9;
+ display: flex;
+ flex-wrap: wrap;
+ margin: 20px;
+}
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.jsx b/src/components/sidebar/Sidebar.jsx
new file mode 100644
index 0000000..6d6665f
--- /dev/null
+++ b/src/components/sidebar/Sidebar.jsx
@@ -0,0 +1,58 @@
+import "./sidebar.css";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import {Link } from "react-router-dom";
+
+const Sidebar = () => {
+ const [cats,setCats] = useState([]);
+
+ useEffect(()=>{
+ const getCats = async ()=>
+ {
+ const res = await axios.get("/categories")
+ setCats(res.data)
+ };
+ getCats();
+ },[]);
+ return (
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/src/components/sidebar/sidebar.css b/src/components/sidebar/sidebar.css
new file mode 100644
index 0000000..6cea546
--- /dev/null
+++ b/src/components/sidebar/sidebar.css
@@ -0,0 +1,64 @@
+.sidebar {
+ flex: 3;
+ margin: 20px;
+ padding-bottom: 30px;
+ background-color: #fdfbfb;
+ border-radius: 10px;
+ flex-direction: column;
+ align-items: center;
+}
+
+.sidebarItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.sidebarTitle {
+ margin: 10px;
+ padding: 5px;
+ width: 80%;
+ border-top: 1px solid #a7a4a4;
+ border-bottom: 1px solid #a7a4a4;
+ font-family: 'Varela', sans-serif;
+ font-weight: 600;
+ line-height: 20px;
+ text-align: center;
+ color: #222;
+}
+
+.sidebarItem > img{
+ margin-top: 15px;
+ height: 300px;
+ width: 250px;
+}
+
+.sidebarItem > p {
+ padding: 30px;
+}
+
+.sidebarList{
+ list-style: none;
+ margin-bottom: 30px;
+}
+
+.sidebarListItem{
+ display: inline-block;
+ width: 50%;
+ cursor: pointer;
+}
+
+.sidebarSocial{
+ margin-top: 15px;
+ width: 250px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
+.sidebarIcon{
+ font-size: 16px;
+ margin-left: 10px;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/singlePost/SinglePost.jsx b/src/components/singlePost/SinglePost.jsx
new file mode 100644
index 0000000..37e513d
--- /dev/null
+++ b/src/components/singlePost/SinglePost.jsx
@@ -0,0 +1,103 @@
+import "./singlePost.css";
+import { useLocation } from "react-router";
+import { useEffect, useState, useContext } from "react";
+import axios from "axios";
+import { Context } from "../../context/Context";
+import { Link } from "react-router-dom";
+
+export default function SinglePost() {
+ const location = useLocation();
+ const path = location.pathname.split("/")[2];
+ const [post, setPost] = useState({});
+ const PF = "http://localhost:5000/images/";
+ const { user } = useContext(Context);
+ const [title, setTitle] = useState("");
+ const [desc, setDesc] = useState("");
+ const [updateMode, setUpdateMode] = useState(false);
+
+ useEffect(() => {
+ const getPost = async () => {
+ const res = await axios.get("/posts/" + path);
+ setPost(res.data);
+ setTitle(res.data.title);
+ setDesc(res.data.desc);
+ };
+ getPost();
+ }, [path]);
+ const handleDelete = async () => {
+ try {
+ await axios.delete(`/posts/${post._id}`, {
+ data: { username: user.username },
+ });
+ window.location.replace("/");
+ } catch (err) {}
+ };
+ const handleUpdate = async () => {
+ try {
+ await axios.put(`/posts/${post._id}`, {
+ username: user.username, title, desc,
+ });
+ // window.location.reload();
+ setUpdateMode(false);
+ } catch (err) {}
+ };
+ return (
+
+ ABOUT ME
+ 
+
+
+ + Magna consequat officia magna nulla excepteur qui. Ut aliqua deserunt + velit irure minim id qui enim eu reprehenderit laboris laborum + consequat. Id fugiat quis deserunt irure excepteur deserunt proident + id. Exercitation consectetur incididunt est nulla. Veniam laboris + eiusmod amet nisi sit elit ipsum culpa id duis duis excepteur. Est + magna duis mollit magna nisi velit deserunt voluptate ullamco dolor + ut. +
+
+ CATEGORIES
+
+ -
+ {cats.map((c)=>(
+
+
- {c.name} + + ))} +
+ FOLLOW US
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/write/write.css b/src/pages/write/write.css
new file mode 100644
index 0000000..7dc87f2
--- /dev/null
+++ b/src/pages/write/write.css
@@ -0,0 +1,63 @@
+.write{
+ padding-top: 50px;
+}
+
+.writeImg{
+ margin-left: 150px;
+ width: 70vw;
+ height: 250px;
+ border-radius: 10px;
+ object-fit: cover;
+}
+.writeForm{
+ position: relative;
+}
+
+.writeFormGroup{
+ margin-left: 150px;
+ display: flex;
+ align-items: center;
+
+}
+
+.writeIcon{
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ border: 1px solid;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ color: rgb(121, 118, 118);
+ cursor: pointer;
+}
+
+.writeInput{
+ font-size: 30px;
+ border: none;
+ padding: 20px;
+ width: 70vw;
+}
+
+.writeInput:focus{
+ outline: none;
+}
+
+.writeText{
+ font-size: 20px;
+ height: 100vh;
+}
+
+.writeSubmit{
+ position: absolute;
+ top: 20px;
+ right: 50px;
+ color: white;
+ background-color: teal;
+ padding: 10px;
+ border-radius: 10px;
+ cursor: pointer;
+ font-size: 16px;
+}
+
diff --git a/yarn-error.log b/yarn-error.log
new file mode 100644
index 0000000..3ff27a4
--- /dev/null
+++ b/yarn-error.log
@@ -0,0 +1,9022 @@
+Arguments:
+ C:\Program Files\nodejs\node.exe C:\Users\palla\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js add react-route
+
+PATH:
+ C:\Program Files\Common Files\Oracle\Java\javapath;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\ProgramData\chocolatey\bin;C:\Program Files\Git\cmd;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\MySQL\MySQL Shell 8.0\bin\;C:\Users\palla\AppData\Local\Programs\Python\Python310\Scripts\;C:\Users\palla\AppData\Local\Programs\Python\Python310\;C:\Users\palla\AppData\Local\Microsoft\WindowsApps;C:\Users\palla\AppData\Roaming\npm;C:\Program Files (x86)\Java\jre1.8.0_341\bin;C:\Program Files\nodejs\node_modules\npm\bin;C:\Program Files\MySQL\MySQL Server 8.0\bin;C:\Users\palla\AppData\Local\Programs\Microsoft VS Code\bin;
+
+Yarn version:
+ 1.22.19
+
+Node version:
+ 16.17.1
+
+Platform:
+ win32 x64
+
+Trace:
+ Error: https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz: ESOCKETTIMEDOUT
+ at ClientRequest.
+ {post.photo && (
+
+ )}
+ {updateMode ? (
+ setTitle(e.target.value)}
+ />
+ ) : (
+
+ {title}
+ {post.username === user?.username && (
+
+ )}
+
+
+
+
+ {title}
+ {post.username === user?.username && (
+
+ setUpdateMode(true)}
+ >
+
+
+ )}
+
+ )}
+
+
+ Author:
+
+ {post.username}
+
+
+
+ {new Date(post.createdAt).toDateString()}
+
+
+ {updateMode ? (
+
+