A modern and comprehensive platform for animal adoption, connecting pets with loving families
Animal Adoption Platform is a modern, full-stack web application developed as part of Module 5 (M5-PDA) of the Programadores do Amanhã Full-Stack Web Developer course. This project demonstrates the integration between frontend and backend technologies, consuming an API developed by another squad in Module 4.
Our mission is to transform lives through responsible adoption, connecting amazing animals with loving families through an intuitive, modern, and accessible digital platform.
- � Advanced Search & Filtering - Find the perfect pet with smart filters
- 🏠 Shelter Management - Comprehensive shelter partner system
- 📅 Events Platform - Adoption events with interactive calendar
- 💬 Contact Forms - Direct communication with shelters and organizers
- 📱 Responsive Design - Seamless experience across all devices
- 🌟 Modern UI/UX - Clean, intuitive interface with smooth animations
- ♿ Accessibility - WCAG compliant for inclusive user experience
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 15.3.5 |
React framework with App Router |
| React | ^19.0.0 |
UI library for component-based architecture |
| TypeScript | ^5.0.0 |
Type-safe JavaScript development |
| TailwindCSS | ^4.0.0 |
Utility-first CSS framework |
| React Hook Form | ^7.60.0 |
Performant forms with easy validation |
| Zod | ^4.0.5 |
TypeScript-first schema validation |
| Axios | ^1.10.0 |
Promise-based HTTP client |
| React Icons | ^5.5.0 |
Popular icon library for React |
| Tool | Version | Purpose |
|---|---|---|
| ESLint | ^9.0.0 |
Code linting and quality assurance |
| Tailwind Merge | ^3.3.1 |
Utility for merging Tailwind classes |
| @hookform/resolvers | ^5.1.1 |
Validation resolvers for React Hook Form |
| clsx | ^2.1.1 |
Utility for constructing className strings |
Before running this project, make sure you have:
- Node.js (version 18.0 or higher)
- npm or yarn package manager
- Git for version control
-
Clone the repository
git clone https://github.com/alissonn17/AnimalAdoption.git cd AnimalAdoption -
Install dependencies
npm install # or yarn install -
Environment Configuration
# Copy environment template cp .env.example .env.local # Edit .env.local with your API configurations NEXT_PUBLIC_API_URL=https://animaladoption-api-fdi1.onrender.com/api
-
Run Development Server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000
# Create optimized production build
npm run build
# Start production server
npm startsrc/
├── app/ # Next.js App Router
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base UI components
│ │ ├── Header.tsx # Navigation header
│ │ ├── Footer.tsx # Site footer
│ │ └── ... # Other components
│ ├── abrigo/ # Shelter management pages
│ ├── animais/ # Animal listing pages
│ ├── eventos/ # Events platform
│ ├── contato/ # Contact forms
│ ├── sobre/ # About page
│ ├── services/ # API integration services
│ ├── types/ # TypeScript type definitions
│ └── lib/ # Utility functions
├── public/ # Static assets
└── docs/ # Project documentation
This frontend application consumes the Animal Adoption API developed by our partner squad in Module 4.
API Repository: Animal Adoption API
GET /animals- Fetch available animals for adoptionGET /shelters- Retrieve shelter informationGET /events- Get adoption eventsPOST /contact- Submit contact formsGET /animals/:id- Get specific animal details
Modern landing page with hero section and featured animals
Advanced search and filtering for available pets
Comprehensive shelter partner management system
Interactive events calendar with filtering capabilities
Fully responsive design for all devices
Squad 1 - Module 5 PDA
| Avatar | Name | Role | GitHub |
|---|---|---|---|
 |
Alisson | Team Lead & Frontend Developer | @alissonn17 |
 |
Deivid Leal | Frontend Developer & UI/UX | @DeividLeal |
 |
João | Frontend Developer | @hjoao12 |
 |
João Bel | Frontend Developer | @joao17-bel |
 |
Davi Nunes | Frontend Developer | @Davinunesaz |
 |
Caio Sousa | Frontend Developer | @caiousousa |
We follow Semantic Commits and Gitmoji conventions:
# Examples of our commit structure
feat: ✨ add new animal search functionality
fix: 🐛 resolve responsive layout issues
docs: 📝 update README with API integration guide
style: 💄 improve UI components styling
refactor: ♻️ optimize API service architecture- Feature branches for all new development
- Pull requests with code review process
- Semantic commits in English
- Automated testing before merge
- Continuous deployment to Vercel
- 🌐 Production Site: Animal Adoption Platform
- 📱 Mobile Optimized: Fully responsive across all devices
- ⚡ Performance: Optimized with Next.js and Vercel Edge Network
- 📺 LinkedIn Presentation: Project Showcase
- 📋 Project Documentation: GitHub Wiki
- ✅ 5+ Semantic Commits with comprehensive project history
- ✅ Modern Stack Integration (Next.js 15, React 19, TypeScript)
- ✅ API Integration with Module 4 backend
- ✅ Responsive Design supporting all devices
- ✅ Production Deployment on Vercel platform
- ✅ Team Collaboration with 6 developers
- ✅ Professional Documentation and project structure
- 🚀 Lighthouse Score: 95+ performance rating
- 📱 Mobile Friendly: 100% responsive design
- ♿ Accessibility: WCAG 2.1 AA compliant
- 🔍 SEO Optimized: Meta tags and structured data
- ⚡ Load Time: <2s initial page load
We welcome contributions! Please see our Contributing Guidelines for details on:
- Code style and standards
- Pull request process
- Issue reporting
- Development setup
This project is licensed under the MIT License - see the LICENSE file for details.
- 🐛 Report Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
- 📧 Email: contato@animaladoption.com
Made with ❤️ by Squad 1 - Programadores do Amanhã
Transforming lives through responsible animal adoption 🐾