Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/furkan-dogu/blog-app-with-nextjs
This project I created with Nextjs 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-with-nextjs
axios formik material-ui mui-icons mui-joy nextjs react react-redux react-toastify redux-persist redux-toolkit yup
Last synced: about 5 hours ago
JSON representation
This project I created with Nextjs 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-with-nextjs
- Owner: furkan-dogu
- Created: 2024-07-08T15:51:16.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-14T17:55:45.000Z (4 months ago)
- Last Synced: 2024-07-15T12:52:18.206Z (4 months ago)
- Topics: axios, formik, material-ui, mui-icons, mui-joy, nextjs, react, react-redux, react-toastify, redux-persist, redux-toolkit, yup
- Language: JavaScript
- Homepage: https://blog-app-with-nextjs-fd.vercel.app
- Size: 25.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog App with Nextjs
## About the Project
This project I created with Nextjs 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 with Nextjs](https://blog-app-with-nextjs-fd.vercel.app/)
## Backend
- [Live](https://blog-app-api-iota.vercel.app)
- [Codes](https://github.com/furkan-dogu/BlogApp-API)
## Features
- Entry and registration procedures
- Pagination for smooth transitions between pages.
- Blog sections that you can add, delete and update yourself
- View and update user information
## Technologies Used
- React
- Nextjs
- Redux
- Redux-Toolkit
- Axios for API requests
- 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.
- View and update the user information you registered with the site
## Project Skeleton
```
Blog App with Nextjs (folder)
│
├── app
│ ├── (private)
│ │ ├── detail
│ │ │ └── [detailId]
│ │ │ ├── components
│ │ │ │ ├── CommentBox.jsx
│ │ │ │ └── CommentCards.jsx
│ │ │ └── page.jsx
│ │ ├── my-blogs
│ │ │ ├── components
│ │ │ │ ├── DeleteModal.jsx
│ │ │ │ ├── MyBlogsCards.jsx
│ │ │ │ └── UpdateModal.jsx
│ │ │ └── page.jsx
│ │ ├── new-blog
│ │ │ └── page.jsx
│ │ ├── profile
│ │ │ ├── edit
│ │ │ │ └── page.jsx
│ │ │ └── page.jsx
│ │ └── layout.jsx
│ ├── (public)
│ │ ├── about
│ │ │ └── page.jsx
│ │ ├── login
│ │ │ ├── components
│ │ │ │ └── LoginForm.jsx
│ │ │ └── page.jsx
│ │ └── register
│ │ ├── components
│ │ │ └── RegisterForm.jsx
│ │ └── page.jsx
│ ├── layout.js
│ ├── loading.jsx
│ ├── not-found.jsx
│ └── page.js
├── assets
│ └── [images]
├── components
│ ├── Cards.jsx
│ ├── Footer.jsx
│ ├── MostVisited.jsx
│ ├── Navbar.jsx
│ └── Pagination.jsx
├── helpers
│ ├── navbarLinks.js
│ └── ToastNotify.jsx
├── hooks
│ ├── useAuthCalls.jsx
│ ├── useAxios.jsx
│ └── useBlogCalls.jsx
├── public
│ └── [images]
├── redux
│ ├── features
│ │ ├── authSlice.jsx
│ │ └── blogSlice.jsx
│ ├── provider.jsx
│ └── store.jsx
├── .gitignore
├── jsconfig.json
├── next.config.mjs
├── package-lock.json
├── package.json
└── README.md
```
## Screenshots
## Compatibility
The project is compatible with both wide-screen computers and mobile devices.