https://github.com/arman-miaa/discount_pro
Discount PRO is a coupon-collecting application designed to help users discover and use discount coupons for various e-commerce stores in Bangladesh. The platform features responsive design, user authentication, and smooth navigation to enhance the user experience.
https://github.com/arman-miaa/discount_pro
firebase reactjs tailwind-css
Last synced: 4 months ago
JSON representation
Discount PRO is a coupon-collecting application designed to help users discover and use discount coupons for various e-commerce stores in Bangladesh. The platform features responsive design, user authentication, and smooth navigation to enhance the user experience.
- Host: GitHub
- URL: https://github.com/arman-miaa/discount_pro
- Owner: arman-miaa
- Created: 2025-01-08T08:48:24.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-08T08:52:36.000Z (5 months ago)
- Last Synced: 2025-01-08T09:39:23.580Z (5 months ago)
- Topics: firebase, reactjs, tailwind-css
- Language: JavaScript
- Homepage: https://discount-pro-project.netlify.app
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Discount PRO 🚀
## Short Description
**Discount PRO** is a coupon-collecting application designed to help users discover and use discount coupons for various e-commerce stores in Bangladesh. The platform features responsive design, user authentication, and smooth navigation to enhance the user experience.
---
## Technologies Used ✨
- ⚛️ **React**: Core framework for building the application's UI and managing components.
- 🎨 **Tailwind CSS**: Utility-first CSS framework for responsive and efficient styling.
- 🌼 **DaisyUI**: Pre-designed UI components built on Tailwind CSS for accessible and modern design.
- 🔥 **Firebase**: Used for user authentication and hosting services.
- 🛣️ **React Router**: For navigating between different pages and protecting routes.
- ✨ **AOS (Animate on Scroll)**: Provides beautiful scroll-based animations for enhanced user experience.
- 🛠️ **Git**: Version control for tracking project development and collaboration.
---
## List of React Fundamental Concepts Used 📝
- **JSX (JavaScript XML)**: Combined HTML-like syntax with JavaScript for UI creation.
- **Components**: Divided the UI into modular and reusable components (e.g., Header, BrandsOnSell, TopBrands).
- **Props and State**: Passed data between components using props and managed dynamic states like user login or coupon selection.
- **Event Handling**: Managed user interactions (e.g., copying coupon codes, logging in, or logging out).
- **useEffect**: Used for side effects like animating components and fetching data.
- **React Router**: Implemented navigation and private routes for authenticated users.
---
## Data Handling and Management 📦
- **JSON**: Stored brand and coupon data locally in a structured format.
- **Firebase**: Managed user authentication data and protected routes.
- **Environment Variables**: Secured sensitive configuration details like Firebase API keys.
---
## 5 Features of the Website/Project ⚙️
1. **Coupon Collection**:
Browse and view coupons with detailed descriptions, conditions, and expiry dates.
2. **User Authentication**:
Secure login and registration via email/password or Google Sign-In.
3. **Scroll Animations**:
Dynamic AOS-powered animations enhance the user experience.
4. **Responsive Design**:
Fully optimized for desktop, tablet, and mobile devices.
5. **Protected Routes**:
Only authenticated users can access certain pages, ensuring security and exclusivity.
---
## Live Link 🌐
- Netlify Live Link: 👉 [https://discount-pro-project.netlify.app/](https://discount-pro-project.netlify.app/)
---
## 📦 Dependencies Used
### Core Dependencies:
- **React**: A library for building user interfaces.
- **React-DOM**: React rendering library.
- **React-Router-Dom**: For dynamic routing within the app.
- **Firebase**: Authentication and backend services for user login and data management.
- **React-Toastify**: For displaying toast notifications.
- **AOS**: Animate On Scroll for smooth animations.
- **React-Icons**: Provides a set of commonly used icons.
- **SweetAlert2**: For interactive alerts and confirmation dialogs.
- **Match-Sorter**: Used for sorting arrays.
### Dev Dependencies:
- **TailwindCSS**: A utility-first CSS framework for creating modern designs.
- **DaisyUI**: Component library built on top of TailwindCSS.
- **Vite**: A fast build tool and development server.
- **ESLint**: A tool for identifying and fixing problems in JavaScript code.
- **PostCSS**: CSS transformations and optimizations.
- **Autoprefixer**: Adds vendor prefixes to CSS.
## 🖥️ Setup Instructions
To get this project running locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/arman-miaa/Discount-PRO.git && cd Discount-PRO
&& npm run dev