TechBLog

Overview

Blog Front-End is a technology-focused blogging platform that delivers insightful articles on web development topics such as JavaScript, React, and Node.js. Users can browse trending and latest posts, like and bookmark articles, and filter content by categories.

---

Screenshot

---

Technologies Used

• Frontend: Next.js, React, Tailwind CSS
• State Management: Zustand
• Database: MongoDB (via Mongoose)
• Authentication & Backend: Firebase
• Other Libraries: Axios, Framer Motion, React Icons, React Markdown

---

Core Features

✔️ Browse and read technology blogs
✔️ User authentication (login/logout)
✔️ Like and bookmark blogs
✔️ Remove bookmarks when needed
✔️ Search blogs and filter by category
✔️ View trending and latest posts

---

Dependencies

{
  "@radix-ui/react-dialog": "^1.1.1",
  "@radix-ui/react-icons": "^1.3.0",
  "@radix-ui/react-label": "^2.1.0",
  "@radix-ui/react-slot": "^1.1.0",
  "@tailwindcss/typography": "^0.5.15",
  "axios": "^1.7.9",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.1.1",
  "embla-carousel-react": "^8.2.1",
  "firebase": "^11.1.0",
  "framer-motion": "^11.5.4",
  "lucide-react": "^0.439.0",
  "mongoose": "^8.6.1",
  "next": "14.2.9",
  "react": "^18",
  "react-dom": "^18",
  "react-hot-toast": "^2.5.1",
  "react-icons": "^5.3.0",
  "react-markdown": "^9.0.1",
  "react-syntax-highlighter": "^15.5.0",
  "reading-time": "^1.5.0",
  "remark-gfm": "^4.0.0",
  "tailwind-merge": "^2.5.2",
  "tailwindcss-animate": "^1.0.7",
  "zustand": "^5.0.3"
}

---

Getting Started (Run Locally)

1️⃣ Clone the Repository

git clone https://github.com/tapader13/blog-frontend.git
cd blog-frontend

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Environment Variables

Create a .env file in the root directory and add the following:

MONGO_URI="your_mongodb_connection_string"

4️⃣ Start the Development Server

npm run dev

5️⃣ Open in Browser

Visit http://localhost:3000 to see the app in action.

---

Live Demo & Resources

🚀 Live Project: Deployed Link Here(#)

---

👨‍💻 Contributions are welcome! Feel free to submit issues or pull requests.
📩 Have questions? Contact me at minhajtapader0@gmail.com.

---

⭐ Like this project? Give it a star on GitHub!