Kutto

📜 Project Overview

Welcome to Kutto, a modern web application designed to facilitate the adoption and donation process for pets. With an intuitive interface, seamless adoption flow, and user-friendly donation system, Kutto aims to revolutionize the way we interact with pet adoption.

Kutto provides a platform for potential pet owners to browse available pets, adopt pets, create donation campaigns for pets, and more. It's a place where pets and their future owners can connect and support each other.

---

🛡️ Admin email & password

• Email: admin@gmail.com
• Password: Ad1212..

---

🚀 Live Links

• Client Repo: This repository serves as the main Kutto platform and includes the frontend setup.
• Server Repo: github/tariqul420/Kutto-Server
• Live Site: Kutto.com
• Alternate Live Site: Kutto-2.com

---

🔍 React Concepts Used

• Components
• Hooks: useState, useEffect, useContext
• React Router: useParams, useLocation, useNavigate
• Conditional Rendering
• Context API for global state management
• React Hook Form for form handling and validation

---

🛠️ Technologies Used

👩🏼‍💻 Frontend

• React
• Firebase
• Tailwind CSS
• DaisyUI
• React Router
• React Icons
• React Hot Toast
• React Hook Form
• JWT-based Authentication

｡🇯‌🇸‌ Backend

• Node.js
• Express.js

🛢️ Database

• MongoDB

---

✨ Features

1. Pet Adoption: Discover and adopt pets based on your preferences.
2. User Profiles: Create personal profiles to manage your adoptions, donations, and pet preferences.
3. Pet Listings: View pets available for adoption with detailed profiles.
4. Booking and Donation System: Easily book adoption appointments or donate to animals in need.
5. Rating and Reviews for Pets: Leave and read reviews to help others make informed adoption decisions.
6. Search and Filter Pets: Filter pets by type, age, size, and other characteristics to find the perfect companion.
7. Interactive Dashboard: A user-friendly dashboard to track your adoption journey.
8. Responsive Design: Fully responsive design that works across all devices.
9. Pet Matching Algorithm: Helps users find the best pets suited to their lifestyle.
10. Pet Medical Records: Upload and maintain important health information for adopted pets.
11. Adoption History: View past adoption records and relevant details.
12. Pet Care Guides: Access educational resources on pet care and training.
13. Pet Donation System: Support animal shelters or individual pets through donations.
14. Live Chat with Pet Owners: Chat in real-time with pet owners or shelter representatives.
15. Geo-location Based Pet Listings: Discover pets available for adoption near you.
16. Video Calls for Pet Meetups: Meet your potential pet virtually before committing to adoption.
17. Pet Insurance Integration: Purchase insurance for your adopted pet through the platform.
18. Pet Adoption Events: Discover adoption events and fairs in your area.
19. Pet Foster Program: Foster pets temporarily while waiting for a permanent home.
20. Review and Feedback System: Share your adoption experience with others.
21. Pet Wishlist: Save pets to your wishlist and get notified when they become available.
22. Pet Profile Customization: Customize pet profiles to increase their adoption chances.
23. Pet Transportation Assistance: Get help with delivering your adopted pet to your home.

---

🧰 NPM Packages Used

• @stripe/react-stripe-js
• @stripe/stripe-js
• @tanstack/react-query
• @tanstack/react-table
• axios
• class-variance-authority
• clsx
• dompurify
• embla-carousel-autoplay
• firebase
• keep-react
• lottie-react
• lucide-react
• motion
• phosphor-react
• prop-types
• react
• react-datepicker
• react-dom
• react-hook-form
• react-hot-toast
• react-icons
• react-intersection-observer
• react-loading-skeleton
• react-quill
• react-router-dom
• react-select
• react-spinners
• sweetalert2
• swiper
• tailwind-merge
• tailwindcss-animate

---

🛠 Installation

Prerequisites

• Node.js and npm installed
• MongoDB connection string

---

Client Side Setup

1. Clone the client-side repository:

   git clone https://github.com/tariqul420/Kutto.git
   cd Kutto

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   VITE_API_KEY=_____________________________
   VITE_AUTH_DOMAIN=_________________________
   VITE_PROJECT_ID=__________________________
   VITE_STORAGE_BUCKET=______________________
   VITE_MESSAGE_SENDER_ID=___________________
   VITE_APP_ID=______________________________
   VITE_MEASUREMENT_ID=______________________
   VITE_IMGBB_API_KEY=_______________________
   VITE_SERVER_API_URL=______________________
   VITE_STRIPE_CLIENT_SECRET=________________

   Note: Replace the VITE_API_KEY and VITE_AUTH_DOMAIN, along with other placeholders, with actual values.

Server Side Setup

1. Clone the client-side repository:

   git clone https://github.com/tariqul420/Kutto-Server.git
   cd Kutto-Server

2. Install dependencies:

   npm install

3. Start the server:

   node index.js

   --- OR ---

   nodemon index.js

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   DATABASE_USERNAME=________________________
   DATABASE_PASSWORD=________________________
   ACCESS_TOKEN_SECRET=______________________
   STRIPE_SECRET_KEY=________________________

   Note: Replace the index.js file's mongo_uri and the .env file's DATABASE_USERNAME, DATABASE_PASSWORD, ACCESS_TOKEN_SECRET and STRIPE_SECRET_KEY with actual values.

🧑‍💻 Authors

• Tariqul Islam (Lead Developer)
• Lead Developer & Maintainer
• Connect with me on GitHub & Facebook

📸 Screenshots

1. Home Page

2. Dashboard

3. Pet Listing Page

4. Donation Campaign Page