farheen_blog_app 1.0.6 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "farheen_blog_app",
   "private": false,
-  "version": "1.0.6",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.100.14",
     "axios": "^1.16.1",
+    "lucide-react": "^1.18.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.76.1",

package/src/App.css

@@ -1,300 +1,12 @@
-/* Reset */
+/* App.css - Cleaned up to use Tailwind CSS exclusively */
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+/* Animations for new components */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(15px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-body {
-  font-family: Inter, sans-serif;
-  background: #f5f7fb;
-}
-
-/* Layout */
-
-.layout {
-  display: flex;
-  min-height: 100vh;
-}
-
-/* Sidebar */
-
-.sidebar {
-  width: 260px;
-  background: #161c2a;
-  color: white;
-  padding: 20px;
-  flex-shrink: 0;
-}
-
-.logo {
-  margin-bottom: 40px;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.sidebar nav {
-  display: flex;
-  flex-direction: column;
-  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;
-}
-
-/* Main Content */
-
-.main-content {
-  flex: 1;
-  display: flex;
-  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;
-}
-
-.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;
-  }
-
-  .sidebar {
-    width: 100%;
-  }
-
-  .navbar {
-    flex-direction: column;
-    gap: 10px;
-    height: auto;
-    padding: 15px;
-  }
-
-  .navbar input {
-    width: 100%;
-  }
-
-  .cards {
-    grid-template-columns: 1fr;
-  }
-
-  .table-container {
-    overflow-x: auto;
-  }
-}
-
-/* auth css  */
-.auth-container {
-  min-height: 100vh;
-  background: #f5f7fb;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-}
-
-.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);
-}
-
-.auth-card h1 {
-  text-align: center;
-  margin-bottom: 10px;
-  color: #111827;
-}
-
-.auth-card p {
-  text-align: center;
-  color: #6b7280;
-  margin-bottom: 30px;
-}
-
-.auth-form {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.auth-form input {
-  padding: 14px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  outline: none;
-  font-size: 15px;
-}
-
-.auth-form input:focus {
-  border-color: #2563eb;
-}
-
-.auth-form button {
-  background: #111827;
-  color: white;
-  border: none;
-  padding: 14px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: .3s;
-}
-
-.auth-form button:hover {
-  background: #1f2937;
-}
-
-.auth-footer {
-  text-align: center;
-  margin-top: 20px;
-}
-
-.auth-footer a {
-  color: #2563eb;
-  text-decoration: none;
-  font-weight: 600;
+.animate-fade-in-up {
+  opacity: 0;
+  animation: fadeInUp 0.5s ease forwards;
 }

package/src/App.jsx

@@ -1,12 +1,13 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from './assets/vite.svg'
-import heroImg from './assets/hero.png'
 import './App.css'
 import AppRoutes from './routes/AppRoutes'
+import { UserProvider } from './context/UserContext'
 
 function App() {
-  return <AppRoutes />
+  return (
+    <UserProvider>
+      <AppRoutes />
+    </UserProvider>
+  )
 }
 
 export default App

package/src/components/CommentTable.jsx

@@ -1,27 +1,37 @@
 const CommentTable = ({ comments }) => {
     if (!comments || comments.length === 0) {
-        return <p>No comments yet.</p>;
+        return (
+            <div className="text-center py-12 px-4 rounded-2xl border border-dashed border-gray-300 bg-gray-50">
+                <div className="text-4xl mb-3 opacity-30">💬</div>
+                <h3 className="text-lg font-medium text-gray-900">No comments yet</h3>
+                <p className="text-gray-500 mt-1">Be the first to share your thoughts!</p>
+            </div>
+        );
     }
 
     return (
-        <table className="w-full text-left border-collapse border border-gray-200">
-            <thead className="bg-gray-100">
-                <tr>
-                    <th className="p-3 border-b">User</th>
-                    <th className="p-3 border-b">Comment</th>
-                    <th className="p-3 border-b">Date</th>
-                </tr>
-            </thead>
-            <tbody>
-                {comments.map((comment) => (
-                    <tr key={comment._id} className="border-b hover:bg-gray-50">
-                        <td className="p-3">{comment.user?.name || "Anonymous"}</td>
-                        <td className="p-3">{comment.text}</td>
-                        <td className="p-3">{new Date(comment.createdAt).toLocaleDateString()}</td>
-                    </tr>
-                ))}
-            </tbody>
-        </table>
+        <div className="space-y-6">
+            {comments.map((comment, index) => (
+                <div key={comment._id || index} className="flex gap-4 animate-fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
+                    <div className="flex-shrink-0">
+                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-100 to-indigo-100 border border-indigo-200 flex items-center justify-center text-indigo-700 font-bold text-lg shadow-sm">
+                            {(comment.user?.name || "A").charAt(0).toUpperCase()}
+                        </div>
+                    </div>
+                    <div className="flex-1 bg-gray-50 rounded-2xl rounded-tl-none p-5 shadow-sm border border-gray-100">
+                        <div className="flex items-center justify-between mb-2">
+                            <h4 className="font-semibold text-gray-900">{comment.user?.name || "Anonymous"}</h4>
+                            <span className="text-xs font-medium text-gray-500 bg-white px-2 py-1 rounded-full shadow-sm border border-gray-100">
+                                {comment.createdAt ? new Date(comment.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Just now'}
+                            </span>
+                        </div>
+                        <p className="text-gray-700 leading-relaxed text-sm">
+                            {comment.text}
+                        </p>
+                    </div>
+                </div>
+            ))}
+        </div>
     );
 };
 

package/src/components/Navbar.jsx

@@ -1,48 +1,35 @@
 import { Link } from "react-router-dom";
+import { Search, Bell } from "lucide-react";
 
 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">
-            <h1 className="text-2xl font-bold">
-                
+        <header className="bg-white h-20 border-b border-slate-200 flex justify-between items-center px-8 shadow-[0_2px_10px_rgba(0,0,0,0.02)] z-10 sticky top-0 flex-shrink-0">
+            <h1 className="text-xl font-semibold text-slate-800">
+                {/* Optional page title could go here */}
             </h1>
 
-            <div className="navbar-right">
-                <input
-                    type="text"
-                    placeholder="Search..."
-                />
-                <button>
-                    🔔
+            <div className="flex items-center gap-6">
+                <div className="relative hidden md:block">
+                    <input
+                        type="text"
+                        placeholder="Search anything..."
+                        className="bg-slate-50 border border-slate-200 text-sm rounded-full pl-11 pr-4 py-2.5 w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all"
+                    />
+                    <Search className="absolute left-4 top-2.5 text-slate-400" size={18} />
+                </div>
+                <button className="relative text-slate-500 hover:text-indigo-600 transition-colors p-2 rounded-full hover:bg-indigo-50">
+                    <Bell size={20} />
+                    <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
                 </button>
 
-                <img
-                    src="https://i.pravatar.cc/40"
-                    alt="profile"
-                />
-
+                <div className="flex items-center gap-3 pl-4 border-l border-slate-200 cursor-pointer group">
+                    <img
+                        src="https://ui-avatars.com/api/?name=Admin+User&background=6366f1&color=fff"
+                        alt="profile"
+                        className="w-10 h-10 rounded-full border-2 border-indigo-100 group-hover:border-indigo-300 transition-all shadow-sm"
+                    />
+                </div>
             </div>
-
         </header>
     );
 };

package/src/components/Postcard.jsx

@@ -1,22 +1,48 @@
+import { Link } from "react-router-dom";
+
 const PostCard = ({ post }) => {
   return (
-    <div className="border rounded-xl p-4 shadow">
-      {post.image && (
-        <img
-          src={post.image}
-          alt={post.title}
-          className="w-full h-52 object-cover rounded"
-        />
-      )}
+    <Link to={`/post/${post._id}`} className="group block h-full">
+      <div className="flex flex-col h-full bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+        <div className="relative overflow-hidden h-56 bg-gray-100">
+          {post.image_url || post.image ? (
+            <img
+              src={`http://localhost:3000${post.image_url || post.image}`}
+              alt={post.title || "Blog post"}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+              onError={(e) => { e.target.onerror = null; e.target.src = "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&q=80"; }}
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-4xl opacity-20">
+              📝
+            </div>
+          )}
+          <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-semibold text-indigo-700 shadow-sm">
+            Blog
+          </div>
+        </div>
+
+        <div className="p-6 flex flex-col flex-grow">
+          <h2 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-indigo-600 transition-colors line-clamp-2">
+            {post.title || "Untitled Post"}
+          </h2>
 
-      <h2 className="text-2xl font-bold mt-3">
-        {post.title}
-      </h2>
+          <p className="text-gray-600 mb-6 line-clamp-3 text-sm flex-grow">
+            {post.content ? post.content.substring(0, 120) + "..." : "No preview available for this post."}
+          </p>
 
-      <p className="text-gray-600 mt-2">
-        {post.content.slice(0, 100)}...
-      </p>
-    </div>
+          <div className="flex items-center justify-between pt-4 border-t border-gray-100 mt-auto">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold">
+                {(post.User?.name || "A").charAt(0).toUpperCase()}
+              </div>
+              <span className="text-sm font-medium text-gray-700">{post.User?.name || "Author"}</span>
+            </div>
+            <span className="text-xs text-gray-500 font-medium">Read more →</span>
+          </div>
+        </div>
+      </div>
+    </Link>
   );
 };
 

package/src/components/admin/AdminSidebar.jsx

@@ -1,63 +1,81 @@
-import { NavLink } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { hasAnyPermission } from "../../utils/checkPermission";
+import { LayoutDashboard, Users, FileText, PenTool, Settings, User, LogOut } from "lucide-react";
+import { useUser } from "../../context/UserContext";
 
 const AdminSidebar = () => {
+  const { logout, user } = useUser();
+  const navigate = useNavigate();
+
+  const handleLogout = (e) => {
+    e.preventDefault();
+    logout();
+    navigate("/");
+  };
 
   const menuItems = [
-    {
-      path: "/admin",
-      title: "Dashboard",
-    },
-    {
-      path: "/admin/users",
-      title: "Manage Users",
-      module: "USERS",
-      actions: ["READ", "UPDATE", "DELETE"]
-    },
-    {
-      path: "/admin/users/create",
-      title: "Create User",
-      module: "USERS",
-      actions: ["CREATE"]
-    },
-    {
-      path: "/admin/blogs",
-      title: "Manage Blogs",
-      module: "POSTS",
-      actions: ["READ", "UPDATE", "DELETE"]
-    },
-    {
-      path: "/admin/create",
-      title: "Create Post",
-      module: "POSTS",
-      actions: ["CREATE"]
-    },
-    {
-      path: "/admin/settings",
-      title: "Settings",
-    }
+    { path: "/admin", title: "Dashboard", icon: <LayoutDashboard size={20} /> },
+    { path: "/admin/users", title: "Manage Users", module: "USERS", actions: ["READ", "UPDATE", "DELETE"], icon: <Users size={20} /> },
+    { path: "/admin/blogs", title: "Manage Blogs", module: "POSTS", actions: ["READ", "UPDATE", "DELETE"], icon: <FileText size={20} /> },
+    { path: "/admin/create", title: "Create Post", module: "POSTS", actions: ["CREATE"], icon: <PenTool size={20} /> },
+    { path: "/admin/settings", title: "Settings", icon: <Settings size={20} /> }
   ];
 
   return (
-    <aside className="sidebar">
-      <h2 className="logo">Blogify</h2>
-      <nav>
+    <aside className="w-64 bg-[#0f172a] text-slate-300 flex-shrink-0 flex flex-col min-h-screen border-r border-slate-800 z-20">
+      <div className="h-20 flex items-center gap-3 px-6 border-b border-slate-800/50">
+        <div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center font-bold text-white shadow-lg">B</div>
+        <h2 className="text-xl font-bold tracking-tight text-white">Blogify</h2>
+      </div>
+
+      <nav className="flex-1 py-6 px-4 flex flex-col gap-1.5 overflow-y-auto">
+        <div className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 px-3">Menu</div>
         {menuItems.map((item, index) => {
           let hasAccess = true;
-
           if (item.module && item.actions) {
             hasAccess = hasAnyPermission(item.module, item.actions);
           }
-
           if (!hasAccess) return null;
 
           return (
-            <NavLink key={index} to={item.path} end>
+            <NavLink
+              key={index}
+              to={item.path}
+              end
+              className={({ isActive }) => `
+                flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 font-medium text-sm
+                ${isActive
+                  ? 'bg-indigo-600/10 text-indigo-400'
+                  : 'hover:bg-slate-800/50 hover:text-slate-100'
+                }
+              `}
+            >
+              {item.icon}
               {item.title}
             </NavLink>
           );
         })}
       </nav>
+
+      <div className="p-4 border-t border-slate-800/50 flex flex-col gap-3">
+        <div className="bg-slate-800/50 p-3 rounded-xl flex items-center gap-3 border border-slate-700/50">
+          <div className="w-9 h-9 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400">
+            <User size={18} />
+          </div>
+          <div className="flex-1 overflow-hidden">
+            <p className="text-sm font-semibold text-white truncate">{user?.name || 'Admin User'}</p>
+            <p className="text-xs text-slate-400 truncate">{user?.role || 'Administrator'}</p>
+          </div>
+        </div>
+
+        <button
+          onClick={handleLogout}
+          className="flex items-center justify-center gap-2 w-full px-4 py-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-400 hover:text-red-300 rounded-lg text-sm font-medium transition-colors border border-red-500/20"
+        >
+          <LogOut size={16} />
+          Logout
+        </button>
+      </div>
     </aside>
   );
 };