RunRiot Svelte - Fullstack Running App
A simple running app built with Svelte that shows how to make a full website with charts and maps. Deployed on Vercel: https://runriot-svelte.vercel.app/
What Was Implemented
Fullstack App
- Frontend: Svelte website
- Backend: SvelteKit API routes
- Database: MongoDB connection
- Authentication: JWT token system
Charts
- Running progress charts using Frappe Charts
- Line and bar charts showing distance over time
- Data pulled from running results in database
Maps
- Interactive maps using Leaflet
- Shows running locations as map markers
- Click markers to see run details
Technologies Used
- Frontend: Svelte 5, SvelteKit
- Charts: Frappe Charts, svelte-frappe-charts
- Maps: Leaflet
- Backend: SvelteKit API routes
- Database: MongoDB with Mongoose
- Authentication: JWT, bcryptjs
- HTTP Client: Axios
- Build Tool: Vite
Simple Flow
- User logs in → gets JWT token
- Frontend calls backend APIs with token
- Backend validates token and queries MongoDB
- Data returns to frontend
- Charts and maps display the data
That's the complete stack - frontend, backend, database, charts, and maps all working together.
