📍 StudySpot : Map Your Study Sessions

Your study journey, pinned on the map.

StudySpot is a front-end web application that allows users to log, visualize, and track their study sessions geographically.
From quiet libraries to busy cafés, every session becomes a data point --- helping you understand where you focus best.

---

✨ Features

• 📍 Interactive Map (Leaflet)
  • Click anywhere to pin a study location
• 🧠 Session Logging
  • Record:
    • Noise level
    • Focus percentage
    • Power outlets availability
    • Food/drinks allowance
    • Personal rating ⭐
    • Notes
• 🗺️ Reverse Geocoding
  • Converts coordinates into readable locations
• 🧾 Dynamic Study Cards
  • Each session is displayed as a rich UI card
• 📌 Map Popups
  • View session info directly on the map
• 💾 Local Storage Persistence
  • Sessions are saved and restored on reload
• 🎯 Smooth UX
  • Scroll reveal animations

---

🧠 What Makes This Project Interesting

This project demonstrates:

• Real-world state management without frameworks
• Handling geolocation APIs
• Integration with Leaflet + Geocode.xyz
• Data persistence (localStorage)
• Dynamic DOM rendering (cards + map markers)

---

🛠️ Tech Stack

• 🧱 HTML5
• 🎨 CSS3
• ⚡ JavaScript (Vanilla)
• 🗺️ Leaflet.js
• 🌍 Geocode.xyz API
• 💾 LocalStorage API

---

🧩 Project Structure

StudySpot/
│
├── index.html
├── style.css
├── form.css
├── script.js
├── ui.js
└── images/

---

🚀 How It Works

1. Allow location access
2. Click on the map
3. Fill the form
4. Save → marker + card created
5. Data persists via localStorage

---

🔮 Future Improvements

• User authentication
• Backend integration
• Analytics dashboard
• Smart recommendations