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.
- ⚛️ 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.
- 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.
- 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.
-
Coupon Collection:
Browse and view coupons with detailed descriptions, conditions, and expiry dates. -
User Authentication:
Secure login and registration via email/password or Google Sign-In. -
Scroll Animations:
Dynamic AOS-powered animations enhance the user experience. -
Responsive Design:
Fully optimized for desktop, tablet, and mobile devices. -
Protected Routes:
Only authenticated users can access certain pages, ensuring security and exclusivity.
- Netlify Live Link: 👉 https://discount-pro-project.netlify.app/
- 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.
- 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.
To get this project running locally, follow these steps:
- Clone the repository:
git clone https://github.com/arman-miaa/Discount-PRO.git && cd Discount-PRO
&& npm run dev