Tech-Blogs

Table of Contents

• Overview
• Features
• Preview
• Technologies
• Usage
• Navigation

Overview

"Tech-Blogs" is a web application that provides a platform for reading and exploring technical blogs.It offers a collection of blogs organized by categories and tags. Users can easily navigate between blogs and discover related content. It is made to concretely understand the concept of routing, dynamic url based rendering, useSearchParams(), useLocation() hooks.

Features

• Blog Listing:

  • Displays a list of blogs, each with a heading, category, a short paragraph, and tags.

• Category Filtering:

  • Click on a category to view blogs from the same category.

• Tag Filtering:

  • Click on a tag to view blogs that share the same tag.

• Pagination:

  • Navigate between blog pages using the "Previous" and "Next" buttons in the navigation bar.

Preview

View Live Demo

Technologies

This project is built using the following technologies:

• React: React is used as the foundation for building the user interface and managing the application's state.

• React Router DOM: React Router DOM is utilized to implement navigation between different pages, such as the homepage and individual blog posts.

• Tailwind CSS: Tailwind CSS is used for styling the user interface, ensuring a modern and responsive design that is both visually appealing and functional.

Usage

1. Blog Listing:

   • Browse through the list of blogs, each displaying a heading, category, short paragraph, and tags.

2. Category Filtering:

   • Click on a category link to view blogs from the same category.

3. Tag Filtering:

   • Click on a tag link to view blogs that share the same tag.

4. Pagination:

   • Use the "Previous" and "Next" buttons in the navigation bar to navigate between blog pages.

Navigation

• Category Page:

  • Click on a category link to view other blogs from the same category.
  • Use the "Back" button to return to the previous page.

• Tag Page:

  • Click on a tag link to view other blogs with the same tag.
  • Use the "Back" button to return to the previous page.

• Blog Page:

  • Click on a blog heading to view the full blog post.