https://github.com/hossainshofiq/perfectalt-client
The Product Recommendation Platform lets users add, manage, and view product queries and recommendations. With secure JWT authentication, allowing users to interact with queries, share recommendations, and see suggestions. The platform is built with MongoDB, Firebase, and dynamic UI components.
https://github.com/hossainshofiq/perfectalt-client
expressjs firebase jwt mongodb nodejs react
Last synced: 3 months ago
JSON representation
The Product Recommendation Platform lets users add, manage, and view product queries and recommendations. With secure JWT authentication, allowing users to interact with queries, share recommendations, and see suggestions. The platform is built with MongoDB, Firebase, and dynamic UI components.
- Host: GitHub
- URL: https://github.com/hossainshofiq/perfectalt-client
- Owner: hossainshofiq
- Created: 2025-02-22T21:21:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-24T20:09:19.000Z (about 1 year ago)
- Last Synced: 2025-05-15T02:14:57.969Z (about 1 year ago)
- Topics: expressjs, firebase, jwt, mongodb, nodejs, react
- Language: JavaScript
- Homepage: https://product-recommendation-s-d6b6d.web.app/
- Size: 7.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 **PerfectAlt**
**Live Site URL:**
[🔗 PerfectAlt](https://product-recommendation-s-d6b6d.web.app/)
## 📞 **Contact Information**
📱 **Phone Number:** +8801689819951
---
## 📌 **Project Overview**
**PerfectAlt** is a full-stack **Product Recommendation Platform** that enables users to:
✔️ **Add, manage, and view product queries and recommendations**
✔️ **Securely authenticate with Firebase (Google login)**
✔️ **Ensure protected access using JWT authentication**
✔️ **Experience a fully responsive UI with engaging animations**
✔️ **Explore Recent products, featured products, highlighted brands, trending categories, FAQs, and reviews**
---
## 📚 **Table of Contents**
- [Technology Stack](#-technology-stack)
- [Features](#-features)
- [Installation](#-installation)
- [Dependencies](#-dependencies)
- [NPM Packages Used](#-npm-packages-used)
- [Design Inspiration](#-design-inspiration)
---
## 🛠 **Technology Stack**
### **Frontend (Client-Side)**
- ⚛️ **React.js** – Component-based frontend framework
- 🎨 **Tailwind CSS** – Styling and responsive design
### **Backend (Server-Side)**
- ⚡ **Node.js** – JavaScript runtime for the server
- 🌐 **Express.js** – Web framework for building APIs
- 🗄 **MongoDB** – NoSQL database for data storage
### **Authentication & Security**
- 🔑 **Firebase Authentication** – Secure login via Google/GitHub
- 🔒 **JWT & Middleware** – Ensuring protected API access
---
## ✨ **Features**
### 🔐 **Authentication**
✔️ Email/Password login
✔️ Google Sign-in
✔️ JWT-based private route protection
### 📝 **Queries**
✔️ Add, view, update, and delete queries
✔️ Search functionality based on product names
### 📢 **Recommendations**
✔️ Add, view, and delete recommendations
✔️ Dynamic recommendation count updates
### 📱 **Responsive Design**
✔️ Fully responsive across **mobile, tablet, and desktop**
### 🚀 **Homepage Highlights**
✔️ Animated hero/slider section
✔️ All queries overview
✔️ Featured products display
✔️ Highlighted brands section
✔️ Trending categories section
✔️ FAQs and customer reviews
### 🚀 **Navigation**
✔️ Conditional Navbar rendering based on authentication
### 🔍 **Additional Features**
✔️ **404 Error Page** – Redirects users to the homepage
✔️ **Recent Queries Section** – Interactive slider for latest queries
✔️ **Animations** – Enhanced UI with creative homepage sections
✔️ **UI Alerts** – SweetAlert2 for UI alerts and feedback
---
## 🛠 **Installation**
### **Clone the repository**
```bash
git clone https://github.com/your-username/your-repo.git
cd your-repo
```
### **Install dependencies**
```bash
npm install
```
### **Start the development server**
```bash
npm run dev
```
---
## 📦 **Dependencies**
### **Main Dependencies**
```json
{
"axios": "^1.7.9",
"firebase": "^11.1.0",
"localforage": "^1.10.0",
"lottie-react": "^2.4.0",
"match-sorter": "^8.0.0",
"motion": "^11.15.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"react-router-dom": "^7.1.0",
"react-tooltip": "^5.28.0",
"sort-by": "^1.2.0",
"sweetalert2": "^11.15.3",
"swiper": "^11.1.15"
}
```
### **Development Dependencies**
```json
{
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.17",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"daisyui": "^4.12.22",
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.13.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.17",
"vite": "^6.0.3"
}
```
---
## 📦 **NPM Packages Used**
### **Frontend**
✔️ `react` – Component-based user interface development
✔️ `react-router-dom` – Routing and navigation
✔️ `react-icons` – Icon library
✔️ `axios` – HTTP requests to the server
✔️ `lottie-react` – For animated sections
✔️ `react-tooltip` – Tooltip functionalities
### **Backend**
✔️ `express` – Web server framework
✔️ `mongoose` – MongoDB object modeling
✔️ `dotenv` – Environment variable management
✔️ `jsonwebtoken` – JWT token creation and validation
✔️ `cors` – Enable CORS policies
---
## 🔐 **User Credentials**
✔️ **Email** : shofiq@gmail.com
✔️ **Password** : Shofiq
---
## 🎨 **Design Inspiration**
- [Themeforest Templates](https://themeforest.net/search/questions%20and%20answers%20template)
---