/pages
  /adoptable-pets
    [petId].tsx   # Pet details page
/components
  SearchBar.tsx
  PetCard.tsx
/styles
  globals.css     # Tailwind CSS configuration

/src
  /modules
    /users
      users.controller.ts
      users.service.ts
      user.entity.ts
    /pets
      pets.controller.ts
      pets.service.ts
      pet.entity.ts
    /adoption
      adoption.controller.ts
      adoption.service.ts
      adoption.entity.ts

/components
  PetList.tsx
  AdoptionForm.tsx
/screens
  HomeScreen.tsx
  PetDetailScreen.tsx

├── public/                    # Publicly accessible files (images, icons, etc.)
│   ├── images/                # Store static images for pets, logos, etc.
│   └── favicon.ico            # Site favicon
├── src/                       # Project source folder
│   ├── components/            # Reusable components
│   │   ├── Adoption/          # Adoption-related components
│   │   │   ├── AdoptionForm.tsx
│   │   │   ├── ApplicationStatus.tsx
│   │   │   ├── ApplicationList.tsx
│   │   └── Pet/               # Pet-related components
│   │       ├── PetCard.tsx    # Pet card for list display
│   │       ├── PetDetails.tsx # Detailed view of a pet
│   │       ├── PetFilters.tsx # Filtering panel for searching
│   │       └── PetList.tsx    # List view of all pets
│   ├── hooks/                 # Custom hooks
│   │   └── useFetch.ts        # Fetch data hook
│   ├── layout/                # Shared layout components
│   │   ├── Header.tsx         # Header (Navbar)
│   │   ├── Footer.tsx         # Footer component
│   │   └── Sidebar.tsx        # Admin/Sidebar menu
│   ├── pages/                 # Next.js pages (routing)
│   │   ├── api/               # API routes for server-side handling
│   │   │   ├── pets/          # API for pet operations
│   │   │   ├── users/         # API for user-related actions
│   │   ├── adoptable-pets/    # Dynamic routes for pets
│   │   │   └── [id].tsx       # Individual pet detail page
│   │   ├── account/           # User account management
│   │   │   ├── profile.tsx    # User profile management page
│   │   │   └── applications.tsx  # View user's submitted adoption applications
│   │   ├── admin/             # Admin dashboard
│   │   │   ├── index.tsx      # Admin dashboard main page
│   │   │   ├── pets.tsx       # CRUD operations for pets
│   │   │   ├── applications.tsx # Manage adoption applications
│   │   └── index.tsx          # Home page
│   │   └── adopt.tsx          # Adoption page (form submission)
│   │   └── favorites.tsx      # User's favorite pets (wishlist)
│   │   └── about.tsx          # Static About Us page
│   ├── services/              # Services for API calls
│   │   ├── petService.ts      # API calls for fetching pet data
│   │   ├── userService.ts     # User authentication and profile management services
│   │   └── applicationService.ts # Services for handling adoption applications
│   ├── styles/                # Global styles
│   │   ├── globals.css        # Global Tailwind CSS styles
│   │   └── tailwind.css       # Custom Tailwind styles (if needed)
│   ├── utils/                 # Utility functions
│   │   ├── helpers.ts         # General helper functions (e.g., formatting)
│   │   └── validators.ts      # Form validation helpers
│   └── config/                # Configuration settings
│       └── api.ts             # API base URL and config settings
├── .env.local                 # Environment variables for sensitive data
├── next.config.js             # Next.js configuration
├── tailwind.config.js         # Tailwind CSS configuration
├── postcss.config.js          # PostCSS configuration
├── tsconfig.json              # TypeScript configuration
├── package.json               # Project dependencies and scripts
└── README.md                  # Project documentation

├── src/
│   ├── common/                 # Shared resources like guards, filters, DTOs, utilities
│   │   ├── dto/                # Shared DTOs
│   │   ├── filters/            # Exception filters
│   │   ├── guards/             # Authorization guards (e.g., roles)
│   │   └── utils/              # Utility functions used across modules
│   ├── config/                 # Configuration files (e.g., environment variables)
│   │   ├── config.module.ts    # Config service for environment variables
│   │   ├── config.service.ts   # Configuration management logic
│   └── database/               # Database-related files (TypeORM, migrations, etc.)
│       ├── entities/           # Database entities for TypeORM
│       │   ├── pet.entity.ts   # Pet entity
│       │   ├── user.entity.ts  # User entity
│       │   ├── application.entity.ts # Adoption application entity
│       ├── migrations/         # TypeORM migration files
│       └── database.module.ts  # Database connection configuration
│   ├── modules/                # Core feature modules
│   │   ├── auth/               # Authentication module (JWT)
│   │   │   ├── auth.controller.ts  # Auth-related routes (login, register)
│   │   │   ├── auth.module.ts      # Auth module declaration
│   │   │   ├── auth.service.ts     # Authentication logic
│   │   │   ├── jwt.strategy.ts     # JWT Strategy for securing routes
│   │   │   ├── local.strategy.ts   # Local strategy (login with email/password)
│   │   │   └── dto/                # DTOs for login, registration, etc.
│   │   ├── users/              # User management module
│   │   │   ├── users.controller.ts # User-related routes
│   │   │   ├── users.module.ts     # User module
│   │   │   ├── users.service.ts    # User management logic (CRUD, profile updates)
│   │   │   ├── user.entity.ts      # User entity (shared with database/entities)
│   │   │   └── dto/                # User-specific DTOs (Data Transfer Objects)
│   │   ├── pets/               # Pets management module
│   │   │   ├── pets.controller.ts  # Routes for handling pet listings
│   │   │   ├── pets.module.ts      # Pet module declaration
│   │   │   ├── pets.service.ts     # Business logic for pets
│   │   │   ├── pet.entity.ts       # Pet entity (shared with database/entities)
│   │   │   └── dto/                # Pet-related DTOs (for validation)
│   │   ├── adoption/           # Adoption management module
│   │   │   ├── adoption.controller.ts  # Routes for submitting and managing applications
│   │   │   ├── adoption.module.ts      # Adoption module declaration
│   │   │   ├── adoption.service.ts     # Business logic for adoption processes
│   │   │   ├── application.entity.ts   # Application entity (shared with database/entities)
│   │   │   └── dto/                    # Adoption-related DTOs
│   │   ├── notifications/       # Notification handling (email, SMS, push notifications)
│   │   │   ├── notifications.module.ts  # Notifications module declaration
│   │   │   ├── notifications.service.ts # Notification logic (for emails, push notifications)
│   │   │   ├── email.service.ts         # Email sending service
│   │   │   └── push.service.ts          # Push notification logic (Firebase integration)
│   │   ├── admin/               # Admin-specific functionality
│   │   │   ├── admin.controller.ts  # Routes for admin operations (approving adoptions, managing pets)
│   │   │   ├── admin.module.ts      # Admin module declaration
│   │   │   └── admin.service.ts     # Admin-specific business logic
│   ├── app.module.ts            # Root application module
│   ├── main.ts                  # Entry point of the application
├── test/                        # Unit and integration tests
│   ├── pets/                    # Test files for pet module
│   │   └── pets.service.spec.ts
│   └── users/                   # Test files for user module
│       └── users.service.spec.ts
├── .env                         # Environment configuration
├── nest-cli.json                # NestJS CLI configuration
├── tsconfig.json                # TypeScript configuration
└── package.json                 # Node.js dependencies and scripts

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
import { UsersService } from '../users/users.service';
import { LoginDto, RegisterDto } from './dto';

@Injectable()
export class AuthService {
  constructor(
    private usersService: UsersService,
    private jwtService: JwtService,
  ) {}

  async login(loginDto: LoginDto) {
    const user = await this.usersService.validateUser(
      loginDto.email,
      loginDto.password,
    );
    const payload = { username: user.username, sub: user.id };
    return {
      access_token: this.jwtService.sign(payload),
    };
  }

  async register(registerDto: RegisterDto) {
    const newUser = await this.usersService.create(registerDto);
    return this.login({ email: newUser.email, password: registerDto.password });
  }
}

import { Controller, Get, Post, Body, Param, Put, Delete } from '@nestjs/common';
import { PetsService } from './pets.service';
import { CreatePetDto, UpdatePetDto } from './dto';

@Controller('pets')
export class PetsController {
  constructor(private readonly petsService: PetsService) {}

  @Get()
  findAll() {
    return this.petsService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.petsService.findOne(id);
  }

  @Post()
  create(@Body() createPetDto: CreatePetDto) {
    return this.petsService.create(createPetDto);
  }

  @Put(':id')
  update(@Param('id') id: string, @Body() updatePetDto: UpdatePetDto) {
    return this.petsService.update(id, updatePetDto);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.petsService.remove(id);
  }
}

import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Pet {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  breed: string;

  @Column()
  age: number;

  @Column()
  location: string;

  @Column({ default: true })
  isAvailable: boolean;
}

├── public/                    
│   ├── images/                
│   └── favicon.ico            
├── src/                       
│   ├── components/            
│   │   ├── Adoption/          
│   │   │   ├── AdoptionForm.tsx
│   │   │   ├── ApplicationStatus.tsx
│   │   │   ├── ApplicationList.tsx
│   │   └── Pet/               
│   │       ├── PetCard.tsx    
│   │       ├── PetDetails.tsx 
│   │       ├── PetFilters.tsx 
│   │       └── PetList.tsx    

import { useState } from 'react';

const AdoptionForm = ({ petId }: { petId: string }) => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // Send data to the server
    await fetch('/api/adoptions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ ...formData, petId }),
    });
    setSubmitted(true);
  };

  return (
    <div className="max-w-lg mx-auto">
      <h2 className="text-2xl font-bold">Adopt {petId}</h2>
      {submitted ? (
        <p className="text-green-500">Your application has been submitted!</p>
      ) : (
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label htmlFor="name" className="block text-sm font-medium">Name</label>
            <input
              type="text"
              id="name"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              className="mt-1 p-2 w-full border rounded-md"
              required
            />
          </div>
          <div className="mb-4">
            <label htmlFor="email" className="block text-sm font-medium">Email</label>
            <input
              type="email"
              id="email"
              value={formData.email}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              className="mt-1 p-2 w-full border rounded-md"
              required
            />
          </div>
          <div className="mb-4">
            <label htmlFor="message" className="block text-sm font-medium">Why do you want to adopt this pet?</label>
            <textarea
              id="message"
              value={formData.message}
              onChange={(e) => setFormData({ ...formData, message: e.target.value })}
              className="mt-1 p-2 w-full border rounded-md"
              required
            />
          </div>
          <button type="submit" className="bg-blue-500 text-white p-2 rounded-md">
            Submit Application
          </button>
        </form>
      )}
    </div>
  );
};

export default AdoptionForm;

const ApplicationStatus = ({ status }: { status: string }) => {
  return (
    <div className="border p-4 rounded-lg bg-gray-50">
      <h3 className="font-bold text-xl mb-2">Application Status</h3>
      <p className={`text-${status === 'Approved' ? 'green' : 'red'}-500`}>
        {status === 'Approved' ? 'Your application has been approved!' : 'Your application is still under review.'}
      </p>
    </div>
  );
};

export default ApplicationStatus;

import { useEffect, useState } from 'react';

interface Application {
  id: string;
  petName: string;
  status: string;
}

const ApplicationList = () => {
  const [applications, setApplications] = useState<Application[]>([]);

  useEffect(() => {
    // Fetch user applications from the backend
    fetch('/api/adoptions')
      .then((response) => response.json())
      .then((data) => setApplications(data));
  }, []);

  return (
    <div className="max-w-3xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Your Adoption Applications</h2>
      {applications.length === 0 ? (
        <p>No applications found.</p>
      ) : (
        <ul>
          {applications.map((application) => (
            <li key={application.id} className="mb-4 border p-4 rounded-lg">
              <h3 className="font-bold">{application.petName}</h3>
              <p>Status: {application.status}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ApplicationList;

import Link from 'next/link';

interface PetCardProps {
  pet: {
    id: string;
    name: string;
    breed: string;
    age: number;
    imageUrl: string;
    location: string;
  };
}

const PetCard = ({ pet }: PetCardProps) => {
  return (
    <div className="border rounded-lg overflow-hidden shadow-lg">
      <img src={pet.imageUrl} alt={pet.name} className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="text-xl font-bold">{pet.name}</h3>
        <p>Breed: {pet.breed}</p>
        <p>Age: {pet.age} years</p>
        <p>Location: {pet.location}</p>
        <Link href={`/adoptable-pets/${pet.id}`}>
          <a className="text-blue-500 mt-2 inline-block">View Details</a>
        </Link>
      </div>
    </div>
  );
};

export default PetCard;

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import AdoptionForm from '../Adoption/AdoptionForm';

interface PetDetailsProps {
  id: string;
  name: string;
  breed: string;
  age: number;
  description: string;
  imageUrl: string;
  location: string;
}

const PetDetails = () => {
  const router = useRouter();
  const { id } = router.query;
  const [pet, setPet] = useState<PetDetailsProps | null>(null);

  useEffect(() => {
    if (id) {
      // Fetch pet details from the backend
      fetch(`/api/pets/${id}`)
        .then((response) => response.json())
        .then((data) => setPet(data));
    }
  }, [id]);

  if (!pet) return <p>Loading...</p>;

  return (
    <div className="max-w-4xl mx-auto mt-8">
      <img src={pet.imageUrl} alt={pet.name} className="w-full h-96 object-cover rounded-md" />
      <div className="mt-4">
        <h2 className="text-3xl font-bold">{pet.name}</h2>
        <p className="text-lg">Breed: {pet.breed}</p>
        <p className="text-lg">Age: {pet.age} years</p>
        <p className="mt-4">{pet.description}</p>
        <p className="mt-4">Location: {pet.location}</p>
        <AdoptionForm petId={pet.id} />
      </div>
    </div>
  );
};

export default PetDetails;

import { useState } from 'react';

const PetFilters = ({ onFilter }: { onFilter: (filters: any) => void }) => {
  const [filters, setFilters] = useState({
    breed: '',
    location: '',
    age: '',
  });

  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    setFilters({
      ...filters,
      [e.target.name]: e.target.value,
    });
  };

  const handleApplyFilters = () => {
    onFilter(filters);
  };

  return (
    <div className="border p-4 rounded-lg bg-gray-50">
      <h3 className="font-bold mb-4">Filter Pets</h3>
      <div className="mb-4">
        <label htmlFor="breed"

 className="block text-sm font-medium">Breed</label>
        <input
          type="text"
          id="breed"
          name="breed"
          value={filters.breed}
          onChange={handleFilterChange}
          className="w-full border p-2 rounded-md"
        />
      </div>
      <div className="mb-4">
        <label htmlFor="location" className="block text-sm font-medium">Location</label>
        <input
          type="text"
          id="location"
          name="location"
          value={filters.location}
          onChange={handleFilterChange}
          className="w-full border p-2 rounded-md"
        />
      </div>
      <div className="mb-4">
        <label htmlFor="age" className="block text-sm font-medium">Age</label>
        <input
          type="number"
          id="age"
          name="age"
          value={filters.age}
          onChange={handleFilterChange}
          className="w-full border p-2 rounded-md"
        />
      </div>
      <button
        onClick={handleApplyFilters}
        className="bg-blue-500 text-white p-2 rounded-md w-full"
      >
        Apply Filters
      </button>
    </div>
  );
};

export default PetFilters;

import { useEffect, useState } from 'react';
import PetCard from './PetCard';

const PetList = () => {
  const [pets, setPets] = useState([]);
  const [filters, setFilters] = useState({});

  useEffect(() => {
    // Fetch the list of pets from the backend
    fetch('/api/pets')
      .then((response) => response.json())
      .then((data) => setPets(data));
  }, []);

  const handleFilter = (filterValues: any) => {
    setFilters(filterValues);
    // You can also re-fetch pets based on filters using an API call
  };

  return (
    <div>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        {pets.map((pet) => (
          <PetCard key={pet.id} pet={pet} />
        ))}
      </div>
    </div>
  );
};

export default PetList;

├── src/
│   ├── hooks/                 # Custom hooks
│   │   └── useFetch.ts        # Fetch data hook
│   ├── layout/                # Shared layout components
│   │   ├── Header.tsx         # Header (Navbar)
│   │   ├── Footer.tsx         # Footer component
│   │   └── Sidebar.tsx        # Admin/Sidebar menu
│   ├── pages/                 # Next.js pages (routing)
│   │   ├── api/               # API routes for server-side handling
│   │   │   ├── pets/          # API for pet operations
│   │   │   ├── users/         # API for user-related actions

import { useEffect, useState } from 'react';

const useFetch = (url: string) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error: any) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

import Link from 'next/link';

const Header = () => {
  return (
    <header className="bg-blue-500 p-4 text-white shadow-md">
      <div className="container mx-auto flex justify-between items-center">
        <h1 className="text-2xl font-bold">
          <Link href="/">Pet Adoption Platform</Link>
        </h1>
        <nav>
          <ul className="flex space-x-4">
            <li><Link href="/">Home</Link></li>
            <li><Link href="/adoptable-pets">Pets</Link></li>
            <li><Link href="/about">About Us</Link></li>
            <li><Link href="/account">Account</Link></li>
          </ul>
        </nav>
      </div>
    </header>
  );
};

export default Header;

const Footer = () => {
  return (
    <footer className="bg-gray-800 text-white p-4">
      <div className="container mx-auto text-center">
        <p>&copy; {new Date().getFullYear()} Pet Adoption Platform</p>
        <ul className="flex justify-center space-x-4 mt-2">
          <li><a href="/privacy">Privacy Policy</a></li>
          <li><a href="/terms">Terms of Service</a></li>
          <li><a href="/contact">Contact Us</a></li>
        </ul>
      </div>
    </footer>
  );
};

export default Footer;

import Link from 'next/link';

const Sidebar = () => {
  return (
    <aside className="bg-gray-100 w-64 p-4 shadow-md">
      <nav>
        <ul>
          <li className="mb-4"><Link href="/admin">Dashboard</Link></li>
          <li className="mb-4"><Link href="/admin/pets">Manage Pets</Link></li>
          <li className="mb-4"><Link href="/admin/applications">Adoption Applications</Link></li>
          <li className="mb-4"><Link href="/admin/users">Manage Users</Link></li>
        </ul>
      </nav>
    </aside>
  );
};

export default Sidebar;

import { NextApiRequest, NextApiResponse } from 'next';

// Mock data for demo purposes
const pets = [
  { id: 1, name: 'Max', breed: 'Labrador', age: 3, location: 'New York' },
  { id: 2, name: 'Bella', breed: 'Poodle', age: 2, location: 'Los Angeles' },
  { id: 3, name: 'Charlie', breed: 'Beagle', age: 4, location: 'Chicago' },
];

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    // Retrieve list of all pets
    res.status(200).json(pets);
  } else if (req.method === 'POST') {
    // Add a new pet (for simplicity, we don't save this anywhere)
    const newPet = req.body;
    pets.push(newPet);
    res.status(201).json(newPet);
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

import { NextApiRequest, NextApiResponse } from 'next';

// Mock data for demo purposes
const pets = [
  { id: 1, name: 'Max', breed: 'Labrador', age: 3, location: 'New York' },
  { id: 2, name: 'Bella', breed: 'Poodle', age: 2, location: 'Los Angeles' },
  { id: 3, name: 'Charlie', breed: 'Beagle', age: 4, location: 'Chicago' },
];

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const { id } = req.query;
  const pet = pets.find((p) => p.id === Number(id));

  if (!pet) {
    res.status(404).json({ message: 'Pet not found' });
    return;
  }

  if (req.method === 'GET') {
    // Return specific pet details
    res.status(200).json(pet);
  } else if (req.method === 'PUT') {
    // Update pet details
    const updatedPet = { ...pet, ...req.body };
    pets[pets.findIndex((p) => p.id === Number(id))] = updatedPet;
    res.status(200).json(updatedPet);
  } else if (req.method === 'DELETE') {
    // Delete pet
    const index = pets.findIndex((p) => p.id === Number(id));
    pets.splice(index, 1);
    res.status(204).end();
  } else {
    res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

import { NextApiRequest, NextApiResponse } from 'next';

// Mock user data
const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'user' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'admin' },
];

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    // Retrieve all users
    res.status(200).json(users);
  } else if (req.method === 'POST') {
    // Register a new user (for simplicity, we don't persist the user)
    const newUser = req.body;
    users.push(newUser);
    res.status(201).json(newUser);
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

├── src/
│   ├── pages/
│   │   ├── adoptable-pets/    # Dynamic routes for pets
│   │   │   └── [id].tsx       # Individual pet detail page
│   │   ├── account/           # User account management
│   │   │   ├── profile.tsx    # User profile management page
│   │   │   └── applications.tsx  # View user's submitted adoption applications
│   │   ├── admin/             # Admin dashboard
│   │   │   ├── index.tsx      # Admin dashboard main page
│   │   │   ├── pets.tsx       # CRUD operations for pets
│   │   │   ├── applications.tsx # Manage adoption applications

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import AdoptionForm from '../../components/Adoption/AdoptionForm';

const PetDetails = () => {
  const router = useRouter();
  const { id } = router.query; // Dynamic route parameter
  const [pet, setPet] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (id) {
      // Fetch the pet details by ID
      fetch(`/api/pets/${id}`)
        .then((res) => res.json())
        .then((data) => {
          setPet(data);
          setLoading(false);
        });
    }
  }, [id]);

  if (loading) return <p>Loading...</p>;
  if (!pet) return <p>Pet not found</p>;

  return (
    <div className="container mx-auto p-8">
      <div className="flex flex-col items-center">
        <img src={pet.imageUrl} alt={pet.name} className="w-1/2 rounded-md shadow-lg" />
        <h2 className="text-3xl font-bold mt-4">{pet.name}</h2>
        <p className="text-xl">Breed: {pet.breed}</p>
        <p className="text-xl">Age: {pet.age} years</p>
        <p className="text-xl">Location: {pet.location}</p>
        <p className="text-md mt-4">{pet.description}</p>

        {/* Adoption Form */}
        <div className="mt-6 w-full md:w-1/2">
          <AdoptionForm petId={id as string} />
        </div>
      </div>
    </div>
  );
};

export default PetDetails;

import { useState, useEffect } from 'react';

const Profile = () => {
  const [profileData, setProfileData] = useState({
    name: '',
    email: '',
  });
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Fetch user profile data from the backend
    fetch('/api/users/me')
      .then((res) => res.json())
      .then((data) => {
        setProfileData(data);
        setLoading(false);
      });
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setProfileData({
      ...profileData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // Update user profile data
    const response = await fetch('/api/users/me', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(profileData),
    });
    const result = await response.json();
    setMessage(result.message || 'Profile updated successfully.');
  };

  if (loading) return <p>Loading profile...</p>;

  return (
    <div className="container mx-auto p-8">
      <h2 className="text-2xl font-bold mb-4">Your Profile</h2>
      {message && <p className="text-green-500 mb-4">{message}</p>}
      <form onSubmit={handleSubmit}>
        <div className="mb-4">
          <label htmlFor="name" className="block text-sm font-medium">Name</label>
          <input
            type="text"
            id="name"
            name="name"
            value={profileData.name}
            onChange={handleChange}
            className="w-full p-2 border rounded-md"
          />
        </div>
        <div className="mb-4">
          <label htmlFor="email" className="block text-sm font-medium">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            value={profileData.email}
            onChange={handleChange}
            className="w-full p-2 border rounded-md"
          />
        </div>
        <button
          type="submit"
          className="bg-blue-500 text-white p-2 rounded-md"
        >
          Save Changes
        </button>
      </form>
    </div>
  );
};

export default Profile;

import { useEffect, useState } from 'react';

interface Application {
  id: string;
  petName: string;
  status: string;
}

const Applications = () => {
  const [applications, setApplications] = useState<Application[]>([]);

  useEffect(() => {
    // Fetch the user's adoption applications
    fetch('/api/adoptions/me')
      .then((res) => res.json())
      .then((data) => setApplications(data));
  }, []);

  return (
    <div className="container mx-auto p-8">
      <h2 className="text-2xl font-bold mb-4">Your Adoption Applications</h2>
      {applications.length === 0 ? (
        <p>No applications found.</p>
      ) : (
        <ul>
          {applications.map((application) => (
            <li key={application.id} className="mb-4 p-4 border rounded-lg">
              <h3 className="font-bold">Pet: {application.petName}</h3>
              <p>Status: {application.status}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Applications;

import Link from 'next/link';

const AdminDashboard = () => {
  return (
    <div className="container mx-auto p-8">
      <h2 className="text-3xl font-bold mb-6">Admin Dashboard</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <Link href="/admin/pets">
          <a className="bg-blue-500 text-white p-4 rounded-md shadow-lg text-center">
            Manage Pets
          </a>
        </Link>
        <Link href="/admin/applications">
          <a className="bg-blue-500 text-white p-4 rounded-md shadow-lg text-center">
            Manage Applications
          </a>
        </Link>
        <Link href="/admin/users">
          <a className="bg-blue-500 text-white p-4 rounded-md shadow-lg text-center">
            Manage Users
          </a>
        </Link>
      </div>
    </div>
  );
};

export default AdminDashboard;

import { useEffect, useState } from 'react';

interface Pet {
  id: string;
  name: string;
  breed: string;
  age: number;
  location: string;
}

const AdminPets = () => {
  const [pets, setPets] = useState<Pet[]>([]);

  useEffect(() => {
    // Fetch the list of pets
    fetch('/api/pets')
      .then((res) => res.json())
      .then((data) => setPets(data));
  }, []);

  const handleDelete = async (id: string) => {
    await fetch(`/api/pets/${id}`, { method: 'DELETE' });
    setPets(pets.filter((pet) => pet.id !== id));
  };

  return (
    <div className="container mx-auto p-8">
      <h2 className="text-2xl font-bold mb-4">Manage Pets</h2>
      <ul>
        {pets.map((pet) => (
          <li key={pet.id} className="mb-4 p-4 border rounded-lg">
            <h3

 className="font-bold">{pet.name}</h3>
            <p>Breed: {pet.breed}</p>
            <p>Age: {pet.age} years</p>
            <p>Location: {pet.location}</p>
            <button
              onClick={() => handleDelete(pet.id)}
              className="bg-red-500 text-white p-2 rounded-md mt-2"
            >
              Delete Pet
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AdminPets;

import { useEffect, useState } from 'react';

interface Application {
  id: string;
  petName: string;
  applicantName: string;
  status: string;
}

const AdminApplications = () => {
  const [applications, setApplications] = useState<Application[]>([]);

  useEffect(() => {
    // Fetch all adoption applications
    fetch('/api/adoptions')
      .then((res) => res.json())
      .then((data) => setApplications(data));
  }, []);

  const handleStatusChange = async (id: string, status: string) => {
    await fetch(`/api/adoptions/${id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ status }),
    });
    setApplications(
      applications.map((app) =>
        app.id === id ? { ...app, status } : app
      )
    );
  };

  return (
    <div className="container mx-auto p-8">
      <h2 className="text-2xl font-bold mb-4">Manage Applications</h2>
      <ul>
        {applications.map((application) => (
          <li key={application.id} className="mb-4 p-4 border rounded-lg">
            <h3 className="font-bold">Pet: {application.petName}</h3>
            <p>Applicant: {application.applicantName}</p>
            <p>Status: {application.status}</p>
            <div className="mt-2">
              <button
                onClick={() => handleStatusChange(application.id, 'Approved')}
                className="bg-green-500 text-white p-2 rounded-md mr-2"
              >
                Approve
              </button>
              <button
                onClick={() => handleStatusChange(application.id, 'Rejected')}
                className="bg-red-500 text-white p-2 rounded-md"
              >
                Reject
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AdminApplications;

├── src/
│   ├── pages/
│   │   └── index.tsx          # Home page
│   │   └── adopt.tsx          # Adoption page (form submission)
│   │   └── favorites.tsx      # User's favorite pets (wishlist)
│   │   └── about.tsx          # Static About Us page
│   ├── services/              # Services for API calls
│   │   ├── petService.ts      # API calls for fetching pet data
│   │   ├── userService.ts     # User authentication and profile management services
│   │   └── applicationService.ts # Services for handling adoption applications
│   ├── styles/                # Global styles
│   │   ├── globals.css        # Global Tailwind CSS styles
│   │   └── tailwind.css       # Custom Tailwind styles (if needed)
│   ├── utils/                 # Utility functions
│   │   ├── helpers.ts         # General helper functions (e.g., formatting)
│   │   └── validators.ts      # Form validation helpers
│   └── config/                # Configuration settings
│       └── api.ts             # API base URL and config settings

import PetList from '../components/Pet/PetList';

const HomePage = () => {
  return (
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-8">Welcome to the Pet Adoption Platform</h1>
      <p className="mb-4">
        Find your perfect pet companion by browsing through our adoptable pets.
      </p>
      <PetList />
    </div>
  );
};

export default HomePage;

import { useRouter } from 'next/router';
import AdoptionForm from '../components/Adoption/AdoptionForm';

const AdoptionPage = () => {
  const router = useRouter();
  const { petId } = router.query;

  return (
    <div className="container mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">Adopt Your New Best Friend</h1>
      {petId ? (
        <AdoptionForm petId={petId as string} />
      ) : (
        <p>Select a pet to adopt from our listings.</p>
      )}
    </div>
  );
};

export default AdoptionPage;

import { useState, useEffect } from 'react';
import PetCard from '../components/Pet/PetCard';

const FavoritesPage = () => {
  const [favorites, setFavorites] = useState([]);

  useEffect(() => {
    // Fetch user's favorite pets
    fetch('/api/users/favorites')
      .then((res) => res.json())
      .then((data) => setFavorites(data));
  }, []);

  return (
    <div className="container mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">Your Favorite Pets</h1>
      {favorites.length === 0 ? (
        <p>No favorite pets added yet.</p>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {favorites.map((pet) => (
            <PetCard key={pet.id} pet={pet} />
          ))}
        </div>
      )}
    </div>
  );
};

export default FavoritesPage;

const AboutPage = () => {
  return (
    <div className="container mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">About Us</h1>
      <p>
        Welcome to our Pet Adoption Platform, where we help find loving homes
        for pets in need. Our mission is to connect pets with people looking to
        adopt, fostering a community of pet lovers.
      </p>
      <p className="mt-4">
        We work with multiple shelters and rescues to ensure every pet finds a
        home. Join us in our journey to help pets find their forever homes!
      </p>
    </div>
  );
};

export default AboutPage;

export const fetchPets = async () => {
  const response = await fetch('/api/pets');
  if (!response.ok) {
    throw new Error('Failed to fetch pets');
  }
  return response.json();
};

export const fetchPetById = async (id: string) => {
  const response = await fetch(`/api/pets/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch pet with id: ${id}`);
  }
  return response.json();
};

export const fetchUserProfile = async () => {
  const response = await fetch('/api/users/me');
  if (!response.ok) {
    throw new Error('Failed to fetch user profile');
  }
  return response.json();
};

export const updateUserProfile = async (data: any) => {
  const response = await fetch('/api/users/me', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  if (!response.ok) {
    throw new Error('Failed to update profile');
  }
  return response.json();
};

export const fetchUserFavorites = async () => {
  const response = await fetch('/api/users/favorites');
  if (!response.ok) {
    throw new Error('Failed to fetch user favorites');
  }
  return response.json();
};

export const submitAdoptionApplication = async (data: any) => {
  const response = await fetch('/api/adoptions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  if (!response.ok) {
    throw new Error('Failed to submit adoption application');
  }
  return response.json();
};

export const fetchUserApplications = async () => {
  const response = await fetch('/api/adoptions/me');
  if (!response.ok) {
    throw new Error('Failed to fetch adoption applications');
  }
  return response.json();
};

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom global styles can be added here */
body {
  font-family: 'Inter', sans-serif;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Tailwind components or variants */

export const formatDate = (date: string) => {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };
  return new Date(date).toLocaleDateString(undefined, options);
};

export const validateEmail = (email: string) => {
  const re = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  return re.test(email);
};

export const validateRequired = (value: string) => {
  return value.trim() !== '';
};

const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000';

export const getApiUrl = (path: string) => `${apiBaseUrl}${path}`;

├── src/
│   ├── common/                 # Shared resources like guards, filters, DTOs, utilities
│   │   ├── dto/                # Shared DTOs
│   │   ├── filters/            # Exception filters
│   │   ├── guards/             # Authorization guards (e.g., roles)
│   │   └── utils/              # Utility functions used across modules
│   ├── config/                 # Configuration files (e.g., environment variables)
│   │   ├── config.module.ts    # Config service for environment variables
│   │   ├── config.service.ts   # Configuration management logic
│   └── database/               # Database-related files (TypeORM, migrations, etc.)
│       ├── entities/           # Database entities for TypeORM
│       │   ├── pet.entity.ts   # Pet entity
│       │   ├── user.entity.ts  # User entity
│       │   ├── application.entity.ts # Adoption application entity
│       ├── migrations/         # TypeORM migration files
│       └── database.module.ts  # Database connection configuration

export class CreatePetDto {
  readonly name: string;
  readonly breed: string;
  readonly age: number;
  readonly location: string;
}

export class CreateUserDto {
  readonly email: string;
  readonly password: string;
  readonly name: string;
}

export class CreateApplicationDto {
  readonly petId: number;
  readonly userId: number;
  readonly message: string;
}

import { ExceptionFilter, Catch, ArgumentsHost, HttpException, HttpStatus } from '@nestjs/common';

@Catch()
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();
    const request = ctx.getRequest();
    const status = exception instanceof HttpException
      ? exception.getStatus()
      : HttpStatus.INTERNAL_SERVER_ERROR;

    response.status(status).json({
      statusCode: status,
      timestamp: new Date().toISOString(),
      path: request.url,
    });
  }
}

import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
import { Reflector } from '@nestjs/core';
import { Role } from '../user/user.entity'; // Assume roles are defined in the User entity

@Injectable()
export class RolesGuard implements CanActivate {
  constructor(private reflector: Reflector) {}

  canActivate(context: ExecutionContext): boolean {
    const roles = this.reflector.get<Role[]>('roles', context.getHandler());
    if (!roles) {
      return true;
    }
    const request = context.switchToHttp().getRequest();
    const user = request.user;
    return roles.includes(user.role);
  }
}

import * as bcrypt from 'bcrypt';

export const hashPassword = async (password: string): Promise<string> => {
  const salt = await bcrypt.genSalt();
  return await bcrypt.hash(password, salt);
};

export const comparePassword = async (password: string, hash: string): Promise<boolean> => {
  return await bcrypt.compare(password, hash);
};

import { Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
      envFilePath: ['.env'],
    }),
  ],
  providers: [ConfigService],
  exports: [ConfigService],
})
export class AppConfigModule {}

import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';

@Injectable()
export class AppConfigService {
  constructor(private configService: ConfigService) {}

  get databaseHost(): string {
    return this.configService.get<string>('DATABASE_HOST');
  }

  get databasePort(): number {
    return +this.configService.get<string>('DATABASE_PORT');
  }

  get databaseUser(): string {
    return this.configService.get<string>('DATABASE_USER');
  }

  get databasePassword(): string {
    return this.configService.get<string>('DATABASE_PASSWORD');
  }

  get databaseName(): string {
    return this.configService.get<string>('DATABASE_NAME');
  }
}