Crowd Connect

Help Together 🤝

CrowdConnect is a modern crowdfunding platform designed to help individuals, startups, businesses, and creatives bring their ideas and causes to life. The platform connects campaign creators with a supportive community of donors, making it easy to raise funds for personal needs, creative projects, and entrepreneurial ventures.

Live URL:

https://crowd-connect-e444d.web.app/

Key features

1. User-Friendly Campaign Creation:
   Easily create campaigns with details such as title, description, image, donation type, and deadline. The intuitive interface ensures a seamless experience for all users.

2. Diverse Campaign Categories:
   Support a variety of campaign types, including personal issues, startups, businesses, and creative ideas, ensuring inclusivity and broad appeal.

3. Responsive Design:
   Fully responsive and mobile-friendly design for optimal user experience across all devices, powered by Tailwind CSS.

4. User Campaign:
   Provide a dashboard for campaign creators to manage their campaigns, update and delete if they want.

5. User donation list:
   User can see their donation list and gather previous donation information

🛠️ Technologies Used

Frontend:

• React: Dynamic UI rendering.
• Tailwind CSS: Responsive and modern styling.

Backend:

• Node.js and Express.js: Backend framework for API creation.
• MongoDB: NoSQL database for data storage.
• Express Js: For database interaction.

Others:

• Axios: For HTTP requests.
• Firebase: For user authentication and hosting.

---

✨ Main Features

• Campaign Creation: Users can create campaigns with details such as title, description, and funding goals.
• Secure Donations: Supporters can contribute funds securely through the platform.
• Real-Time Updates: Campaign creators can post updates to engage with donors.
• User Authentication: Login and sign-up functionality with Firebase.
• Responsive Design: Optimized for both desktop and mobile devices.

---

📦 Dependencies

• axios: Promise-based HTTP client for making API requests.
• firebase: For user authentication, hosting, and other Firebase services.
• gsap: High-performance animation library for web applications.
• localforage: Offline storage utility for managing data locally.
• match-sorter: Library for filtering and sorting data.
• react: JavaScript library for building user interfaces.
• react-awesome-reveal: For adding animations to React components.
• react-dom: React library for DOM rendering.
• react-icons: Collection of popular SVG icons for React.
• react-lottie: React wrapper for Lottie animations.
• react-router-dom: Declarative routing for React.
• react-simple-typewriter: Typewriter effect for React components.
• react-toastify: For creating toast notifications in React.
• react-tooltip: Customizable tooltips for React.
• sort-by: Sorting utility for JavaScript objects.
• sweetalert2: Customizable and beautiful popups.
• swiper: Modern touch slider library.

To see the full list of dependencies, check the package.json file.

🚀 How to Run Locally

Follow these steps to run the project on your local machine:

1. Clone the Repository:

   git clone https://github.com/nafiz678/crowdfunding-website.git  
   cd crowdfunding-website
   
   

2. Install Dependencies:

• Frontend

  cd client
  npm install
  

• Backend

  cd server
  npm install
  
  

3. Set Up Environment Variables:

   env
   Copy code
   # Server  
   MONGO_URI=your_mongodb_connection_string
   # Client  
   VITE_FIREBASE_API_KEY=your_firebase_api_key
   

4. Run the Development Servers:

• Start the backend:

  cd server
  node index.js
  

• Start the frontend:

  cd server
  npm run dev
  

5. Access the Application:
   Open your browser and navigate to http://localhost:5000.