https://github.com/marziulrafi/pickbetter
PickBetter is a community-driven product recommendation platform, enabling users to post queries and receive suggestions with reasons and images, secured by Firebase auth and JWT.
https://github.com/marziulrafi/pickbetter
expressjs firebase firebase-auth firebase-sdk mongodb react reactrouter tailwindcss
Last synced: 3 months ago
JSON representation
PickBetter is a community-driven product recommendation platform, enabling users to post queries and receive suggestions with reasons and images, secured by Firebase auth and JWT.
- Host: GitHub
- URL: https://github.com/marziulrafi/pickbetter
- Owner: marziulrafi
- Created: 2025-06-25T05:35:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-25T10:37:33.000Z (about 1 year ago)
- Last Synced: 2025-06-25T11:33:37.914Z (about 1 year ago)
- Topics: expressjs, firebase, firebase-auth, firebase-sdk, mongodb, react, reactrouter, tailwindcss
- Language: JavaScript
- Homepage: https://marziul-pickbetter.web.app/
- Size: 96.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎯 PickBetter – Smart Product Recommendation Platform
**PickBetter** is an intelligent product recommendation platform where users can post their product-related queries and receive helpful suggestions from others. Built with a secure and interactive interface, it promotes community-driven decision-making by allowing users to recommend alternatives with reasoning and images.
🔗 **Live Site URL:** [PickBetter Live Demo](https://marziul-pickbetter.web.app/)
🔗 **Server Side Repository:** [PickBetter Server Side](https://github.com/marziulrafi/PickBetter-Server)
---
## 🚀 Key Features
- 🔐 **Secure Firebase Authentication:** Users can register and log in securely with email/password using Firebase Authentication.
- 💬 **Post Product Queries:** Authenticated users can post their product concerns or questions for others to respond.
- 💡 **Community Recommendations:** Other users can add recommendations for a posted query with reasons, images, and product names.
- 📈 **Real-Time Recommendation Counter:** Query cards show the number of recommendations received, updated live.
- 🛡️ **JWT-based Protected API Access:** Backend routes are secured using Firebase ID Tokens, ensuring only valid users access the data.
- 🎨 **Modern & Responsive UI:** Built with Tailwind CSS and React for a clean, mobile-friendly interface.
- 🗂️ **MongoDB Integration:** All data is stored in MongoDB Atlas, including queries and recommendations.
- 🔍 **User-Based Data Filtering:** Users can view only their queries and recommendations, with strict access control.
---
## 🛠 Tech Stack
### 🔧 Frontend
- **React** – JavaScript library for building UI
- **React Router** – For page navigation
- **Tailwind CSS** – Utility-first CSS framework
- **Firebase Auth** – For secure authentication
- **Firebase SDK** – To fetch secure ID tokens
### ⚙️ Backend
- **Express.js** – Web framework for Node.js
- **Firebase Admin SDK** – To verify ID tokens securely
- **MongoDB Atlas** – Cloud-based database
- **CORS** – For handling cross-origin requests
- **dotenv** – For managing environment variables
---
## 📦 NPM Packages Used
```bash
# Backend
npm install express cors dotenv mongodb firebase-admin
# Frontend
npm install react react-dom react-router firebase
```
---
## 🖥️ How to Run the Project Locally
### ✅ Prerequisites
- Node.js and npm installed
- Code editor like VS Code
### 📁 Setup Instructions
1. **Clone the Repository**
```bash
git clone https://github.com/marziulrafi/PickBetter.git
cd PickBetter
2. **Install Dependencies**
```bash
npm install
3. **Firebase Configuration**
4. **Start the Development Server**
```bash
npm run dev