farheen_blog_app 0.0.0 → 0.0.2

package/package.json

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

package/src/App.css

@@ -1,184 +1,300 @@
-.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;
-  }
+/* Reset */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.hero {
-  position: relative;
+body {
+  font-family: Inter, sans-serif;
+  background: #f5f7fb;
+}
 
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
+/* Layout */
 
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
+.layout {
+  display: flex;
+  min-height: 100vh;
+}
 
-  .framework,
-  .vite {
-    position: absolute;
-  }
+/* Sidebar */
 
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
+.sidebar {
+  width: 260px;
+  background: #161c2a;
+  color: white;
+  padding: 20px;
+  flex-shrink: 0;
+}
 
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
+.logo {
+  margin-bottom: 40px;
+  font-size: 24px;
+  font-weight: 600;
 }
 
-#center {
+.sidebar nav {
   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;
-  }
+  gap: 10px;
+}
+
+.sidebar a {
+  text-decoration: none;
+  color: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  transition: 0.3s;
+}
+
+.sidebar a:hover,
+.sidebar a.active {
+  background: #1f2937;
 }
 
-#next-steps {
+/* Main Content */
+
+.main-content {
+  flex: 1;
   display: flex;
-  border-top: 1px solid var(--border);
+  flex-direction: column;
+}
+
+/* Navbar */
+
+.navbar {
+  height: 70px;
+  background: #161c2a;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 30px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.navbar input {
+  width: 350px;
+  padding: 10px 15px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  color: white;
+}
+
+.navbar-right button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.navbar-right img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+/* Page Content */
+
+.page-content {
+  flex: 1;
+  padding: 30px;
+}
+
+/* Dashboard */
+
+.dashboard h1 {
+  margin-bottom: 25px;
+  color: #111827;
+}
+
+/* Cards */
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.card {
+  background: white;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+}
+
+.card h4 {
+  color: #6b7280;
+  margin-bottom: 10px;
+  font-weight: 500;
+}
+
+.card h2 {
+  color: #111827;
+  font-size: 32px;
+}
+
+/* Tables */
+
+.table-container {
+  margin-top: 30px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+}
+
+.user-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.user-table th {
+  background: #111827;
+  color: white;
+  padding: 15px;
   text-align: left;
+}
+
+.user-table td {
+  padding: 15px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.user-table tr:hover {
+  background: #f9fafb;
+}
+
+/* Buttons */
+
+.edit-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-right: 10px;
+}
 
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
+.delete-btn {
+  background: #dc2626;
+  color: white;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+/* Mobile */
+
+@media (max-width: 768px) {
+  .layout {
+    flex-direction: column;
   }
 
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
+  .sidebar {
+    width: 100%;
   }
 
-  @media (max-width: 1024px) {
+  .navbar {
     flex-direction: column;
-    text-align: center;
+    gap: 10px;
+    height: auto;
+    padding: 15px;
   }
-}
 
-#docs {
-  border-right: 1px solid var(--border);
+  .navbar input {
+    width: 100%;
+  }
 
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .table-container {
+    overflow-x: auto;
   }
 }
 
-#next-steps ul {
-  list-style: none;
-  padding: 0;
+/* auth css  */
+.auth-container {
+  min-height: 100vh;
+  background: #f5f7fb;
   display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
 
-  .logo {
-    height: 18px;
-  }
+.auth-card {
+  width: 100%;
+  max-width: 450px;
+  background: white;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
+}
 
-  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;
-    }
-  }
+.auth-card h1 {
+  text-align: center;
+  margin-bottom: 10px;
+  color: #111827;
+}
 
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
+.auth-card p {
+  text-align: center;
+  color: #6b7280;
+  margin-bottom: 30px;
+}
 
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
 
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
+.auth-form input {
+  padding: 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+  font-size: 15px;
 }
 
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
+.auth-form input:focus {
+  border-color: #2563eb;
 }
 
-.ticks {
-  position: relative;
-  width: 100%;
+.auth-form button {
+  background: #111827;
+  color: white;
+  border: none;
+  padding: 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: .3s;
+}
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
+.auth-form button:hover {
+  background: #1f2937;
+}
 
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
+.auth-footer {
+  text-align: center;
+  margin-top: 20px;
 }
+
+.auth-footer a {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
+}

package/src/components/Navbar.jsx

@@ -1,25 +1,50 @@
 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>
+
+    //       <div className="flex gap-4">
+    //         <Link to="/">Home</Link>
+
+    //         <Link to="/create">
+    //           Create Post
+    //         </Link>
+
+    //         <Link to="/login">
+    //           Login
+    //         </Link>
+    //       </div>
+    //     </div>
+    //   );
+
+    return (
+        <header className="navbar">
+            <h1 className="text-2xl font-bold">
+                
+            </h1>
+
+            <div className="navbar-right">
+                <input
+                    type="text"
+                    placeholder="Search..."
+                />
+                <button>
+                    🔔
+                </button>
+
+                <img
+                    src="https://i.pravatar.cc/40"
+                    alt="profile"
+                />
+
+            </div>
+
+        </header>
+    );
 };
 
 export default Navbar;

package/src/components/admin/AdminSidebar.jsx

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

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,24 @@
+
+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 />
+
+        <div className="page-content">
+          <Outlet />
+        </div>
+
+      </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/Login.jsx

@@ -1,25 +1,93 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { login } from "../services/authService";
+
 const Login = () => {
-  return (
-    <div className="max-w-md mx-auto mt-10">
-      <form className="flex flex-col gap-4">
-        <input
-          type="email"
-          placeholder="Email"
-          className="border p-3 rounded"
-        />
-
-        <input
-          type="password"
-          placeholder="Password"
-          className="border p-3 rounded"
-        />
-
-        <button className="bg-black text-white p-3 rounded">
-          Login
-        </button>
-      </form>
-    </div>
-  );
+    const navigate = useNavigate();
+
+    const [formData, setFormData] = useState({
+        email: "",
+        password: ""
+    })
+
+    const [loading, setloading] = useState(false);
+
+    const handleChange = (e) => {
+        setFormData({
+            ...formData,
+            [e.target.name]: e.target.value
+        })
+    }
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+
+        try {
+            setloading(true);
+
+            const payload = {
+                email: formData.email,
+                password: formData.password
+            };
+
+            const response = await login(payload);
+            console.log(response)
+            const { token, user } = response;
+
+            localStorage.setItem("token", token);
+            localStorage.setItem("user", JSON.stringify(user));
+
+            navigate("/admin");
+        } catch (error) {
+            alert(
+                error.response?.data?.message ||
+                "Login failed"
+            );
+        } finally {
+            setloading(false);
+        }
+    }
+
+    return (
+        <div className="auth-container">
+
+            <div className="auth-card">
+
+                <h1>Welcome Back 👋</h1>
+                <p>Login to your account</p>
+
+                <form onSubmit={handleSubmit} className="auth-form">
+
+                    <input
+                        type="email"
+                        name="email"
+                        value={formData.email}
+                        placeholder="Enter your email"
+                        onChange={handleChange}
+                    />
+
+                    <input
+                        type="password"
+                        name="password"
+                        value={formData.password}
+                        placeholder="Enter your password"
+                        onChange={handleChange}
+                    />
+
+                    <button disabled={loading} type="submit">
+                        {loading ? "Logging in..." : "Login"}
+                    </button>
+                </form>
+
+                <div className="auth-footer">
+                    Don't have an account?
+                    <Link to="/register"> Register</Link>
+                </div>
+
+            </div>
+
+        </div>
+    );
 };
 
 export default Login;

package/src/pages/Register.jsx

@@ -0,0 +1,116 @@
+import { Link, useNavigate } from "react-router-dom";
+
+const Register = () => {
+    const navigate = useNavigate();
+
+    const [formData, setFormData] = useState({
+        name: "",
+        email: "",
+        password: "",
+        confirmPassword: ""
+    });
+
+    const [loading, setLoading] = useState(false);
+
+    const handleChange = (e) => {
+        setFormData({
+            ...formData,
+            [e.target.name]: e.target.value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        if (formData.password !== formData.confirmPassword) {
+            return alert("Passwords do not match");
+        }
+
+        try {
+            setLoading(true);
+
+            const payload = {
+                name: formData.name,
+                email: formData.email,
+                password: formData.password
+            };
+
+            const response = await registerUser(payload);
+
+            alert(response.data.message);
+            navigate("/login");
+
+        } catch (error) {
+
+            alert(
+                error.response?.data?.message ||
+                "Registration failed"
+            );
+
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="auth-container">
+
+            <div className="auth-card">
+
+                <h1>Create Account 🚀</h1>
+                <p>Join Blogify today</p>
+
+                <form onSubmit={handleSubmit} className="auth-form">
+
+                    <input
+                        type="text"
+                        name="name"
+                        placeholder="Full Name"
+                        onChange={handleChange}
+                    />
+
+                    <input
+                        type="email"
+                        name="email"
+                        placeholder="Email Address"
+                        onChange={handleChange}
+                    />
+
+                    <input
+                        type="text"
+                        name="companyName"
+                        placeholder="Company Name"
+                        onChange={handleChange}
+                    />
+
+                    <input
+                        type="text"
+                        name="companyEmail"
+                        placeholder="Company Email"
+                        onChange={handleChange}
+                    />
+
+                    <input
+                        type="password"
+                        name="password"
+                        placeholder="Password"
+                        onChange={handleChange}
+                    />
+
+                    <button disabled={loading}>
+                        {loading ? "Registering..." : "Register"}
+                    </button>
+                </form>
+
+                <div className="auth-footer">
+                    Already have an account?
+                    <Link to="/login"> Login</Link>
+                </div>
+
+            </div>
+
+        </div>
+    );
+};
+
+export default Register;

package/src/pages/admin/AdminDashboard.jsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import api from "../../services/api";
+import AdminSidebar from "../../components/admin/AdminSidebar";
+
+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">
+            <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,64 @@
 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";
+import AdminLayout from "../layout/AdminLayout";
+import Register from "../pages/Register";
 
 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="/register"
+                    element={<Register />}
+                />
+
+                <Route
+                    path="/login"
+                    element={<Login />}
+                />
+
+                <Route
+                    path="/create"
+                    element={<CreatePost />}
+                />
+
+                <Route path="/admin" element={<AdminLayout />}>
+                    <Route index element={<AdminDashboard />} />
+                    <Route
+                        path="users"
+                        element={<ManageUsers />}
+                    />
+                    <Route
+                        path="blogs"
+                        element={<ManageBlogs />}
+                    />
+                    {/* <Route
+                        path="settings"
+                        element={<Settings />}
+                    /> */}
+                </Route>
+            
+            </Routes>
+        </BrowserRouter>
+    );
 };
 
 export default AppRoutes;

package/src/services/api.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const api = axios.create({
-  baseURL: "http://localhost:5000/api",
+  baseURL: "http://localhost:3000/api",
 });
 
 api.interceptors.request.use((config) => {

package/src/services/authService

@@ -0,0 +1,15 @@
+import api from "./api";
+
+export const register = async (formData) => {
+  const response = await api.post("/platformUser/register");
+  return response.data;
+};
+
+export const login = async (data) => {
+  const response = await api.post(
+    "/platformUser/login",
+    data
+  );
+
+  return response.data;
+};