https://github.com/sayed725/postpad-client
This project is a fully responsive and interactive forum built using the MERN Stack (MongoDB, Express.js, React.js, Node.js). The platform allows users to post, comment, vote, and share content in real-time. Admins can manage users, announcements, and reported activities.
https://github.com/sayed725/postpad-client
expressjs firebase mongodb nodejs reractjs tailwindcss
Last synced: 2 months ago
JSON representation
This project is a fully responsive and interactive forum built using the MERN Stack (MongoDB, Express.js, React.js, Node.js). The platform allows users to post, comment, vote, and share content in real-time. Admins can manage users, announcements, and reported activities.
- Host: GitHub
- URL: https://github.com/sayed725/postpad-client
- Owner: sayed725
- Created: 2025-02-03T09:35:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-19T10:09:21.000Z (4 months ago)
- Last Synced: 2025-04-12T22:56:57.747Z (2 months ago)
- Topics: expressjs, firebase, mongodb, nodejs, reractjs, tailwindcss
- Language: JavaScript
- Homepage: https://post-pad.web.app/
- Size: 897 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PostPad - An Interactive Online Discussion Platform
## Project Purpose
This project is a fully responsive and interactive forum built using the **MERN Stack** (MongoDB, Express.js, React.js, Node.js). The platform allows users to post, comment, vote, and share content in real-time. Admins can manage users, announcements, and reported activities. The purpose of this project is to create a scalable web application that focuses on user experience, performance, and security.
---
## Live URL
[Forum Live Link](https://post-pad.web.app/)
## Requirements Docs
- Required PDF Link: [https://drive.google.com/file/d/1xzrLiUste_hlF584wAB7w6lP2DM7GJ3h/view?usp=sharing)
## 🔑 Admin Login Credentials
- **Email:** `[email protected]`
- **Password:** `1234Aa!`
---
## Key Features
### Public Features:
- **Homepage**:
- Displays posts from newest to oldest.
- Search functionality based on post tags.
- Sort by Popularity (based on Upvote-Downvote difference).
- Pagination with 5 posts per page.
- Announcement section with live notification count.
- Advertisement section to show add.
- **Post Details**:
- Displays post details such as title, author information, tags, description, and comments.
- Comment, Upvote, Downvote, and Share functionality.
- Any Logged in user can vote , comment , share on the post here.
- **Membership Page**:
- Allows users to pay to become members and post more than 5 posts.
- Added Stripe Payment Method to make user become member.
- **Authentication**:
- Social and Email/Password login using Firebase.
---
### Private User Features:
- **User Dashboard**:
- My Profile: Displays user's name, email, badges, and 3 recent posts.
- Add Post: Post content with tags, upvotes, and downvotes.
- My Posts: View and manage (delete, comment, report) user posts.
- **Membership Perks**:
- Gold Badge for members with increased more than 5 posting capacity.
---
### Admin Features:
- **Admin Dashboard**:
- **Admin Profile**:
- Displays site stats (posts, users, comments) and a pie chart.
- Add new tags for post categorization.
- **Manage Users**:
- View all users with search functionality.
- Make users admins and view subscription status.
- Added Admin can make any user or member to admin functionality.
- **Reported Comments**:
- View and manage reported comments.
- Take appropriate actions (delete that comment , delete that specific user).
- **Announcements**:
- Create and manage announcements visible to all users.
---
## Challenges Tasks Implemented
- Admin profile page with stats and a pie chart.
- JWT for secure login and role-based access.
- Firebase and MongoDB credentials secured with environment variables.
- Tanstack Query for efficient data fetching.
- Pagination in all tables and posts.
---
## Tech Stack
### Frontend:
- React.js with React Router
- Tailwind CSS
- React-hook-form
- React-select
- React-share
### Backend:
- Node.js with Express.js
- MongoDB
- JWT for authentication
### Deployment:
- Frontend: Firebase
- Backend: Vercel
---
## NPM Packages Used
1. **Frontend**:
- `react-router-dom`
- `@tanstack/react-query`
- `react-hook-form`
- `react-select`
- `react-share`
- `react charts`
- `react-icons`
- `lotte-react`
- `react-modal`
- `react-hot-toast`
- `sweetAleart2`
- `react-stripejs`
- `react-helmet`
- `axios`
- `axios`
2. **Backend**:
- `express`
- `dotenv`
- `jsonwebtoken`
- `bcryptjs`
- `cors`
---
## 📷 Project Images Highlights
### 📷 Home Page `"/"` Image
### 📷 Post Details Page `"/Post Details"` Image
### 📷 Admin Dashboard `"/dashboard"` Image
### 📷 User Dashboard `"/dashboard"` Image
### 📷 User add post `"/add-post"` Image
### 📷 Member Payment Page `"/payment"` Image
---
## ⚙️ Installation & Setup
### Client Setup
1. Clone the repository:
```bash
git clone https://github.com/sayed725/PostPad-Client.git
cd PostPad-Client
```
2. Install dependencies:
```bash
npm install
```
3. Set up the environment variables in a `.env.local` file:
```env
VITE_apiKey=your_firebase_apiKey
VITE_authDomain=your_firebase_authDomain
VITE_projectId=your_firebase_projectId
VITE_storageBucket=your_firebase_storageBucket
VITE_messagingSenderId=your_firebase_messagingSenderId
VITE_appId=your_firebase_appId
VITE_API_URL=your_server_api_link
VITE_STRIPE_PUBLIC_KEY=your_stripe_Publishable_Key
```
4. Run the development server:
```bash
npm run dev
```
5. Open [http://localhost:5173/](http://localhost:5173/) in your browser.
### Server Setup
1. Clone the repository:
```bash
git clone https://github.com/sayed725/PostPad-Server.git
cd PostPad-Server
```
2. Install dependencies:
```bash
npm install
```
3. Set up the environment variables in a `.env` file:
```env
DB_USER=your_db_user_name
DB_PASS=your_db_user_password
JWT_SECRET=jwt_secret_code
STRIPE_SECRET_KEY=your_stripe_Secret _Key
```
4. Run the development server:
```bash
npm start
```
---