PetConnect - Connecting Pet Owners & Lovers

Frontend
Backend
Vue.js
Firebase
ExpressJS
JavaScript
NoSQL
Web Application
PetConnect - Connecting Pet Owners & Lovers

Preview

PetConnect web application demo

Test Accounts


petconnect-logo

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

petconnect-mermaid

Tech Stack

Frontend

ComponentTechnology
LanguagesHTML5, CSS3, JavaScript (ES6+)
FrameworkVue 3 (SPA) with Vue Router
UI/UXFont Awesome icons, Custom CSS components
Maps IntegrationGoogle Maps Loader, Leaflet.js, OneMap API
HTTP Clientapi.js (based on Axios) for REST calls

Backend

ComponentTechnology
RuntimeNode.js with Express.js
API ArchitectureModular routers for posts, events, users, friends
MiddlewareAuthentication verification, file upload handling
Admin IntegrationFirebase Admin SDK

Data & Storage

ComponentTechnology
DatabaseFirebase Firestore (document storage)
Media StorageFirebase Cloud Storage (images and attachments)

Authentication

ComponentTechnology
User AuthFirebase Authentication with email/password
SecurityToken validation via Firebase Admin SDK

Mapping Services

ComponentTechnology
GeolocationGoogle Maps API for geocoding and location filtering
Singapore DataOneMap API for local mapping information

Deployment

ComponentTechnology
Version ControlGit (GitHub)
HostingRender for both frontend and backend services