{"id":29148671,"url":"https://github.com/siddami/blogpost-viewer","last_synced_at":"2025-06-30T22:06:27.391Z","repository":{"id":301502833,"uuid":"1009263575","full_name":"Siddami/blogpost-viewer","owner":"Siddami","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-27T07:15:20.000Z","size":61,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-27T07:45:19.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://blogpost-viewer.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Siddami.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-26T21:03:34.000Z","updated_at":"2025-06-27T07:16:46.000Z","dependencies_parsed_at":"2025-06-27T07:45:21.664Z","dependency_job_id":"0151a872-5993-4d2d-b3d3-0655578f521d","html_url":"https://github.com/Siddami/blogpost-viewer","commit_stats":null,"previous_names":["siddami/blogpost-viewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Siddami/blogpost-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fblogpost-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fblogpost-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fblogpost-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fblogpost-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Siddami","download_url":"https://codeload.github.com/Siddami/blogpost-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fblogpost-viewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262857290,"owners_count":23375492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-30T22:06:20.801Z","updated_at":"2025-06-30T22:06:27.315Z","avatar_url":"https://github.com/Siddami.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# THEJSDUDE – Developer Blog\n\nA 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.\n\n---\n\n## Features\n\n### Core Pages\n- **Homepage** with:\n  - LATEST posts section\n  - Filtered JAVASCRIPT posts section\n  - Modular `BlogCard` components with horizontal and grid layouts\n  - Responsive newsletter subscription form\n  - Loader\n\n- **Article Page** with:\n  - Article content (title, image, metadata, tags)\n  - Comment form component\n  - Related posts displayed in a clean horizontal/vertical layout\n  - Static content for now, supports dynamic in the future\n  - Loader\n\n### Design \u0026 UI\n- layout inspired by Figma design\n- Custom typography with Oswald and Font Awesome icons\n- Accessible color contrast and clean UI\n\n### Components\n- `BlogCard` – displays article data in card format\n- `CommentForm` – allows user input and submission\n- `NewsletterForm` – handles email capture with validation\n\n---\n\n## Tech Stack\n\n- **Next.js 13+ App Router**\n- **Tailwind CSS** for utility-first styling\n- **TypeScript** for type safety\n- **Responsive design** with mobile-first layout\n\n---\n\n## Challenges Faced\n\n- **Hydration mismatch issues**: Handled with `isMounted` and later removed for static pages.\n- **Routing confusion**: Using `window.location.href` didn’t refresh the same route – now prepared for dynamic routing using slugs.\n- **Design implementation**: Matching pixel-perfect Figma styles using utility classes.\n- **Layout responsiveness**: Ensured grid and flex utilities adjusted cleanly across screen sizes.\n- **Loader edge cases**: Loader was persisting due to routing and hydration misalignment, resolved by simplifying render conditions.\n\n---\n\n## Future Improvements\n\n- **Dynamic routing** using `[slug].tsx` to load individual articles from content or CMS\n- **Markdown rendering** or MDX support for richer content writing\n- **CMS integration** (e.g., Sanity, Contentful, or Notion API)\n- **Comment system with backend** (Firebase, Supabase, or custom API)\n- **Theme switcher** for dark/light toggle\n- **Search and filter functionality**\n- **Pagination or infinite scroll**\n- **SEO improvements** with dynamic meta tags","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fblogpost-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiddami%2Fblogpost-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fblogpost-viewer/lists"}