Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/furkan-dogu/blog-app
This project I created with React contains the web version of the blog application. Users can view blog posts, create new posts, edit, delete, comment and like existing posts through this application after registering or logging in.
https://github.com/furkan-dogu/blog-app
axios formik material-ui react react-toastify redux redux-persist redux-toolkit yup
Last synced: about 6 hours ago
JSON representation
This project I created with React contains the web version of the blog application. Users can view blog posts, create new posts, edit, delete, comment and like existing posts through this application after registering or logging in.
- Host: GitHub
- URL: https://github.com/furkan-dogu/blog-app
- Owner: furkan-dogu
- Created: 2024-01-19T10:35:38.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-07-14T16:01:19.000Z (4 months ago)
- Last Synced: 2024-07-14T17:44:54.176Z (4 months ago)
- Topics: axios, formik, material-ui, react, react-toastify, redux, redux-persist, redux-toolkit, yup
- Language: JavaScript
- Homepage: https://blog-app-fd.vercel.app/
- Size: 12.5 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog App
## About the Project
This project I created with React contains the web version of the blog application. Users can view blog posts, create new posts, edit, delete, comment and like existing posts through this application after registering or logging in.
- Email: [email protected]
- Password: aA?123456
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Usage](#usage)
- [Project Skeleton](#project-skeleton)
- [Screenshots](#screenshots)
## Live Demo
[Blog App](https://blog-app-fd.vercel.app/)
## Features
- Entry and registration procedures
- Pagination for smooth transitions between pages.
- Blog sections that you can add, delete and update yourself
## Technologies Used
- React
- Redux
- Redux-Toolkit
- Axios for API requests
- React-Router-Dom
- Styling with [Material UI](https://mui.com/)
- [React-Toastify](https://fkhadra.github.io/react-toastify/introduction/) for alert
- [Redux-Persist](https://www.npmjs.com/package/redux-persist) for status data retention.
- [Formik](https://formik.org/) for form management
- [Yup](https://www.npmjs.com/package/yup) for form validation processes
## Usage
- Create your registration from the Register section or log in from the login section
- Create your own blog
- Viewing blog posts, creating new posts, editing, deleting, commenting and liking existing posts.
## Project Skeleton
```
Blog App (folder)
|
|----readme.md
SOLUTION
├── public
│ └── index.html
├── src
│ ├── app
│ │ └── store.jsx
│ ├── assets
│ │ └── images
│ ├── components
│ │ ├── auth
│ │ | ├── LoginForm.jsx
│ │ | └── RegisterForm.jsx
│ │ ├── blog
│ │ | ├── BlogCategories.jsx
│ │ | ├── BlogCategoriesCards.jsx
│ │ | ├── Card.jsx
│ │ | ├── CommentCard.jsx
│ │ | ├── CommentForm.jsx
│ │ | ├── DeleteModal.jsx
│ │ | ├── MostVisited.jsx
│ │ | ├── MostVisitedCards.jsx
│ │ | ├── MyBlogCard.jsx
│ │ | ├── Pagination.jsx
│ │ | └── UpdateModal.jsx
│ │ ├── Footer.jsx
│ │ └── Navbar.jsx
│ ├── features
│ │ ├── authSlice.jsx
│ │ └── blogSlice.jsx
│ ├── helpers
│ │ ├── aboutLinks.js
│ │ ├── navbarLinks.js
│ │ ├── ToastNotify.js
│ │ └── updateModalStyle.js
│ ├── hooks
│ │ ├── useAuthCalls.jsx
│ │ ├── useAxios.jsx
│ │ └── useBlogCalls.jsx
│ ├── pages
│ │ ├── About.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Detail.jsx
│ │ ├── Login.jsx
│ │ ├── MyBlog.jsx
│ │ ├── NewBlog.jsx
│ │ ├── NotFound.jsx
│ │ ├── Profile.jsx
│ │ └── Register.jsx
│ ├── router
│ │ ├── AppRouter.jsx
│ │ └── PrivateRouter.jsx
│ ├── App.js
│ └── index.js
├── package.json
└── yarn.lock
```
## Screenshots
## Compatibility
The project is compatible with both wide-screen computers and mobile devices.