An interactive map application to help University of Toronto students find the perfect study spot on campus. Browse 20+ curated study locations including libraries, cafes, academic buildings, and outdoor spaces.
🔗 Live Demo: https://studyspotstoronto.vercel.app/
- 🗺️ Interactive Google Maps - Visual map centered on UofT campus with color-coded location markers
- 🎯 Smart Filtering - Filter locations by type (Libraries, Cafés, Buildings, Outdoor) or T-Card requirement
- 📍 20+ Study Locations - Carefully curated spots across St. George campus
- 📱 Detailed Information Panel - Slide-out panel with comprehensive spot details:
- Operating hours
- Number of floors
- T-Card access requirements
- Noise level indicators
- Seating arrangements
- WiFi quality
- 🎨 Clean, Modern UI - Built with Tailwind CSS for a responsive, polished experience
- 🔴🟠🔵🟢 Color-Coded Markers:
- Red: Libraries
- Orange: Cafés
- Blue: Academic Buildings
- Green: Outdoor Spaces
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4
- Maps: Google Maps JavaScript API
- Maps Integration: @googlemaps/react-wrapper
- Icons: Font Awesome
- Deployment: Vercel
- Node.js 18+ and npm
- Google Maps API key (Get one here)
- Clone the repository:
git clone https://github.com/oliverbisbee/studyspots.git
cd studyspots- Install dependencies:
npm install- Create a
.env.localfile in the root directory:
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
studyspots/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page with filter state
│ ├── globals.css # Global styles and Tailwind imports
│ └── favicon.ico
├── components/
│ ├── map.tsx # Google Maps component with markers
│ ├── SidePanel.tsx # Location details slide-out panel
│ ├── FilterButtons.tsx # Filter button group
│ └── studySpots.ts # Study location data and types
├── public/
├── .env.local # Environment variables (not committed)
├── tailwind.config.ts # Tailwind configuration
├── next.config.ts # Next.js configuration
└── package.json
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintThe app currently features 20+ study spots including:
- Libraries: Robarts, Gerstein, Graham ...
- Cafés: Café Reznikoff, Diablos' Coffee Bar ...
- Buildings: Bahen, Sidney Smith Commons ...
- Outdoor Spaces: Trinity College Quad, KCC ...
Each location includes:
- Exact coordinates for map placement
- Floor count
- Operating hours
- T-Card access requirements
- Noise level (quiet/moderate/busy)
- Seating arrangements
- WiFi quality ratings
- Browse the Map: Pan and zoom around the UofT campus to explore study locations
- Filter Locations: Click filter buttons to show only specific types of spots
- View Details: Click any colored marker to open the information panel
- Plan Your Study Session: Use the details to find a spot that matches your needs
Contributions are welcome! If you know a great study spot that's missing:
- Fork the repository
- Add the location to
components/studySpots.ts - Follow the existing data structure
- Submit a pull request
- Add more study locations across campus
- User reviews and ratings
- Real-time occupancy indicators
- Bookmarking favorite spots
- Mobile app version
- Study room booking integration
- Photos for each location
This project is open source and available under the MIT License.
- University of Toronto for the amazing study spaces
- Google Maps Platform for mapping functionality
- Vercel for hosting and deployment
Built by Oliver Bisbee
Found a bug or have a suggestion? Open an issue
Happy studying! 🎓📖