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 |