PetConnect - Connecting Pet Owners & Lovers

Preview

- Access PetConnect: Website Link
- YouTube Video Demo: Website Link
- Repo Link: Website Link
Test Accounts
User | Password | |
---|---|---|
User 1 | shariff@events.com | shariff@events.com |
User 2 | tabithasim@gmail.com | 1234567 |

Project Overview
Problem statement: Pet owners often struggle to find opportunities for their pets to interact with others, especially for new pet owners who have not found a community.
In Singapore, where pet ownership is rising, the limited pet-friendly spaces and events leave both pets and owners feeling isolated. Without regular socialisation, pets are prone to anxiety and behavioural issues, adding stress for owners.
By fostering a community for both pets and their owners, we can ease this isolation and help pets thrive through connection.
Solution: PetConnect aims to help owners find events, organise play-dates and connect with others in their community, ensuring their pets stay active, engaged and socially fulfilled!
Features
- PetPost: A dynamic homepage featuring a feed of pet-related posts from all users, creating a vibrant hub for pet lovers to connect and share.
- Events: A dedicated page showcasing both large-scale and casual events, helping users discover and participate in community gatherings or small meet-ups. Google Maps API was integrated for ease of location filtering.
- Calendar: A personalized calendar that tracks events users have signed up for, helping them stay organised and never miss an occasion.
- Friends: A streamlined page for managing friendships, where users can view friend requests, keep track of their friends, and receive tailored friend suggestions.
- Profile: A comprehensive profile page summarizing all user activities, including personal posts, joined or created events, and a showcase of their pets.
- Chats: A real-time chat feature that allows users to connect and share content, such as posts or events, directly with friends for a more interactive experience.
Solution Architecture Overview
- For a clearer view, open the architecture diagram in GitDiagram (or zoom in on this page).

Tech Stack
Frontend
Component | Technology |
---|---|
Languages | HTML5, CSS3, JavaScript (ES6+) |
Framework | Vue 3 (SPA) with Vue Router |
UI/UX | Font Awesome icons, Custom CSS components |
Maps Integration | Google Maps Loader, Leaflet.js, OneMap API |
HTTP Client | api.js (based on Axios) for REST calls |
Backend
Component | Technology |
---|---|
Runtime | Node.js with Express.js |
API Architecture | Modular routers for posts, events, users, friends |
Middleware | Authentication verification, file upload handling |
Admin Integration | Firebase Admin SDK |
Data & Storage
Component | Technology |
---|---|
Database | Firebase Firestore (document storage) |
Media Storage | Firebase Cloud Storage (images and attachments) |
Authentication
Component | Technology |
---|---|
User Auth | Firebase Authentication with email/password |
Security | Token validation via Firebase Admin SDK |
Mapping Services
Component | Technology |
---|---|
Geolocation | Google Maps API for geocoding and location filtering |
Singapore Data | OneMap API for local mapping information |
Deployment
Component | Technology |
---|---|
Version Control | Git (GitHub) |
Hosting | Render for both frontend and backend services |