Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karamanburak/bloggy
📰 Bloggy app is a web page made with react. While previously written blogs can be viewed, favorite blogs can be added and removed. After logging in, the user can update their profile or create blogs that are not public.
https://github.com/karamanburak/bloggy
axios-instance formik-yup mui react-redux redux-persist toastify
Last synced: 2 days ago
JSON representation
📰 Bloggy app is a web page made with react. While previously written blogs can be viewed, favorite blogs can be added and removed. After logging in, the user can update their profile or create blogs that are not public.
- Host: GitHub
- URL: https://github.com/karamanburak/bloggy
- Owner: karamanburak
- License: mit
- Created: 2024-04-29T14:36:20.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-08-05T11:47:36.000Z (4 months ago)
- Last Synced: 2024-08-05T13:38:05.331Z (4 months ago)
- Topics: axios-instance, formik-yup, mui, react-redux, redux-persist, toastify
- Language: JavaScript
- Homepage: https://bloggiie.vercel.app/
- Size: 93.8 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bloggy App
- [Bloggy App Live](https://bloggiie.vercel.app/)
- [Bloggy Api Live](https://bloggy-api-xa7p.onrender.com/)
## Description
📰 Bloggy app is a web page made with react. While previously written blogs can be viewed, favorite blogs can be added and removed. After logging in, the user can update their profile or create blogs that are not public.
## Features
- **User Authentication**: Users can sign up and log in to access the site.
- **Create Blog Posts**: Users can write new blog posts, save them as drafts, or publish them publicly.
- **Edit Profile**: Users can update their profile information.
- **Interact with Blogs**: Users can like/unlike blog posts and leave comments.
- **Drafts**: Users can save blog posts as drafts and view them on their private page.
## Tech Stack
- **Frontend**: React, Redux, Mui
- **Backend**: Node.js, Express
- **Authentication**: Token
## Installation
1. Clone the repository:
```
git clone https://github.com/karamanburak/bloggy-app.git
cd bloggy-app
```
2. Install dependencies:
```
pnpm install
```
3. Set up environment variables:
Create a .env file in the root directory and add the following:
```
VITE_BASE_URL =
VITE_WEATHER_apiKey =
```
4. Run the development server:
```
pnpm dev
```
# Usage
### Register and Login
1. Navigate to the registration page to create a new account.
2. After registering, log in with your new account credentials.
### Creating a Blog Post
1. After logging in, navigate to the "Blogs" page.
2. Write your blog post in the provided editor.
3. Choose to save the post as a draft or publish it publicly.
### Managing Blog Posts
- Drafts: View and edit your drafts from your profile page.
- Public Posts: Edit or delete your public posts.
### Interacting with Other Users
- Like/Unlike: Click the like button on a blog post to like or unlike it.
- Comments: Leave comments on blog posts to engage with other users.
## Project Skeleton
```
- Bloggy App (folder)
|
|
SOLUTION
├── public
├── src
| ├── app
| │ └── store.jsx
| ├── assets
| │ └── [images]
| ├── components
| │ ├── auth
| │ │ ├── Information.jsx
| │ │ ├── LoginForm.jsx
| │ │ └── RegisterForm.jsx
| │ ├── blog
| │ │ ├── BlogCard.jsx
| │ │ ├── BlogModal.jsx
| │ │ ├── CommentForm.jsx
| │ │ ├── DeleteBlog.jsx
| │ │ ├── EditBlog.jsx
| │ │ ├── Editor.jsx
| │ │ ├── NewBlog.jsx
| │ │ ├── SocialShare.jsx
| │ │ ├── TinyMCE.jsx
| │ │ └── TrendBlog.jsx
| │ ├── global
| │ │ ├── AuthImage.jsx
| │ │ └── Navbar.jsx
| │ ├── home
| │ │ ├── CustomSwiper.jsx
| │ │ ├── Footer.jsx
| │ │ ├── HomeCard.jsx
| │ │ ├── NewsCard.jsx
| │ │ ├── PageHeader.jsx
| │ │ ├── Quotes.jsx
| │ │ ├── ShowsCard.jsx
| │ │ └── WeatherCard.jsx
| │ ├── profile
| │ │ ├── MyBlogsCard.jsx
| │ │ ├── MyBlogsContainer.jsx
| │ │ └── UpdateProfileModal.jsx
| ├── features
| │ │ ├── autSlice.jsx
| │ │ ├── blogSlice.jsx
| │ │ ├── categorySlice.jsx
| │ │ └── newsShowsSlice.jsx
| ├── helper
| │ │ └── ToastNotify.js
| ├── hooks
| │ │ ├── useAuthCall.jsx
| │ │ ├── useAxios.jsx
| │ │ ├── useBlogCall.jsx
| │ │ ├── useCategoryCall.jsx
| │ │ └── useNewsShowsCall.jsx
| ├── pages
| │ ├── About.jsx
| │ ├── Blogs.jsx
| │ ├── Dashboard.jsx
| │ ├── Detail.jsx
| │ ├── Login.jsx
| │ ├── NotFound.jsx
| │ ├── Profile.jsx
| │ └── Register.jsx
| ├── router
| | ├── AppRouter.jsx
| | └── PrivateRouter.jsx
| ├── styles
| | ├── globalStyles.js
| | └── theme.js
| ├── App.jsx
| ├── main.jsx
| ├── .gitignore
| ├── frontend.env
| ├── index.css
| ├── index.html
| ├── LICENSE
| ├── package.json
| ├── pnpm-lock.yaml
| ├── README.md
| ├── vercel.json
└── vite.config.js
```
## Outcome
## Postman Documentation
[View Postman Documentation](https://documenter.getpostman.com/view/32987022/2sA3s9BnRX#677d706d-bc2c-401f-9808-d56288077f3a)