farheen_blog_app 0.0.0 → 0.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "farheen_blog_app",
   "private": false,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.css

@@ -1,184 +1,234 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
+*{
+  margin:0;
+  padding:0;
+  box-sizing:border-box;
+}
+
+body{
+  font-family:Inter,sans-serif;
+  background:#f5f7fb;
+}
+
+.layout{
+  display:flex;
+  min-height:100vh;
+}
+
+/* Sidebar */
+
+.sidebar{
+  width:260px;
+  background:#111827;
+  color:white;
+  padding:20px;
+}
+
+.logo{
+  margin-bottom:40px;
+}
+
+.sidebar nav{
+  display:flex;
+  flex-direction:column;
+  gap:10px;
+}
+
+.sidebar a{
+  text-decoration:none;
+  color:white;
+  padding:12px;
+  border-radius:8px;
+}
+
+.sidebar a:hover{
+  background:#1f2937;
+}
+
+/* Main Content */
+
+.main-content{
+  flex:1;
+}
+
+/* Navbar */
+
+.navbar{
+  background:white;
+  padding:15px 30px;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  box-shadow:0 2px 5px rgba(0,0,0,.05);
+}
+
+.navbar input{
+  width:350px;
+  padding:10px;
+  border:1px solid #ddd;
+  border-radius:8px;
+}
+
+.navbar-right{
+  display:flex;
+  align-items:center;
+  gap:15px;
+}
+
+.navbar-right img{
+  width:40px;
+  height:40px;
+  border-radius:50%;
+}
+
+/* Dashboard */
+
+.dashboard{
+  padding:30px;
+}
+
+.cards{
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
+  gap:20px;
+}
+
+.card{
+  background:white;
+  padding:25px;
+  border-radius:12px;
+  box-shadow:0 2px 8px rgba(0,0,0,.05);
+}
+
+.card h4{
+  color:#6b7280;
+  margin-bottom:10px;
+}
+
+.card h2{
+  color:#111827;
+}
+
+.dashboard-container{
+    display:flex;
+    min-height:100vh;
+}
+
+/* Sidebar */
+
+.sidebar{
+    width:250px;
+    background:#1f2937;
+    color:white;
+    padding:20px;
+}
+
+.sidebar h2{
+    margin-bottom:30px;
+}
+
+.sidebar ul{
+    list-style:none;
+}
+
+.sidebar ul li{
+    padding:12px;
+    cursor:pointer;
+    border-radius:6px;
+    margin-bottom:10px;
+    transition:0.3s;
+}
+
+.sidebar ul li:hover{
+    background:#374151;
+}
+
+/* Main Content */
+
+.dashboard-content{
+    flex:1;
+    padding:30px;
+    background:#f5f7fa;
+}
+
+.dashboard-content h1{
+    margin-bottom:25px;
+}
+
+/* Cards */
+
+.cards{
+    display:grid;
+    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
+    gap:20px;
+}
+
+.card{
+    background:white;
+    padding:25px;
+    border-radius:10px;
+    box-shadow:0 2px 10px rgba(0,0,0,0.1);
+}
+
+.card h3{
+    color:#555;
+    margin-bottom:10px;
+}
+
+.card p{
+    font-size:28px;
+    font-weight:bold;
+}
+
+.user-table{
+    width:100%;
+    border-collapse:collapse;
+    margin-top:20px;
+    background:white;
+}
+
+/* user table  */
+.user-table th,
+.user-table td{
+    border:1px solid #ddd;
+    padding:12px;
+    text-align:left;
+}
+
+.user-table th{
+    background:#1f2937;
+    color:white;
+}
+
+.delete-btn{
+    background:red;
+    color:white;
+    border:none;
+    padding:8px 15px;
+    border-radius:5px;
+    cursor:pointer;
+}
+
+.delete-btn:hover{
+    opacity:0.8;
+}
+
+/* mobile responsive  */
+@media(max-width:768px){
+
+    .dashboard-container{
+        flex-direction:column;
     }
-  }
 
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
+    .sidebar{
+        width:100%;
+    }
 
-    li {
-      flex: 1 1 calc(50% - 8px);
+    .cards{
+        grid-template-columns:1fr;
     }
 
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
+    .user-table{
+        display:block;
+        overflow-x:auto;
     }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}
+}

package/src/components/Navbar.jsx

@@ -1,24 +1,48 @@
 import { Link } from "react-router-dom";
 
 const Navbar = () => {
+//   return (
+//     <div className="bg-black text-white px-6 py-4 flex justify-between">
+//       <h1 className="text-2xl font-bold">
+//         Blog App
+//       </h1>
+
+//       <div className="flex gap-4">
+//         <Link to="/">Home</Link>
+
+//         <Link to="/create">
+//           Create Post
+//         </Link>
+
+//         <Link to="/login">
+//           Login
+//         </Link>
+//       </div>
+//     </div>
+//   );
+
   return (
-    <div className="bg-black text-white px-6 py-4 flex justify-between">
-      <h1 className="text-2xl font-bold">
-        Blog App
-      </h1>
+    <header className="navbar">
 
-      <div className="flex gap-4">
-        <Link to="/">Home</Link>
+      <input
+        type="text"
+        placeholder="Search..."
+      />
 
-        <Link to="/create">
-          Create Post
-        </Link>
+      <div className="navbar-right">
+
+        <button>
+          🔔
+        </button>
+
+        <img
+          src="https://i.pravatar.cc/40"
+          alt="profile"
+        />
 
-        <Link to="/login">
-          Login
-        </Link>
       </div>
-    </div>
+
+    </header>
   );
 };
 

package/src/components/admin/AdminSidebar.jsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router-dom";
+
+const AdminSidebar = () => {
+  return (
+    <aside className="sidebar">
+
+      <h2 className="logo">Blogify</h2>
+
+      <nav>
+
+        <Link to="/admin/dashboard">
+          Dashboard
+        </Link>
+
+        <Link to="/admin/blogs">
+          Blogs
+        </Link>
+
+        <Link to="/admin/users">
+          Users
+        </Link>
+
+        <Link to="/admin/categories">
+          Categories
+        </Link>
+
+        <Link to="/admin/settings">
+          Settings
+        </Link>
+
+      </nav>
+
+    </aside>
+  );
+};
+
+export default Sidebar;

package/src/components/admin/UserTable.jsx

@@ -0,0 +1,29 @@
+const UserTable = () => {
+    return (
+        <table className="user-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Email</th>
+                    <th>Role</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                <tr>
+                    <td>Farheen</td>
+                    <td>farheen@gmail.com</td>
+                    <td>User</td>
+                    <td>
+                        <button className="delete-btn">
+                            Delete
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    )
+}
+
+export default UserTable;

package/src/layout/AdminLayout.jsx

@@ -0,0 +1,21 @@
+
+import { Outlet } from "react-router-dom";
+import AdminSidebar from "../components/admin/AdminSidebar";
+import Navbar from "../components/Navbar";
+
+const AdminLayout = () => {
+  return (
+    <div className="layout">
+
+      <AdminSidebar />
+
+      <div className="main-content">
+        <Navbar />
+        <Outlet />
+      </div>
+
+    </div>
+  );
+};
+
+export default AdminLayout;

package/src/middleware/ProtectedRoute.jsx

@@ -0,0 +1,13 @@
+import {
+    Navigate
+} from "react-router-dom";
+
+export const ProtectedRoutes = ({ children }) => {
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+        return <Navigate to="/login" />
+    }
+
+    return children;
+}

package/src/pages/admin/AdminDashboard.jsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from "react";
+import api from "../../services/api";
+
+const AdminDashboard = () => {
+
+    const [data, setData] = useState({});
+
+    const getDashboard = async () => {
+        try {
+
+            const res = await api.get("/admin/dashboard");
+
+            setData(res.data);
+
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
+    useEffect(() => {
+        getDashboard();
+    }, []);
+
+    return (
+        <div className="dashboard-container">
+
+            <aside className="sidebar">
+                <h2>Admin Panel</h2>
+
+                <ul>
+                    <li>Dashboard</li>
+                    <li>Users</li>
+                    <li>Blogs</li>
+                    <li>Settings</li>
+                </ul>
+            </aside>
+
+            <main className="dashboard-content">
+
+                <h1>Dashboard</h1>
+
+                <div className="cards">
+
+                    <div className="card">
+                        <h3>Total Users</h3>
+                        <p>150</p>
+                    </div>
+
+                    <div className="card">
+                        <h3>Total Blogs</h3>
+                        <p>450</p>
+                    </div>
+
+                    <div className="card">
+                        <h3>Published Blogs</h3>
+                        <p>400</p>
+                    </div>
+
+                    <div className="card">
+                        <h3>Draft Blogs</h3>
+                        <p>50</p>
+                    </div>
+
+                </div>
+
+            </main>
+
+        </div>
+    );
+};
+
+export default AdminDashboard;

package/src/pages/admin/ManageBlogs.jsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import api from "../../services/api";
+
+const ManageBlogs = () => {
+
+  const [blogs,setBlogs] = useState([]);
+
+  const getBlogs = async () => {
+    try{
+
+      const res = await api.get("/admin/blogs");
+
+      setBlogs(res.data);
+
+    }catch(error){
+      console.log(error);
+    }
+  };
+
+  useEffect(()=>{
+    getBlogs();
+  },[]);
+
+  return (
+    <div>
+
+      <h1>Manage Blogs</h1>
+
+      {
+        blogs.map((blog)=>(
+          <div key={blog._id}>
+
+            <h3>{blog.title}</h3>
+
+            <p>
+              {blog.createdBy?.name}
+            </p>
+
+          </div>
+        ))
+      }
+
+    </div>
+  );
+};
+
+export default ManageBlogs;

package/src/pages/admin/ManageUsers.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import api from "../../services/api";
+
+const ManageUsers = () => {
+
+  const [users,setUsers] = useState([]);
+
+  const getUsers = async () => {
+    try{
+
+      const res = await api.get("/admin/users");
+
+      setUsers(res.data);
+
+    }catch(error){
+      console.log(error);
+    }
+  };
+
+  useEffect(()=>{
+    getUsers();
+  },[]);
+
+  return (
+    <div>
+
+      <h1>Manage Users</h1>
+
+      {
+        users.map((user)=>(
+          <div key={user._id}>
+
+            <h3>{user.name}</h3>
+            <p>{user.email}</p>
+
+          </div>
+        ))
+      }
+
+    </div>
+  );
+};
+
+export default ManageUsers;

package/src/routes/AppRoutes.jsx

@@ -1,40 +1,65 @@
 import {
-  BrowserRouter,
-  Routes,
-  Route,
+    BrowserRouter,
+    Routes,
+    Route,
 } from "react-router-dom";
 
 import Navbar from "../components/Navbar";
-
 import Home from "../pages/Home";
-
 import Login from "../pages/Login";
-
 import CreatePost from "../pages/CreatePost";
+import ManageUsers from "../pages/admin/ManageUsers";
+import ManageBlogs from "../pages/admin/ManageBlogs";
+import AdminDashboard from "../pages/admin/AdminDashboard";
 
 const AppRoutes = () => {
-  return (
-    <BrowserRouter>
-      <Navbar />
-
-      <Routes>
-        <Route
-          path="/"
-          element={<Home />}
-        />
-
-        <Route
-          path="/login"
-          element={<Login />}
-        />
-
-        <Route
-          path="/create"
-          element={<CreatePost />}
-        />
-      </Routes>
-    </BrowserRouter>
-  );
+    return (
+        <BrowserRouter>
+            <Navbar />
+
+            <Routes>
+                <Route
+                    path="/"
+                    element={<Home />}
+                />
+
+                <Route
+                    path="/login"
+                    element={<Login />}
+                />
+
+                <Route
+                    path="/create"
+                    element={<CreatePost />}
+                />
+
+                <Route
+                    path="/admin"
+                    element={
+
+                        <AdminDashboard />
+
+                    }
+                />
+
+                <Route
+                    path="/admin/users"
+                    element={
+                        <ManageUsers />
+                    }
+                />
+
+                <Route
+                    path="/admin/blogs"
+                    element={
+                        <ManageBlogs />
+                    }
+                />
+            </Routes>
+
+
+        </BrowserRouter>
+    );
 };
 
 export default AppRoutes;