DevTalks: Your MERN Stack Forum 🚀 Project Overview DevTalks is a dynamic and interactive online forum platform built with the MERN (MongoDB, Express.js, React.js, Node.js) stack. It's designed to facilitate conversations through posted messages, allowing users to engage in discussions, share knowledge, and connect with a community. This project showcases expertise in building scalable web applications with a strong focus on user experience, performance, and security.

Preview

🌐 Live Site Live URL: https://devtalks-asg12.web.app/

✨ Key Features Core Functionality User Authentication: Secure user registration and login using email/password and social logins (e.g., Google). JWT (JSON Web Token) is implemented for secure session management.

User Profiles: Users can manage their profiles, including name, profile picture, and view their membership badges.

Post Creation & Management:

Users can create new posts with a title, description, and selected tags.

Posts are displayed with author information, title, tags, time, comment count, and vote counts.

Membership-Based Post Limits:

Bronze Plan: Limited to 5 posts.

Silver Plan: Limited to 20 posts/month.

Gold Plan: Unlimited posts.

Platinum Plan: Unlimited posts.

My Posts Page: Users can view, edit, and delete their own posts in a tabular format.

Post Editing (Modal Form): Users can edit post titles and descriptions through a dedicated modal.

Post Deletion: Users can delete their own posts.

Post Interaction:

Voting System: Users can upvote or downvote posts. A user cannot simultaneously upvote and downvote the same post (toggling logic implemented).

Commenting System: Users can add comments to posts. Multiple comments per post are allowed.

Comment Display: Comments are displayed below the post details, showing commenter's email, comment text (with "Read More" for longer comments in a modal).

Post Sharing: Implemented using react-share for easy sharing to social media platforms (e.g., Facebook, WhatsApp). The share URL is dynamic, linking directly to the post.

Content Discovery:

Homepage Posts: All posts are displayed on the homepage, sorted from newest to oldest by default.

Tag-Based Search: A search bar on the banner allows users to search for posts based on tags. Search functionality is handled on the backend.

Tag Cloud/Section: A dedicated section displays all available tags on the site.

Sort by Popularity: Users can sort posts by popularity (UpVote - DownVote) in descending order.

Pagination: Posts on the homepage are paginated (5 posts per page).

Membership System:

Membership Plans: Bronze, Silver, Gold, and Platinum plans are available.

Payment Integration: Stripe is used for processing membership payments.

Membership History: Users can view their payment history.

Membership Cancellation Request: Users can submit a request to cancel their membership, which is then reviewed by an admin.

Announcements: A section to display announcements. The notification icon in the navbar shows the count of announcements.

Admin Features (Dashboard) Admin Dashboard Overview: Provides statistics like total users, total posts, total comments, total tags, reported comments, total memberships, total payments, total upvotes, and total downvotes. Includes a pie chart for visual representation of key metrics.

Manage Users: Admins can view all users in a tabular form, including their name, email, and subscription status. Admins can also:

Make Admin: Grant admin privileges to any user.

Toggle Ban Status: Ban or unban users.

Manage Comments: Admins can view all comments.

Reported Comments/Activities: Admins can see all reported comments.

Admin Actions on Reported Comments: Admins can take actions against reported comments, such as:

Delete Comment: Permanently remove the reported comment.

Restore Comment: Mark the comment as "not reported" and clear any associated feedback.

View Feedback: See the specific feedback provided by the user who reported the comment.

Manage Tags: Admins can add, edit, and delete tags. These tags are then available for users to select when creating posts.

Make Announcement: Admins can create new announcements with an author image, name, title, and description.

Cancellation Requests Management: Admins can view and process membership cancellation requests (approve/refund or deny).

All Payments History: Admins can view all payment transactions with filtering options (search by email, transaction ID, plan, and date range).

Technical Implementations Fully Responsive Design: The website is optimized for mobile, tablet, and desktop views using Tailwind CSS.

Environment Variable Security: Firebase configuration keys and MongoDB credentials are secured using environment variables (.env).

Tanstack Query: Implemented for all GET data fetching operations to enhance performance and state management.

React Hook Form: Used for form management in registration and login pages for efficient validation.

SweetAlert2 & React Toastify: Used for user-friendly alerts and notifications.

Axios Secure: Custom Axios instance with interceptors for handling JWT tokens and secure API calls.

MongoDB Aggregation Pipeline: Used for complex data queries like calculating popular posts (upvote - downvote difference) and comment counts.

React-select: (Optional Package) Implemented for tag selection dropdown in the Add Post form.

📦 NPM Packages Used Client-side (React.js) react

react-dom

react-router-dom

@tanstack/react-query

axios

firebase

react-hook-form

sweetalert2

react-toastify

react-share

react-select (Optional)

tailwindcss

daisyui

recharts (for pie chart in Admin Dashboard)

Server-side (Node.js/Express.js) express

cors

dotenv

mongodb

jsonwebtoken

stripe

🚀 Deployment Guidelines Client-side: Deployed on Firebase Hosting.

Server-side: Deployed on Vercel.

Environment Variables: Ensure all necessary environment variables (e.g., DB_USER, DB_PASS, JWT_SECRET_KEY, STRIPE_SECRET_KEY, VITE_image_upload_key) are correctly configured in your deployment environment (Vercel for backend, Firebase for client).

CORS: Ensure your backend CORS configuration (cors()) is correctly set up to allow requests from your frontend domain. For production, it's recommended to restrict origin to your specific frontend URL.

Firebase Authorization: If using Netlify/Surge/Vercel, ensure your domain is added to Firebase's authorized domains.

No Errors on Reload: The application is designed to not throw errors on reloading from any routes, especially private ones, ensuring persistent user sessions.

🔐 Admin Credentials Admin Email: [Your Admin Email Here] Admin Password: [Your Admin Password Here]

(Please replace these placeholders with your actual admin credentials before submitting.)