Razels

Welcome to Razels! Razels is an assignment from Programming Hero, Assignment No. 10.

--

🗂️ Project Overview

Razels is a platform for to collect donation for crowdfunding campaigns

--

✨ Key Fetures

• Awesome Responsive Design - Good looking theme and fully responsive for all devices
• Well Structured Layout - All HTML Block Layout Well Structured
• React Hamburger - Animated Hamburger
• Awesome Toast Notification - Toast Notification Awesome Succes, Warning , Pending And Error Design
• Cool Animation - Cool Parallax Animation Using AOS and Animate.css
• Campaign Search - Seraching Campaign And Show in table
• Image Upload - image upload with cloudinary
• Sort By Price - Sorting By Price

---

📦 NPM Packages Used

This project uses the following npm packages:

• animate.css - A library for creating CSS animations.
• aos - AOS (Animate On Scroll) library for scroll-based animations.
• firebase - Backend service for managing authentication, databases, and more.
• hamburger-react - A library for creating animated hamburger menu icons.
• react - JavaScript library for building user interfaces.
• react-dom - Provides DOM-specific methods used in React.
• react-helmet-async - A library for managing the head section of your HTML document in React.
• react-hot-toast - Elegant toast notifications for React applications.
• react-icons - A library for using popular icons in React apps.
• ShadCn - A library for using Components in React apps.
• Tip Tap - A text editor to convert text styl into html.
• Momment Js - A popular date managment npmpackage
• React Helemet - To add custom title meta tag etc
• react-router-dom - A library for handling navigation in React applications.
• swiper - A modern mobile touch slider library.

---

⚙️ Fundamental concepts

• Context Api -
• Fetch Api
• UseEffect -
• UseState -
• React Router Dom -
• React Components -
• Custom Hook
• Enviorment Variable-

---

🚀 How to Run This Project

To get started with Razels on your local machine, follow these steps:

1. Clone the Repository

   git clone https://github.com/programming-hero-web-course2/b10-a10-client-side-StackMastery.git
   

2. Navigate to the Project Directory

   cd ./b10-a10-client-side-StackMastery
   

3. Install Dependencies

   npm install / npm i
   

4. Rename Or Duplicate The .env.example file

   .env.example = .env.local
   

5. Fill Up All Variable From you firebase Account Project Config

      VITE_FIREBASE_API_KEY=AIzaSyDR76LW5I072QbDHj637i6fy2llCDM0Bk4
      VITE_FIREBASE_AUTH_DOMAIN=assignments-63037.firebaseapp.com
      VITE_FIREBASE_PROJECT_ID=assignments-63037
      VITE_FIREBASE_STORAGE_BUCKET=assignments-63037.firebasestorage.app
      VITE_FIREBASE_MESSAGING_SENDER_ID=858862480859
      VITE_FIREBASE_APP_ID=1:858862480859:web:8a77c25b9e6fe5e137cbfe
      VITE_FIREBASE_MEASUREMENT_ID=G-XZQRSQ2JZ0
   
      VITE_BACKEND_URL=https://razels.up.railway.app
   
   

6. Start the Development Server:

   npm run dev
   

🌐 Live Demo

Experience the Razels project live! Live Link