Dev Cafe is a React-based blog site designed for tech enthusiasts to explore development-related articles. Users can bookmark interesting blogs for later reading and mark them as read, which automatically removes them from their bookmarks. The platform integrates with a custom blog.json API for seamless content management and updates.
- Dynamic Blog Feed: Browse through a collection of tech-focused blog posts with author details, reading time, and hashtags.
- Bookmark Management: Users can save interesting articles with a single click using the bookmark icon.
- Reading Progress: Track reading progress with a "Mark as read" feature that automatically removes completed articles from bookmarks.
- Real-time Bookmark Counter: Visual counter displays the current number of bookmarked articles.
- Responsive Layout: Fully responsive design with Tailwind CSS ensuring optimal viewing on all devices.
- useState Hook: Implemented for managing bookmark state and reading progress.
- useEffect Hook: Used for fetching blog data from the custom API.
- Props & PropTypes: Strict prop validation for component data handling.
- Component Architecture: Modular design with reusable components (
Blog,Blogs,Bookmark,Bookmarks). - Event Handlers: Custom handlers for bookmark and reading time functionality.
- React.js
- Tailwind CSS
- React Icons
- Prop Types
- Custom JSON API
src/
├── components/
│ ├── Blog.jsx # Individual blog post display
│ ├── Blogs.jsx # Blog posts container
│ ├── Bookmark.jsx # Single bookmark item
│ ├── Bookmarks.jsx # Bookmarks container
│ └── Header.jsx # Site header with profile
└── assets/
└── images/ # Project imagesgit clone https://github.com/MRiDuL-ICE/dev-cafe.gitcd dev-cafe
npm installnpm run devContributions are welcome! Feel free to submit issues and pull requests.