https://github.com/rishibharadwajsai/social-media-app
React Social Media App is a lightweight web application built using React.js, designed to facilitate posting and viewing of user-generated content. Users can create new posts by filling out a form that includes fields for user ID, post title, content, number of views, and tags.
https://github.com/rishibharadwajsai/social-media-app
app application css front-end front-end-development frontend html html-css-javascript javascript react react-hooks react-router reactjs social-media social-media-app
Last synced: 7 months ago
JSON representation
React Social Media App is a lightweight web application built using React.js, designed to facilitate posting and viewing of user-generated content. Users can create new posts by filling out a form that includes fields for user ID, post title, content, number of views, and tags.
- Host: GitHub
- URL: https://github.com/rishibharadwajsai/social-media-app
- Owner: rishibharadwajsai
- License: mit
- Created: 2024-07-05T12:30:50.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-07-21T06:36:25.000Z (about 1 year ago)
- Last Synced: 2024-07-21T07:36:44.504Z (about 1 year ago)
- Topics: app, application, css, front-end, front-end-development, frontend, html, html-css-javascript, javascript, react, react-hooks, react-router, reactjs, social-media, social-media-app
- Language: JavaScript
- Homepage: https://reactsocialmediaapp.vercel.app/
- Size: 188 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# React Social Media App
This is a simple social media app built with React, where users can create posts, view existing posts, and delete posts.
## Components
### `CreatePost`
Component responsible for creating new posts. It includes a form with fields for userId, post title, post content, number of views, and tags. Upon submission, it sends a POST request to `https://dummyjson.com/posts/add` to add the post to the backend.
### `PostListProvider`
Context provider component that manages the state of `postList`, which stores all posts fetched from the backend. It also manages the `fetching` state to indicate when posts are being loaded. The provider uses `useReducer` to handle actions like adding a post, deleting a post, and initializing posts.
### `PostList`
Component that renders a list of posts fetched from the `PostListProvider` context. It displays a loading indicator while posts are being fetched (`fetching` is true) and a welcome message when no posts are available. Each post is rendered using the `Post` component.
### `Post`
Component that renders an individual post with its title, content, tags, and number of views. It includes a delete button (`MdDelete` icon) to delete the post. Uses the `deletePost` function from the `PostList` context to delete posts.
## Usage
To run this application locally:
1. Clone the repository:
```
git clone https://github.com/rishibharadwajsai/social-media-app.git
cd social-media-app
```
2. Install dependencies:
```
npm install
```
3. Start the development server:
```
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173` to view the app.
## Dependencies
- React: Used for building the UI components.
- react-icons (specifically `MdDelete`): Provides icons for delete functionality.
- Bootstrap (assumed from classes like `form-control`, `btn`, etc.): For styling UI components.
## Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or a pull request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.