https://github.com/siddami/blogpost-viewer

https://github.com/siddami/blogpost-viewer

Last synced: 12 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/siddami/blogpost-viewer
• Owner: Siddami
• Created: 2025-06-26T21:03:34.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-06-27T07:15:20.000Z (12 months ago)
• Last Synced: 2025-06-27T07:45:19.305Z (12 months ago)
• Language: TypeScript
• Homepage: https://blogpost-viewer.vercel.app
• Size: 59.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# THEJSDUDE – Developer Blog

A modern, visually appealing blog built with **Next.js** and **Tailwind CSS**, designed for developers and tech enthusiasts. It features a curated feed of blog posts, detailed article pages, comment functionality, and a modular component structure for scalability and readability.

---

## Features

### Core Pages

- **Homepage** with:

  - LATEST posts section

  - Filtered JAVASCRIPT posts section

  - Modular `BlogCard` components with horizontal and grid layouts

  - Responsive newsletter subscription form

  - Loader

- **Article Page** with:

  - Article content (title, image, metadata, tags)

  - Comment form component

  - Related posts displayed in a clean horizontal/vertical layout

  - Static content for now, supports dynamic in the future

  - Loader

### Design & UI

- layout inspired by Figma design

- Custom typography with Oswald and Font Awesome icons

- Accessible color contrast and clean UI

### Components

- `BlogCard` – displays article data in card format

- `CommentForm` – allows user input and submission

- `NewsletterForm` – handles email capture with validation

---

## Tech Stack

- **Next.js 13+ App Router**

- **Tailwind CSS** for utility-first styling

- **TypeScript** for type safety

- **Responsive design** with mobile-first layout

---

## Challenges Faced

- **Hydration mismatch issues**: Handled with `isMounted` and later removed for static pages.

- **Routing confusion**: Using `window.location.href` didn’t refresh the same route – now prepared for dynamic routing using slugs.

- **Design implementation**: Matching pixel-perfect Figma styles using utility classes.

- **Layout responsiveness**: Ensured grid and flex utilities adjusted cleanly across screen sizes.

- **Loader edge cases**: Loader was persisting due to routing and hydration misalignment, resolved by simplifying render conditions.

---

## Future Improvements

- **Dynamic routing** using `[slug].tsx` to load individual articles from content or CMS

- **Markdown rendering** or MDX support for richer content writing

- **CMS integration** (e.g., Sanity, Contentful, or Notion API)

- **Comment system with backend** (Firebase, Supabase, or custom API)

- **Theme switcher** for dark/light toggle

- **Search and filter functionality**

- **Pagination or infinite scroll**

- **SEO improvements** with dynamic meta tags