diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 75fffc2..403f7a2 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,6 +220,9 @@ function myComponent(props) { } ``` +<<<<<<< HEAD +### 🎨 **CSS Guidelines** +======= ### CSS & Styling Guidelines **We use Tailwind CSS for styling in this project!** 🎨 @@ -256,9 +259,43 @@ const BadComponent = () => { ``` #### Custom CSS (when needed) +>>>>>>> upstream/main +> ⚠️ 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); @@ -270,16 +307,6 @@ const BadComponent = () => { font-weight: 600; margin-bottom: 1rem; } - -/* ❌ Bad - Inconsistent naming and hard-coded colors */ -.page { - background: #1c1c40; - color: #a0a0ff; -} - -.title1 { - font-size: 32px; -} ``` #### Styling Guidelines Summary diff --git a/README.md b/README.md index 6cb521b..c35c6b2 100644 --- a/README.md +++ b/README.md @@ -106,26 +106,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 diff --git a/src/components/ui/BlogCard.jsx b/src/components/ui/BlogCard.jsx new file mode 100644 index 0000000..e769c26 --- /dev/null +++ b/src/components/ui/BlogCard.jsx @@ -0,0 +1,77 @@ +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; \ No newline at end of file diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx new file mode 100644 index 0000000..16bc7c8 --- /dev/null +++ b/src/pages/DashboardPage.jsx @@ -0,0 +1,284 @@ +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", + image: "", + 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", + image: "", + createdByUser: true, + }, +]; + +function DashboardPage() { + const [userPosts, setUserPosts] = useState(userPost); + const [likedPosts, setLikedPosts] = useState(likedPost); + + function handleCreateBlog() { + console.log("Create blog"); + } + + function handleEditBlog(id) { + console.log("Edit blog:", id); + } + + function handleDeleteBlog(id) { + setUserPosts(userPosts.filter(post => post.id !== id)); + } + + return ( +
+
+ +
+
+
+
+
+
+
+ + 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 +

+ + )} + +
+
+ ); +} + +export default DashboardPage; \ No newline at end of file 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([ {