project name:CodeStack

project overview: In this web application people can learn coding topics theory like html, css, tailwind, daisyui, react, react router, stripe, axios, react custom hook etc many more topics. Also can give user his valuable comment on any post or vote(like or dislike).

3. live URL: https://assignment-12-b4778.web.app/

key features:

1. Anyone can create any account by clicking on the join us button it will redirect to login page. Where user can go to register page also.
2. By default after creating an account the user will badge of the website would be bronze.
3. A bronze badge user can add maximum 5 post. For more post the user has to be a member of the website. If a user want's to become a member of this web app. He/she needs to go to membership page and give 20$ to be a member and this will change the user badge bronze to gold.
4. A user can see his badge with registered info in the dashboard profile page. He/she also can add something about the user in the about me field.
5. There are some tags that user can click on it to see this tag related post and also reset the tag by simply clicking on teh rest tag button.
6. In home page user can see all the post and by clicking on a post user will redirect to the page details. And he/she can also give vote(like or dislike) and also give a comment maximum one.
7. In the home page a user can see maximum 5 post per page. User can see other posts by clicking the pagination number or pagination arrow.
8. In search bar user can search for his suitable post about his/her suitable technology by tag like (react, node, express etc).
9. Below all the posts user can see a announcement section where all the announcement are showed and also user can see the bell icon in the nav bar with a number. That's mean a announcement were made my the admin.
10. A normal user can see his profile in the dashboard.
11. In the dashboard Add Post route user can add post.
12. In My Posts route. User can see the all post that he/she has made. Also can the the posts votes(like and dislike) and can delete a post.
13. In my post a user can also see the comment of the post where other user has made. In this page a user can give feedback by clicking on report button. If the comment is unfaithful a user can do report.
14. For admin Profile admin can see the his info and also add tags by admin.
15. In profile admin can also see the site overview total posts, total comments and total users in a text and in a pie chart.
16. In manage users route admin can see all the users and see the subscription of the user and can make a user user admin or remove form admin also can search user form the search bar.
17. There are a Announcement route. Where admin can post announcement
18. In the reported comments route user can see all the report has done by the user. If the report is unfaithful to the user of the post. The admin can simply delete the comment or dismiss the comment

npm packages:

1. daisyui
2. tailwind
3. react router
4. react toastify
5. react icons
6. react hook form
7. react spinners
8. axios
9. tanstack query
10. react sweet alert2
11. react share
12. stripe js
13. react recharts
14. use debounce

dependencies:

1. "@stripe/react-stripe-js": "^3.7.0",
2. "@stripe/stripe-js": "^7.5.0",
3. "@tailwindcss/vite": "^4.1.11",
4. "@tanstack/react-query": "^5.83.0",
5. "axios": "^1.10.0",
6. "daisyui": "^5.0.46",
7. "firebase": "^11.10.0",
8. "react": "^19.1.0",
9. "react-dom": "^19.1.0",
10. "react-hook-form": "^7.60.0",
11. "react-icons": "^5.5.0",
12. "react-router": "^7.6.3",
13. "react-share": "^5.2.2",
14. "react-spinners": "^0.17.0",
15. "react-toastify": "^11.0.5",
16. "recharts": "^3.1.0",
17. "sweetalert2": "^11.22.2",
18. "tailwindcss": "^4.1.11",
19. "use-debounce": "^10.0.5"

use project Locally:

1. open the project in vs code
2. then open terminal then type npm run dev
3. this will give a localhost link
4. click on it and you can see the web app