Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/0memo07/blogged

Blog post sharing page made using React Redux
https://github.com/0memo07/blogged

blog blogged blogging post react react-router reactjs redux redux-middleware redux-query redux-store redux-toolkit sharing

Last synced: about 5 hours ago
JSON representation

Blog post sharing page made using React Redux

Awesome Lists containing this project

README

        

# Blogged

Blogged is a simple web application where you can share your personal blog posts and stories.

## Features

- **User Management:** log in with a username and password obtained from [dummyjson.com/users](https://dummyjson.com/users), and manage their sessions.
- **Post Management:** Users can create, edit, and delete their own blog posts. They can also like posts created by other users.
- **Comments:** Users can comment on blog posts, edit or delete their comments, and view comments on their posts. They can also like comments made by other users.
- **Image Upload:** Users can upload images to their blog posts.
- **Search:** Users can search among blog posts.

## Technologies Used

- **React**: A JavaScript library for building user interfaces.
- **React Router Dom**: Declarative routing for React.
- **Redux Toolkit**: The official, opinionated, batteries-included toolset for efficient Redux development.
- **Axios**: Promise-based HTTP client for the browser and Node.js.
- **Formik**: Form library for React.
- **Styled Components**: CSS-in-JS library for styling React components.
- **Yup**: JavaScript schema builder for value parsing and validation.
- **Mui (Material-UI)**: React components for faster and easier web development.
- **Markdown Air**: A simple and fast markdown parser.
- **React Markdown**: Markdown component for React.
- **React Syntax Highlighter**: Syntax highlighting component for React using `react-syntax-highlighter`.
- **React Highlight**: Component to highlight code using `highlight.js`.
- **React Hot Toast**: A lightweight and customizable toast notification for React.

## Dummy JSON API

The project uses a dummy JSON API for fetching and managing data. This API provides mock data for blog posts, comments, and user authentication. Users can log in with a username and password provided by the dummy JSON API at [https://dummyjson.com/users](https://dummyjson.com/users).

## Usage

1. **Requirements:** Make sure you have Node.js installed to run the project.
2. **Installation:** Navigate to the project directory and run `npm install`.
3. **Run:** Start the project with `npm run dev` command. By default, the application runs at `localhost:5173`.
4. **Browser:** Go to `localhost:5173` in your browser and access Blogged.

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=0MeMo07/Blogged&type=Timeline)](https://star-history.com/#0MeMo07/Blogged&Timeline)