StudySpot is a Vue + Firebase web app that helps NUS students find suitable study spaces on campus using real-time, crowdsourced updates. Users can browse locations on an interactive Leaflet map, view recent noise and crowd conditions, and submit their own observations to help others decide where to study.
- Interactive campus map with study location markers
- Real-time submission updates from Firebase Firestore
- Noise rating and crowd level submissions for each location
- Location drawer showing average rating, latest comment, submission count, and recent updates
- Filters for noise level and location type
- Search and sorting for faster discovery
- Basic moderation flow for flagging inaccurate noise comments
- Vue 3 with Composition API
- Vite
- Firebase Firestore
- Leaflet and OpenStreetMap
src/components: UI components such as the map, drawer, filters, form, and submission listsrc/composables: shared reactive logic, including Firestore subscriptionssrc/data: static campus location metadatasrc/utils: helper functions for ratings, sorting, and time formatting
- Install dependencies with
npm install - Create a
.env.localfile with your Firebase configuration - Start the development server with
npm run dev
- Submission data is stored in the
submissionscollection in Firestore - The app listens for live updates with
onSnapshot - Firestore security rules are defined in
firestore.rules