FULL-STACK / 2026
Jicnic
Live availability voting for planning a picnic.
- MY ROLE
- Course project
- KEY RESULT
- Live WebSocket updates, API key kept server-side
- TEAM
- BCIT course assignment, built on my own.
How a request flows
- Browserfetch + WebSocket
- ExpressSessions, bcrypt
- ws serverChange notifications
- OpenWeatherMapKey stays server-side
Why
I wanted to combine AJAX, WebSockets, sign-in, and a third-party API in one small app.
What I built
- 01
Built a Node and Express backend with cookie sessions and bcrypt, and a vanilla JavaScript front end using fetch.
- 02
Used WebSocket messages only as a signal to re-fetch, which kept real-time logic separate from data logic.
- 03
Served the OpenWeatherMap key from a sign-in-protected route and cached forecasts to respect rate limits.
Outcome
Every connected person sees vote changes immediately, and forecasts quietly disappear when signed out.
The trade-off
WebSocket messages carry no data, only “something changed”. That costs an extra request per update but means there is only one code path for loading votes.
What I learned
Request order and failure states mattered more than the happy path, especially around keeping the API key private.
What I'd fix next
Add multiple events, a “best day” summary, and tests for the vote and socket flow.