- React, Redux TK and persist, JS, Tailwind, Material-UI, Formik, Yup.
Blog App (folder)
|
|---readme.md
├── dist
│ ├── assets
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── store
│ │ ├── store.jsx
│ │
│ ├── features
│ │ ├── authSlice.jsx
│ │ └── postSlice.jsx
│ ├ └── notificationSlice.jsx
│ ├── hooks
│ │ ├── useAuthCall.jsx
│ │ └── usePostCall.jsx
│ ├── components
│ │ ├── Comments.jsx
│ │ ├── DeleteModal.jsx
│ │ ├── Footer.jsx
│ │ ├── Navbar.jsx
│ │ ├── CommentForm.jsx
│ │ ├── Notification.jsx
│ │ ├── PostCard.jsx
│ │ └── PostModal.jsx
│ │
│ ├── pages
│ │ ├── About.jsx
│ │ ├── Home.jsx
│ │ ├── Login.jsx
│ │ ├── Register.jsx
│ │ ├── MyPosts.jsx
│ │ ├── NewPost.jsx
│ │ ├── PostDetail.jsx
│ │ └── Profile.jsx
│ ├── routers
│ │ ├── AppRouter.jsx
│ │ └── PrivateRouter.jsx
│ ├── App.jsx
│ ├── Main.jsx
│
├── package.json
└── vite.config.js
- BA-1 Initialize a new project
- Use vite
- BA-2 Add routing
- Add react-router-dom
- Add mui
- Add home page skeleton
- Add layout component with mui navbar with two links (home, about)
- Add profile button
- Add logout button
- Add profile button
- Add footer component
- Add about page skeleton
- BA-3 Add register page
- Add form with the following fields
- Username
- Avatar image
- Bio
- Password
- Confirm Password
- Add Submit button that redirects user to home page
- Add a link to Login page with a message "Already have an account? Sign in"
- Add form with the following fields
- BA-4 Add login page
- Add form with the following fields
- Password
- Add Sign In button that redirects user to home page
- Add a link to Register page with a message "Don't have an account? Sign up"
- Add form with the following fields
- BA-5 Add authentication ability with api
- BA-6 Add redux store
- Add redux toolkit
- Add redux devtools
- Add redux persist
- Add auth slice
- BA-7 Add authentication custom hook and use it in register and login pages
- Add
useAuthhook - Store user data along with accessToken in redux store
- Store loading and error states in redux store
- Use
useAuthhook in register and login pages - Add protected route component
- Use protected route component in (home, about) pages
- Logout user when user clicks on logout button
- Add
- BA-8 Implement home page
- Add a list of posts
- Add post title
- Add post summary
- Add post author
- Add post date
- Add post image
- Add like button
- Add comment button
- Add views counter
- Add a link to post details page
- When user clicks on post card, redirect user to post details page
- Add a button to navbar with "Add Post"
- BA-9 Implement about page
- BA-10 Add post display page
- Add post title
- Add post image
- Add post content
- Add post author
- Add avatar
- Add username
- Add post date
- Add like button
- Add views counter
- BA-11 Add comment ability to posts
- Add comment button on post details page
- Add comment form
- List comments
- Use mui list component
- Add comment author
- Add username
- Add comment date
- Add comment content
- Add comment avatar
- BA-12 Implement logout functionality
- Add logout button to navbar
- Add logout functionality
- Redirect user to login page after logout