farheen_blog_app 0.0.1 → 0.0.3

package/package.json

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

package/src/App.css

@@ -1,234 +1,300 @@
-*{
-  margin:0;
-  padding:0;
-  box-sizing:border-box;
+/* Reset */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-body{
-  font-family:Inter,sans-serif;
-  background:#f5f7fb;
+body {
+  font-family: Inter, sans-serif;
+  background: #f5f7fb;
 }
 
-.layout{
-  display:flex;
-  min-height:100vh;
+/* Layout */
+
+.layout {
+  display: flex;
+  min-height: 100vh;
 }
 
 /* Sidebar */
 
-.sidebar{
-  width:260px;
-  background:#111827;
-  color:white;
-  padding:20px;
+.sidebar {
+  width: 260px;
+  background: #161c2a;
+  color: white;
+  padding: 20px;
+  flex-shrink: 0;
 }
 
-.logo{
-  margin-bottom:40px;
+.logo {
+  margin-bottom: 40px;
+  font-size: 24px;
+  font-weight: 600;
 }
 
-.sidebar nav{
-  display:flex;
-  flex-direction:column;
-  gap:10px;
+.sidebar nav {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.sidebar a{
-  text-decoration:none;
-  color:white;
-  padding:12px;
-  border-radius:8px;
+.sidebar a {
+  text-decoration: none;
+  color: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  transition: 0.3s;
 }
 
-.sidebar a:hover{
-  background:#1f2937;
+.sidebar a:hover,
+.sidebar a.active {
+  background: #1f2937;
 }
 
 /* Main Content */
 
-.main-content{
-  flex:1;
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 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 {
+  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;
-  border:1px solid #ddd;
-  border-radius:8px;
+.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;
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  color: white;
 }
 
-.navbar-right img{
-  width:40px;
-  height:40px;
-  border-radius:50%;
+.navbar-right button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 18px;
 }
 
-/* Dashboard */
+.navbar-right img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+/* Page Content */
 
-.dashboard{
-  padding:30px;
+.page-content {
+  flex: 1;
+  padding: 30px;
 }
 
-.cards{
-  display:grid;
-  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
-  gap:20px;
+/* Dashboard */
+
+.dashboard h1 {
+  margin-bottom: 25px;
+  color: #111827;
 }
 
-.card{
-  background:white;
-  padding:25px;
-  border-radius:12px;
-  box-shadow:0 2px 8px rgba(0,0,0,.05);
+/* Cards */
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
 }
 
-.card h4{
-  color:#6b7280;
-  margin-bottom:10px;
+.card {
+  background: white;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
 }
 
-.card h2{
-  color:#111827;
+.card h4 {
+  color: #6b7280;
+  margin-bottom: 10px;
+  font-weight: 500;
 }
 
-.dashboard-container{
-    display:flex;
-    min-height:100vh;
+.card h2 {
+  color: #111827;
+  font-size: 32px;
 }
 
-/* Sidebar */
+/* Tables */
 
-.sidebar{
-    width:250px;
-    background:#1f2937;
-    color:white;
-    padding:20px;
+.table-container {
+  margin-top: 30px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
 }
 
-.sidebar h2{
-    margin-bottom:30px;
+.user-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.sidebar ul{
-    list-style:none;
+.user-table th {
+  background: #111827;
+  color: white;
+  padding: 15px;
+  text-align: left;
 }
 
-.sidebar ul li{
-    padding:12px;
-    cursor:pointer;
-    border-radius:6px;
-    margin-bottom:10px;
-    transition:0.3s;
+.user-table td {
+  padding: 15px;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-.sidebar ul li:hover{
-    background:#374151;
+.user-table tr:hover {
+  background: #f9fafb;
 }
 
-/* Main Content */
+/* Buttons */
 
-.dashboard-content{
-    flex:1;
-    padding:30px;
-    background:#f5f7fa;
+.edit-btn {
+  background: #2563eb;
+  color: white;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-right: 10px;
 }
 
-.dashboard-content h1{
-    margin-bottom:25px;
+.delete-btn {
+  background: #dc2626;
+  color: white;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
 }
 
-/* Cards */
+/* Mobile */
 
-.cards{
-    display:grid;
-    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
-    gap:20px;
-}
+@media (max-width: 768px) {
+  .layout {
+    flex-direction: column;
+  }
 
-.card{
-    background:white;
-    padding:25px;
-    border-radius:10px;
-    box-shadow:0 2px 10px rgba(0,0,0,0.1);
-}
+  .sidebar {
+    width: 100%;
+  }
+
+  .navbar {
+    flex-direction: column;
+    gap: 10px;
+    height: auto;
+    padding: 15px;
+  }
+
+  .navbar input {
+    width: 100%;
+  }
 
-.card h3{
-    color:#555;
-    margin-bottom:10px;
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .table-container {
+    overflow-x: auto;
+  }
 }
 
-.card p{
-    font-size:28px;
-    font-weight:bold;
+/* auth css  */
+.auth-container {
+  min-height: 100vh;
+  background: #f5f7fb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
 }
 
-.user-table{
-    width:100%;
-    border-collapse:collapse;
-    margin-top:20px;
-    background:white;
+.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);
 }
 
-/* user table  */
-.user-table th,
-.user-table td{
-    border:1px solid #ddd;
-    padding:12px;
-    text-align:left;
+.auth-card h1 {
+  text-align: center;
+  margin-bottom: 10px;
+  color: #111827;
 }
 
-.user-table th{
-    background:#1f2937;
-    color:white;
+.auth-card p {
+  text-align: center;
+  color: #6b7280;
+  margin-bottom: 30px;
 }
 
-.delete-btn{
-    background:red;
-    color:white;
-    border:none;
-    padding:8px 15px;
-    border-radius:5px;
-    cursor:pointer;
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
 }
 
-.delete-btn:hover{
-    opacity:0.8;
+.auth-form input {
+  padding: 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+  font-size: 15px;
 }
 
-/* mobile responsive  */
-@media(max-width:768px){
+.auth-form input:focus {
+  border-color: #2563eb;
+}
 
-    .dashboard-container{
-        flex-direction:column;
-    }
+.auth-form button {
+  background: #111827;
+  color: white;
+  border: none;
+  padding: 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: .3s;
+}
 
-    .sidebar{
-        width:100%;
-    }
+.auth-form button:hover {
+  background: #1f2937;
+}
 
-    .cards{
-        grid-template-columns:1fr;
-    }
+.auth-footer {
+  text-align: center;
+  margin-top: 20px;
+}
 
-    .user-table{
-        display:block;
-        overflow-x:auto;
-    }
+.auth-footer a {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
 }

package/src/components/Navbar.jsx

@@ -1,49 +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 (
-    <header className="navbar">
-
-      <input
-        type="text"
-        placeholder="Search..."
-      />
-
-      <div className="navbar-right">
-
-        <button>
-          🔔
-        </button>
-
-        <img
-          src="https://i.pravatar.cc/40"
-          alt="profile"
-        />
-
-      </div>
-
-    </header>
-  );
+    //   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

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

package/src/layout/AdminLayout.jsx

@@ -4,14 +4,17 @@ import AdminSidebar from "../components/admin/AdminSidebar";
 import Navbar from "../components/Navbar";
 
 const AdminLayout = () => {
-  return (
+ return (
     <div className="layout">
-
       <AdminSidebar />
 
       <div className="main-content">
         <Navbar />
-        <Outlet />
+
+        <div className="page-content">
+          <Outlet />
+        </div>
+
       </div>
 
     </div>

package/src/pages/CreatePost.jsx

@@ -1,79 +1,125 @@
 import { useState } from "react";
-
 import { createPost } from "../services/postService";
 
 const CreatePost = () => {
-  const [title, setTitle] = useState("");
-
-  const [content, setContent] =
-    useState("");
-
-  const [image, setImage] =
-    useState(null);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    const formData = new FormData();
-
-    formData.append("title", title);
-
-    formData.append("content", content);
-
-    if (image) {
-      formData.append("image", image);
-    }
-
-    try {
-      await createPost(formData);
-
-      alert("Post Created");
-
-      setTitle("");
-      setContent("");
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  return (
-    <div className="max-w-xl mx-auto mt-10">
-      <form
-        onSubmit={handleSubmit}
-        className="flex flex-col gap-4"
-      >
-        <input
-          type="text"
-          placeholder="Title"
-          className="border p-3 rounded"
-          value={title}
-          onChange={(e) =>
-            setTitle(e.target.value)
-          }
-        />
-
-        <textarea
-          placeholder="Content"
-          className="border p-3 rounded h-40"
-          value={content}
-          onChange={(e) =>
-            setContent(e.target.value)
-          }
-        />
-
-        <input
-          type="file"
-          onChange={(e) =>
-            setImage(e.target.files[0])
-          }
-        />
-
-        <button className="bg-black text-white p-3 rounded">
-          Create Post
-        </button>
-      </form>
-    </div>
-  );
+    const [formData, setFormData] = useState({
+        title: "",
+        content: "",
+        image: null
+    });
+
+    const [loading, setLoading] =
+        useState(false);
+
+    const handleChange = (e) => {
+        const { name, value, files } =
+            e.target;
+
+        setFormData({
+            ...formData,
+            [name]: files ? files[0] : value
+        });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            setLoading(true);
+
+            const data = new FormData();
+
+            data.append(
+                "title",
+                formData.title
+            );
+
+            data.append(
+                "content",
+                formData.content
+            );
+
+            if (formData.image) {
+                data.append(
+                    "image",
+                    formData.image
+                );
+            }
+
+            await createPost(data);
+
+            alert("Post Created");
+
+            setFormData({
+                title: "",
+                content: "",
+                image: null
+            });
+
+        } catch (error) {
+
+            console.log(error);
+
+            alert(
+                error.response?.data?.message ||
+                "Something went wrong"
+            );
+
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="max-w-xl mx-auto mt-10">
+
+            <form
+                onSubmit={handleSubmit}
+                className="flex flex-col gap-4"
+            >
+
+                <input
+                    type="text"
+                    name="title"
+                    placeholder="Enter Title"
+                    className="border p-3 rounded"
+                    value={formData.title}
+                    onChange={handleChange}
+                    required
+                />
+
+                <textarea
+                    name="content"
+                    placeholder="Enter Content"
+                    className="border p-3 rounded h-40"
+                    value={formData.content}
+                    onChange={handleChange}
+                    required
+                />
+
+                <input
+                    type="file"
+                    name="image"
+                    accept="image/*"
+                    onChange={handleChange}
+                />
+
+                <button
+                    type="submit"
+                    disabled={loading}
+                    className="bg-black text-white p-3 rounded"
+                >
+                    {
+                        loading
+                            ? "Creating..."
+                            : "Create Post"
+                    }
+                </button>
+
+            </form>
+
+        </div>
+    );
 };
 
 export default CreatePost;

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import api from "../../services/api";
+import AdminSidebar from "../../components/admin/AdminSidebar";
 
 const AdminDashboard = () => {
 
@@ -23,20 +24,7 @@ const AdminDashboard = () => {
 
     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">

package/src/routes/AppRoutes.jsx

@@ -11,11 +11,13 @@ 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 />
+            {/* <Navbar /> */}
 
             <Routes>
                 <Route
@@ -23,6 +25,11 @@ const AppRoutes = () => {
                     element={<Home />}
                 />
 
+                 <Route
+                    path="/register"
+                    element={<Register />}
+                />
+
                 <Route
                     path="/login"
                     element={<Login />}
@@ -33,31 +40,23 @@ const AppRoutes = () => {
                     element={<CreatePost />}
                 />
 
-                <Route
-                    path="/admin"
-                    element={
-
-                        <AdminDashboard />
-
-                    }
-                />
-
-                <Route
-                    path="/admin/users"
-                    element={
-                        <ManageUsers />
-                    }
-                />
-
-                <Route
-                    path="/admin/blogs"
-                    element={
-                        <ManageBlogs />
-                    }
-                />
+                <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>
     );
 };

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;
+};