From 5ab63e7c08f442117f7f4bbefb936ad60ebd01d8 Mon Sep 17 00:00:00 2001 From: Aayushman-nvm Date: Sun, 5 Oct 2025 21:19:35 +0530 Subject: [PATCH 1/7] changes made to contribution.md --- CONTRIBUTING.md | 49 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b823b32..54d312c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -60,7 +60,7 @@ We welcome all types of contributions! Here are some ways you can help: ### 🔧 Frontend Development - **React Components**: Build new UI components or improve existing ones -- **Styling**: Enhance CSS, animations, and responsive design +- **Styling**: Enhanced UI, improved responsiveness using tailwindcss or animations using framer motion - **User Experience**: Improve navigation, accessibility, and usability - **Performance**: Optimize bundle size, loading times, and rendering @@ -220,10 +220,43 @@ function myComponent(props) { } ``` -### CSS Guidelines +### 🎨 **CSS Guidelines** +> ⚠️ We **strictly use TailwindCSS** for all styling — no other external CSS frameworks or raw css (unless asked or needed). +> The goal is to **ship fast**, **keep it consistent**, and **avoid redundancy** in code. +```javascript +--- + +/* ✅ Good Practice */ + +/*Reduce Class Redundancy*/ +/*Use shared Tailwind utility classes or component-level wrappers to avoid repeating the same styles across multiple elements.*/ +const MyComponent = () => { + return ( +
+

{title}

+ +
+ ); +}; + + +/* ❌ Bad */ + +/*Avoid applying the same Tailwind classes repeatedly to multiple child elements.*/ +/*This causes verbosity and makes future style updates harder.*/ + +const MyComponent = () => { + return ( +
+

{title}

+ +
+ ); +}; +``` ```css -/* ✅ Good - Use CSS custom properties and consistent naming */ +/*Avoid using raw css until and unless you don't have other options */ .landing-page { background: linear-gradient(135deg, rgb(28, 28, 64) 0%, rgb(20, 20, 48) 100%); color: rgb(160, 160, 255); @@ -235,16 +268,6 @@ function myComponent(props) { font-weight: 600; margin-bottom: 1rem; } - -/* ❌ Bad - Inconsistent naming and hard-coded colors */ -.page { - background: #1c1c40; - color: #a0a0ff; -} - -.title1 { - font-size: 32px; -} ``` ### Commit Message Format From 097a95bc79ebb60cc2bbf35cc48a8cd801947238 Mon Sep 17 00:00:00 2001 From: Aayushman-nvm Date: Sun, 5 Oct 2025 21:19:50 +0530 Subject: [PATCH 2/7] changes made to readme.md --- README.md | 64 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 9f9e06b..54e516c 100644 --- a/README.md +++ b/README.md @@ -23,14 +23,17 @@ HackerBlog is a developer-centric blogging platform designed for the modern codi ### 🛠 Tech Stack -| Technology | Purpose | Version | -| ---------------- | ----------------------- | ------- | -| **React** | Frontend Framework | 19.1.1+ | -| **Vite** | Build Tool & Dev Server | 7.1.6+ | -| **React Router** | Client-side Routing | 7.9.3+ | -| **React Icons** | Icon Library | 5.5.0+ | -| **Axios** | HTTP Client | 1.12.2+ | -| **ESLint** | Code Linting | 9.35.0+ | +| Technology | Purpose | Version | +| ---------------- | ----------------------- | --------- | +| **React** | Frontend Framework | 19.1.1+ | +| **Vite** | Build Tool & Dev Server | 7.1.6+ | +| **TailwindCSS** | Styling | 4.1.13+ | +| **Framer motion**| Animated UX | 12.23.22+| +| **Vite** | Build Tool & Dev Server | 7.1.6+ | +| **React Router** | Client-side Routing | 7.9.3+ | +| **React Icons** | Icon Library | 5.5.0+ | +| **Axios** | HTTP Client | 1.12.2+ | +| **ESLint** | Code Linting | 9.35.0+ | ## 🚀 Getting Started @@ -106,26 +109,37 @@ docker compose up ``` src/ -├── components/ # Reusable UI components -│ ├── TopBar.jsx # Navigation header -│ └── TopBar.css # TopBar styling -├── pages/ # Page components -│ ├── LandingPage.jsx # Main landing page -│ ├── LandingPage.css # Landing page styles -│ ├── LoginPage.jsx # User authentication -│ ├── RegisterPage.jsx# User registration -│ └── AuthPages.css # Auth pages styling -├── routes/ # Route protection +├── components/ # Reusable UI components +│ ├── TopBar.jsx # Navigation header +│ ├── TopBar.css # TopBar styling +│ ├── Footer.jsx # Footer section +│ ├── animations/ # Animations present on site +│ │ ├── HeroAnimation.jsx # Animation related to hero section +│ │ └── animation.css # custom animation +│ └── ui/ # Animations present on site +│ ├── About.jsx # About ui component +│ ├── Community.jsx # Community ui component +│ ├── Hero.jsx # Hero ui component +│ ├── InfoCard.jsx # InfoCard ui component +│ └── Terminal.jsx # Terminal animation ui component +│ +├── pages/ # Page components +│ ├── LandingPage.jsx # Main landing page +│ ├── AboutPage.jsx # About page +│ ├── LoginPage.jsx # User authentication +│ ├── RegisterPage.jsx # User registration +│ └── AuthPages.css # Auth pages styling +├── routes/ # Route protection │ ├── ProtectedRoute.jsx │ └── PublicRoute.jsx -├── context/ # React Context -│ └── MyContext.jsx # Global state management -├── api/ # API integration -│ ├── api.config.js # Axios configuration +├── context/ # React Context +│ └── MyContext.jsx # Global state management +├── api/ # API integration +│ ├── api.config.js # Axios configuration │ ├── api.intercepter.js -│ └── auth/ # Authentication APIs -├── utils/ # Utility functions -└── assets/ # Static assets +│ └── auth/ # Authentication APIs +├── utils/ # Utility functions +└── assets/ # Static assets ``` ## 🎭 Features Showcase From 4103373f545fed0ccb049a2f8930d0c80ec531a2 Mon Sep 17 00:00:00 2001 From: Aayushman-nvm Date: Mon, 6 Oct 2025 21:08:31 +0530 Subject: [PATCH 3/7] Boilerplate blog card --- src/components/ui/BlogCard.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/components/ui/BlogCard.jsx diff --git a/src/components/ui/BlogCard.jsx b/src/components/ui/BlogCard.jsx new file mode 100644 index 0000000..3b52b9a --- /dev/null +++ b/src/components/ui/BlogCard.jsx @@ -0,0 +1,11 @@ +function BlogCard({ title, likes, abstract, image, likedByUser }) { + return
BlogCard + + {title} + {abstract} + {likes} + {likedByUser &&

heart emoji

} +
; +} + +export default BlogCard; From 1ed3429fb93764231c09a62b5f50e8c1d563880e Mon Sep 17 00:00:00 2001 From: Aayushman-nvm Date: Mon, 6 Oct 2025 21:08:44 +0530 Subject: [PATCH 4/7] Boilerplate dashboard page --- src/pages/DashboardPage.jsx | 75 +++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/pages/DashboardPage.jsx diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx new file mode 100644 index 0000000..d574023 --- /dev/null +++ b/src/pages/DashboardPage.jsx @@ -0,0 +1,75 @@ +import BlogCard from "../components/ui/BlogCard"; + +/*blog mockups... backend db model should look something like this */ +const likedPost = [ + { + title: "Liked Post", + likes: "10", + abstract: "This is a blog demonstrating liked blog mockup", + image: "", + likedByUser: true, + }, +]; +const userPost = [ + { + title: "User Post", + likes: "10", + abstract: "This is a post demonstrating user post mockup", + image: "", + createdByUser: true, + }, +]; + +function handleCreateBlog(){} + +function handleEditBlog(){} + +const PostBar = () => { + return ( +
+ + +
+ ); +}; +function DashboardPage() { + return ( +
+ DashboardPage +
+ +
+

welcome to user dashboard!

+
Your blogs
+ {userPost.length > 0 ? ( + userPost.map((post, index) => ( + + )) + ) : ( +

+ No posts created... create your first post by clickling on the + icon +

+ )} +
Liked blogs
+ {likedPost.length>0 ? + likedPost.map((post, index) => ( + + )):(

Your liked blogs appear here

)} +
+ ); +} + +export default DashboardPage; From bc70f967af46605400465fa4e6d0573c56b103d0 Mon Sep 17 00:00:00 2001 From: Aayushman-nvm Date: Mon, 6 Oct 2025 22:07:53 +0530 Subject: [PATCH 5/7] Styled blog card --- src/components/ui/BlogCard.jsx | 84 ++++++++++++++++++++++++++++++---- 1 file changed, 75 insertions(+), 9 deletions(-) diff --git a/src/components/ui/BlogCard.jsx b/src/components/ui/BlogCard.jsx index 3b52b9a..e769c26 100644 --- a/src/components/ui/BlogCard.jsx +++ b/src/components/ui/BlogCard.jsx @@ -1,11 +1,77 @@ -function BlogCard({ title, likes, abstract, image, likedByUser }) { - return
BlogCard - - {title} - {abstract} - {likes} - {likedByUser &&

heart emoji

} -
; +import { motion } from "framer-motion"; +import { FiHeart, FiEdit2, FiTrash2 } from "react-icons/fi"; +import { TbMoodSadSquint } from "react-icons/tb"; + +function BlogCard({ title, likes, abstract, image, likedByUser, createdByUser, onEdit, onDelete }) { + return ( + +
+ {image ? ( + {title} + ) : ( +
+
+ + No Image +
+
+ )} +
+ + {/* Content Section */} +
+

+ {title} +

+ +

+ {abstract} +

+ +
+ {/*footer of card */} +
+ + + {likes} + +
+ + {/*if post is created by user, give them action buttons */} + {createdByUser && ( +
+ + +
+ )} +
+
+ + ); } -export default BlogCard; +export default BlogCard; \ No newline at end of file From ca6a92ac582a648a47ca67edd12ea922c715e9a0 Mon Sep 17 00:00:00 2001 From: Aayushman-nvm Date: Mon, 6 Oct 2025 22:08:07 +0530 Subject: [PATCH 6/7] Styled dashboard page --- src/pages/DashboardPage.jsx | 299 ++++++++++++++++++++++++++++++------ 1 file changed, 254 insertions(+), 45 deletions(-) diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx index d574023..16bc7c8 100644 --- a/src/pages/DashboardPage.jsx +++ b/src/pages/DashboardPage.jsx @@ -1,8 +1,53 @@ +import { motion } from "framer-motion"; +import { Typewriter } from "react-simple-typewriter"; +import { useRef, useState } from "react"; +import { FiPlus, FiEdit2, FiTerminal, FiFolder, FiHeart } from "react-icons/fi"; import BlogCard from "../components/ui/BlogCard"; /*blog mockups... backend db model should look something like this */ const likedPost = [ { + id: 1, + title: "Liked Post", + likes: "10", + abstract: "This is a blog demonstrating liked blog mockup", + image: "", + likedByUser: true, + }, + { + id: 2, + title: "Liked Post", + likes: "10", + abstract: "This is a blog demonstrating liked blog mockup", + image: "", + likedByUser: true, + }, + { + id: 3, + title: "Liked Post", + likes: "10", + abstract: "This is a blog demonstrating liked blog mockup", + image: "", + likedByUser: true, + }, + { + id: 4, + title: "Liked Post", + likes: "10", + abstract: "This is a blog demonstrating liked blog mockup", + image: "", + likedByUser: true, + }, + { + id: 5, + title: "Liked Post", + likes: "10", + abstract: "This is a blog demonstrating liked blog mockup", + image: "", + likedByUser: true, + }, + { + id: 6, title: "Liked Post", likes: "10", abstract: "This is a blog demonstrating liked blog mockup", @@ -10,8 +55,50 @@ const likedPost = [ likedByUser: true, }, ]; + const userPost = [ { + id: 1, + title: "User Post", + likes: "10", + abstract: "This is a post demonstrating user post mockup", + image: "", + createdByUser: true, + }, + { + id: 2, + title: "User Post", + likes: "10", + abstract: "This is a post demonstrating user post mockup", + image: "", + createdByUser: true, + }, + { + id: 3, + title: "User Post", + likes: "10", + abstract: "This is a post demonstrating user post mockup", + image: "", + createdByUser: true, + }, + { + id: 4, + title: "User Post", + likes: "10", + abstract: "This is a post demonstrating user post mockup", + image: "", + createdByUser: true, + }, + { + id: 5, + title: "User Post", + likes: "10", + abstract: "This is a post demonstrating user post mockup", + image: "", + createdByUser: true, + }, + { + id: 6, title: "User Post", likes: "10", abstract: "This is a post demonstrating user post mockup", @@ -20,56 +107,178 @@ const userPost = [ }, ]; -function handleCreateBlog(){} +function DashboardPage() { + const [userPosts, setUserPosts] = useState(userPost); + const [likedPosts, setLikedPosts] = useState(likedPost); -function handleEditBlog(){} + function handleCreateBlog() { + console.log("Create blog"); + } + + function handleEditBlog(id) { + console.log("Edit blog:", id); + } + + function handleDeleteBlog(id) { + setUserPosts(userPosts.filter(post => post.id !== id)); + } -const PostBar = () => { - return ( -
- - -
- ); -}; -function DashboardPage() { return ( -
- DashboardPage -
- +
+
+ +
+
+
+
+
+
+
+ + user-dashboard +
+
+ + {/* Terminal content */} +
+ {/* Welcome message */} +
+ $ + + cd ~/dashboard + +
+ + + + + + {/* Action Bar */} + + + + +
+ + + {/* user blogs part */} + +
+ +

+ Your Blogs +

+
+ + {userPosts.length > 0 ? ( +
+ {userPosts.map((post) => ( + handleEditBlog(post.id)} + onDelete={() => handleDeleteBlog(post.id)} + /> + ))} +
+ ) : ( + +

+ $ No posts created yet... +
+ + Create your first post by clicking on the + icon + +

+ + )} + + + {/* blogs liked by user part */} + +
+ +

+ Liked Blogs +

+
+ + {likedPosts.length > 0 ? ( +
+ {likedPosts.map((post) => ( + + ))} +
+ ) : ( + +

+ $ Your liked blogs appear here +

+ + )} +
-

welcome to user dashboard!

-
Your blogs
- {userPost.length > 0 ? ( - userPost.map((post, index) => ( - - )) - ) : ( -

- No posts created... create your first post by clickling on the + icon -

- )} -
Liked blogs
- {likedPost.length>0 ? - likedPost.map((post, index) => ( - - )):(

Your liked blogs appear here

)}
); } -export default DashboardPage; +export default DashboardPage; \ No newline at end of file From 316cbbe9024efbcbee8b0b62e906b4517961b50a Mon Sep 17 00:00:00 2001 From: Aayushman-nvm Date: Mon, 6 Oct 2025 22:10:15 +0530 Subject: [PATCH 7/7] routes.jsx --- src/routes.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes.jsx b/src/routes.jsx index 86839e9..f444dd7 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -7,16 +7,17 @@ import ProtectedRoute from "./routes/ProtectedRoute"; import PublicRoute from "./routes/PublicRoute"; import FeaturesPage from "./pages/FeaturesPage"; import AboutPage from "./pages/AboutPage"; +import DashboardPage from "./pages/DashboardPage"; // Placeholder component for dashboard -const DashboardPage = () => ( +/*const DashboardPage = () => (

Dashboard

Welcome to your dashboard! User functionality will be implemented here.

-); +);*/ const routes = createBrowserRouter([ {