{"id":25406571,"url":"https://github.com/sayed725/postpad-client","last_synced_at":"2026-04-02T02:49:35.354Z","repository":{"id":275884940,"uuid":"926455148","full_name":"sayed725/PostPad-Client","owner":"sayed725","description":"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.","archived":false,"fork":false,"pushed_at":"2025-02-19T10:09:21.000Z","size":919,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T22:56:57.747Z","etag":null,"topics":["expressjs","firebase","mongodb","nodejs","reractjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://post-pad.web.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sayed725.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-03T09:35:57.000Z","updated_at":"2025-02-19T10:09:24.000Z","dependencies_parsed_at":"2025-02-05T05:29:33.825Z","dependency_job_id":null,"html_url":"https://github.com/sayed725/PostPad-Client","commit_stats":null,"previous_names":["sayed725/postpad-client"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed725%2FPostPad-Client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed725%2FPostPad-Client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed725%2FPostPad-Client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed725%2FPostPad-Client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sayed725","download_url":"https://codeload.github.com/sayed725/PostPad-Client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643038,"owners_count":21138353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expressjs","firebase","mongodb","nodejs","reractjs","tailwindcss"],"created_at":"2025-02-16T05:35:20.988Z","updated_at":"2025-12-30T19:04:43.115Z","avatar_url":"https://github.com/sayed725.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# PostPad - An Interactive Online Discussion Platform  \n\n## Project Purpose  \nThis 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.\n\n---\n\n## Live URL  \n[Forum Live Link](https://post-pad.web.app/)\n\n## Requirements Docs\n- Required PDF Link:   [https://drive.google.com/file/d/1xzrLiUste_hlF584wAB7w6lP2DM7GJ3h/view?usp=sharing) \n\n## 🔑 Admin Login Credentials\n\n- **Email:** `post@gmail.com`\n- **Password:** `1234Aa!`\n\n\n---\n\n## Key Features  \n### Public Features:  \n- **Homepage**:  \n  - Displays posts from newest to oldest.  \n  - Search functionality based on post tags.  \n  - Sort by Popularity (based on Upvote-Downvote difference).  \n  - Pagination with 5 posts per page.  \n  - Announcement section with live notification count.\n  - Advertisement section to show add.  \n\n- **Post Details**:  \n  - Displays post details such as title, author information, tags, description, and comments.  \n  - Comment, Upvote, Downvote, and Share functionality.\n  - Any Logged in user can vote , comment , share on the post here.  \n\n- **Membership Page**:  \n  - Allows users to pay to become members and post more than 5 posts.\n  - Added Stripe Payment Method to make user become member.  \n\n- **Authentication**:  \n  - Social and Email/Password login using Firebase.  \n    \n\n---\n\n### Private User Features:  \n- **User Dashboard**:  \n  - My Profile: Displays user's name, email, badges, and 3 recent posts.  \n  - Add Post: Post content with tags, upvotes, and downvotes.  \n  - My Posts: View and manage (delete, comment, report) user posts.  \n\n- **Membership Perks**:  \n  - Gold Badge for members with increased more than 5 posting capacity.  \n\n---\n\n### Admin Features:  \n- **Admin Dashboard**:  \n  - **Admin Profile**:  \n    - Displays site stats (posts, users, comments) and a pie chart.  \n    - Add new tags for post categorization.  \n\n  - **Manage Users**:  \n    - View all users with search functionality.  \n    - Make users admins and view subscription status.\n    - Added Admin can make any user or member to admin functionality.  \n\n  - **Reported Comments**:  \n    - View and manage reported comments.  \n    - Take appropriate actions (delete that comment , delete that specific user).  \n\n  - **Announcements**:  \n    - Create and manage announcements visible to all users.  \n\n---\n\n## Challenges Tasks Implemented  \n- Admin profile page with stats and a pie chart.  \n- JWT for secure login and role-based access.  \n- Firebase and MongoDB credentials secured with environment variables.  \n- Tanstack Query for efficient data fetching.  \n- Pagination in all tables and posts.  \n\n---\n\n## Tech Stack  \n### Frontend:  \n- React.js with React Router  \n- Tailwind CSS  \n- React-hook-form  \n- React-select  \n- React-share  \n\n### Backend:  \n- Node.js with Express.js  \n- MongoDB \n- JWT for authentication  \n\n### Deployment:  \n- Frontend: Firebase  \n- Backend: Vercel \n\n---\n\n## NPM Packages Used  \n1. **Frontend**:  \n   - `react-router-dom`  \n   - `@tanstack/react-query`  \n   - `react-hook-form`  \n   - `react-select`  \n   - `react-share`  \n   - `react charts`  \n   - `react-icons`  \n   - `lotte-react`  \n   - `react-modal`  \n   - `react-hot-toast`  \n   - `sweetAleart2`  \n   - `react-stripejs`  \n   - `react-helmet`  \n   - `axios`  \n   - `axios`  \n\n2. **Backend**:  \n   - `express`    \n   - `dotenv`  \n   - `jsonwebtoken`  \n   - `bcryptjs`  \n   - `cors`  \n\n---\n\n\n\n## 📷 Project Images Highlights\n\n### 📷 Home Page `\"/\"` Image\n\n![Home Page](https://i.ibb.co.com/rKZHMYkg/Postpad-Home.png)\n\n### 📷 Post Details Page `\"/Post Details\"` Image\n\n![post Details](https://i.ibb.co.com/ZkGBM5P/post-Pad-post-details.png)\n\n### 📷 Admin Dashboard `\"/dashboard\"` Image\n\n![Admin Dashboard](https://i.ibb.co.com/zVCVD72k/Post-Pad-admin-home.png)\n\n### 📷 User Dashboard `\"/dashboard\"` Image\n\n![User Dashboard](https://i.ibb.co.com/jZ4Rgq8p/Post-Pad-User-Profile.png)\n\n### 📷 User add post `\"/add-post\"` Image\n\n![User add Post](https://i.ibb.co.com/WpYNDyWR/Post-Pad-User-Add-Post.png)\n\n### 📷 Member Payment Page `\"/payment\"` Image\n\n![Payment Section](https://i.ibb.co.com/pBGgJ9HC/Post-Pad-member-payment.png)\n\n---\n\n## ⚙️ Installation \u0026 Setup\n\n### Client Setup\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/sayed725/PostPad-Client.git\n   cd PostPad-Client\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Set up the environment variables in a `.env.local` file:\n\n   ```env\n   VITE_apiKey=your_firebase_apiKey\n   VITE_authDomain=your_firebase_authDomain\n   VITE_projectId=your_firebase_projectId\n   VITE_storageBucket=your_firebase_storageBucket\n   VITE_messagingSenderId=your_firebase_messagingSenderId\n   VITE_appId=your_firebase_appId\n\n   VITE_API_URL=your_server_api_link\n   VITE_STRIPE_PUBLIC_KEY=your_stripe_Publishable_Key\n   ```\n\n4. Run the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n5. Open [http://localhost:5173/](http://localhost:5173/) in your browser.\n\n### Server Setup\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/sayed725/PostPad-Server.git\n   cd PostPad-Server\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Set up the environment variables in a `.env` file:\n   ```env\n   DB_USER=your_db_user_name\n   DB_PASS=your_db_user_password\n   JWT_SECRET=jwt_secret_code\n   STRIPE_SECRET_KEY=your_stripe_Secret _Key\n   ```\n4. Run the development server:\n   ```bash\n   npm start\n   ```\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayed725%2Fpostpad-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsayed725%2Fpostpad-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayed725%2Fpostpad-client/lists"}