React Blog App

Following topics are to be covered;

• React, Redux TK and persist, JS, Tailwind, Material-UI, Formik, Yup.

Project Skeleton

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

Backlog

• 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 footer component
  • Add about page skeleton
• BA-3 Add register page
  • Add form with the following fields
    • Username
    • Email
    • 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"
• BA-4 Add login page
  • Add form with the following fields
    • Email
    • 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"
• BA-5 Add authentication ability with api
  • Use formik
  • Use yup
  • Use axios
  • Add validation to both register and login forms
  • Add a snackbar to show error messages
  • Add a snackbar to show success messages
  • After successful register or login, redirect user to home page
• 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 useAuth hook
  • Store user data along with accessToken in redux store
  • Store loading and error states in redux store
  • Use useAuth hook 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
• 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