Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/rishika105/blogs-context-react
- Owner: rishika105
- Created: 2024-05-13T05:05:58.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-09-09T17:57:04.000Z (about 2 months ago)
- Last Synced: 2024-09-09T22:01:02.223Z (about 2 months ago)
- Topics: react-router-dom, reactjs, tailwind
- Language: JavaScript
- Homepage: https://blogs-context-codehelp-react.netlify.app/
- Size: 649 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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.
## Installation1. 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)