A modern, full-stack web application for pet adoption built with the MERN stack, featuring a responsive design and real-time functionality.

• React 18 - Modern React with hooks and concurrent features
• Vite - Lightning-fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Router v6 - Client-side routing
• Axios - HTTP client for API requests
• React Query/TanStack Query - Server state management
• React Hook Form - Form handling and validation
• Framer Motion - Animation library

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - Authentication and authorization
• Bcrypt - Password hashing
• Multer - File upload handling
• Cloudinary - Image storage and optimization

• ESLint - Code linting
• Prettier - Code formatting
• Nodemon - Development server auto-restart
• Concurrently - Run multiple commands simultaneously

• 🔐 User authentication (register, login, logout)
• 👤 User profile management
• 🐕 Browse available pets with advanced filtering
• 🔍 Search pets by breed, age, location, and type
• ❤️ Add pets to favorites/wishlist
• 📝 Submit adoption applications
• 💬 Real-time messaging with shelters
• 📱 Responsive design for all devices

• 🏠 Shelter registration and management
• 🐾 Add, edit, and manage pet listings
• 📊 Dashboard with adoption statistics
• 📋 Manage adoption applications
• 👥 User management
• 📸 Image upload and management

• 🔒 JWT-based authentication
• 🛡️ Input validation and sanitization
• 📱 Mobile-first responsive design
• ⚡ Optimized performance with lazy loading
• 🎨 Modern UI with Tailwind CSS
• 🔄 Real-time updates

Before running this project, make sure you have:

• Node.js (v18.0.0 or higher)
• npm (v8.0.0 or higher) or yarn
• MongoDB (v5.0 or higher)
• Git

git clone https://github.com/yourusername/pet-adoption-platform.git
cd pet-adoption-platform

npm install

cd client
npm install
cd ..

cd server
npm install
cd ..

Create .env files in both client and server directories:

# Database
MONGO_URI=mongodb://localhost:27017/pet-adoption

# JWT
JWT_SECRET=your-super-secret-jwt-key
JWT_EXPIRE=7d

# Cloudinary (for image uploads)
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

# Email (optional - for notifications)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=[email protected]
EMAIL_PASS=your-app-password

# Server
PORT=5000
NODE_ENV=development

VITE_API_URL=http://localhost:5000/api
VITE_CLOUDINARY_UPLOAD_PRESET=your-upload-preset

Make sure MongoDB is running on your system:

# Start MongoDB (if installed locally)
mongod

# Or use MongoDB Atlas (cloud)
# Update MONGO_URI in server/.env with your Atlas connection string

npm run dev

Backend (Terminal 1):

cd server
npm run dev

Frontend (Terminal 2):

cd client
npm run dev

# Build frontend
cd client
npm run build

# Start production server
cd ../server
npm start

pet-adoption-platform/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # Reusable components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom hooks
│   │   ├── context/       # React context
│   │   ├── services/      # API services
│   │   ├── utils/         # Utility functions
│   │   ├── assets/        # Images, icons, etc.
│   │   └── styles/        # Global styles
│   ├── package.json
│   ├── vite.config.js
│   └── tailwind.config.js
├── server/                # Node.js backend
│   ├── controllers/       # Route controllers
│   ├── models/           # Mongoose models
│   ├── routes/           # API routes
│   ├── middleware/       # Custom middleware
│   ├── utils/            # Utility functions
│   ├── config/           # Configuration files
│   └── package.json
├── package.json          # Root package.json
└── README.md

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user
• PUT /api/auth/profile - Update profile

• GET /api/pets - Get all pets (with filters)
• GET /api/pets/:id - Get single pet
• POST /api/pets - Create pet (shelter only)
• PUT /api/pets/:id - Update pet (shelter only)
• DELETE /api/pets/:id - Delete pet (shelter only)

• POST /api/adoptions - Submit adoption application
• GET /api/adoptions - Get user's applications
• PUT /api/adoptions/:id - Update application status

• POST /api/favorites/:petId - Add to favorites
• DELETE /api/favorites/:petId - Remove from favorites
• GET /api/favorites - Get user's favorites

• PetCard - Display pet information
• SearchFilters - Advanced pet filtering
• AdoptionForm - Adoption application form
• UserDashboard - User profile and applications
• ShelterDashboard - Shelter management interface
• ImageUpload - Drag & drop image upload
• LoadingSpinner - Loading states
• Modal - Reusable modal component

// tailwind.config.js
module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#3b82f6',
          600: '#2563eb',
        },
      },
    },
  },
  plugins: [],
}

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
      },
    },
  },
})

# Run frontend tests
cd client
npm run test

# Run backend tests
cd server
npm run test

1. Build the project: npm run build
2. Deploy the dist folder
3. Set environment variables in deployment platform

1. Set environment variables
2. Deploy from GitHub repository
3. Ensure MongoDB connection is configured

# Install Railway CLI
npm install -g @railway/cli

# Login and deploy
railway login
railway init
railway up

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Your Name - Initial work - YourGitHub

• Pet shelter organizations for inspiration
• Open source community for amazing tools
• Contributors and testers

If you have any questions or need help, please:

• Open an issue on GitHub
• Contact: [email protected]

Made with ❤️ for our furry friends 🐕🐱