Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rishika105/blogs-context-react

A blog-context webpage that contains blogs of Codehelp. It contains various navigations build on a react-tailwind starter pack.
https://github.com/rishika105/blogs-context-react

react-router-dom reactjs tailwind

Last synced: 6 days ago
JSON representation

A blog-context webpage that contains blogs of Codehelp. It contains various navigations build on a react-tailwind starter pack.

Awesome Lists containing this project

README

        

# CodeHelp Blogs - React Project

This project is a simple blog application built using React, styled with Tailwind CSS, and features navigation with React Router and state management using the Context API.

## Features

- **React Router** for handling navigation between different pages.
- **Context API** for managing global state across components.
- **Tailwind CSS** for styling the components in a clean and responsive way.
- Fetch and display blogs based on categories.
- List all blog posts with details like title, author, and tags.
-
## Tech Stack

- **React**: JavaScript library for building user interfaces.
- **Tailwind CSS**: Utility-first CSS framework for quickly styling the application.
- **React Router**: Declarative routing for React apps.
- **Context API**: To handle state management across the application.

## Installation

1. Clone the repository:

```bash
git clone https://github.com/rishika105/blogs-context-react.git
cd blogs-context-react
```

2. Install the dependencies:

```bash
npm install
```

3. Run the project:

```bash
npm start
```

The project should now be running at `http://localhost:3000/`.

## Usage

1. **Navigate** to different blog categories.
2. **View Blog Posts**: Displays blogs tagged under specific categories like `#Project-Management`, `#Software-Development`, etc.
3. **Routing**: Use the back button to navigate between pages.

## Screenshots
![image](https://github.com/user-attachments/assets/7feea177-4249-44fd-9a8e-993ebd127d5b)

![image](https://github.com/user-attachments/assets/26ec1a05-9944-4072-994d-262ad3c5ae33)