SideWork

The safest way for school students to find local jobs, with parent approval every step of the way.

Comment

💼 SideWork — Devpost Submission

Inspiration

Every year, millions of school students want to earn a little extra money — mowing lawns, walking dogs, tutoring younger kids — but the gig economy was never designed with them in mind. Platforms like Fiverr, TaskRabbit, and Upwork are built for adults and offer zero safeguards for minors. Meanwhile, parents are left completely in the dark about who their child is working for, where, and under what conditions.

We kept asking ourselves: What if there was a platform where a 15-year-old could safely find a local job — and their parent had to approve it before anything happened?

That question became SideWork. We were inspired by the idea that earning money and building responsibility shouldn't require sacrificing safety. We wanted to create a world where a student's first "job" is exciting, not risky — and where parents feel confident, not anxious.

What it does

SideWork is a parent-approved job marketplace that safely connects school students (ages 14–17) with local employers posting small tasks like lawn mowing, pet sitting, tutoring, and event setup.

Here's the core loop:

  1. Employers post jobs with full details — title, description, location photo, pay, GPS pin on an interactive map, and a verified ID. Every job description is automatically scanned by AI (Groq/Llama 3) to flag anything inappropriate before it goes live.
  2. Students browse available jobs via a beautifully designed card-based list or an interactive Leaflet.js map view. They can view employer details, see market-rate comparisons for the pay offered, and apply in one click.
  3. The catch: hitting "Apply" doesn't notify the employer. Instead, the application is locked in a pending_parent state. Nothing happens until the parent says yes.
  4. Parents log into their dedicated dashboard, review every detail of the job and employer, read an AI-generated risk assessment, and either approve or reject. Only upon approval does the system unlock.
  5. Once approved, real-time 🔔 notifications fire to both the student and employer, and a private, real-time chat room opens so they can coordinate logistics — with built-in AI toxicity moderation on every message.

The platform also includes:

  • AI-powered job description generation for employers (just type a short prompt)
  • AI-simplified job descriptions written at a 14-year-old reading level for students
  • Market-rate pay benchmarking across 50+ job categories so students know if an offer is fair
  • Mandatory Code of Conduct that employers must accept before posting
  • A full PWA (Progressive Web App) setup with service worker and manifest for installability

How we built it

We deliberately chose a zero-build-step architecture — pure HTML, CSS, and vanilla JavaScript — to keep the project accessible, fast, and deployment-friendly. No frameworks, no transpilers, no webpack configs.

  • Frontend: Vanilla HTML/CSS/JS with a fully custom design system built on CSS custom properties (variables). Every color, radius, shadow, and transition is tokenized for consistency across 10+ pages.
  • Backend & Database: Firebase (Authentication + Cloud Firestore). We use Firestore's real-time onSnapshot listeners for live chat and instant notification delivery — no polling.
  • AI Layer: Groq API with the Llama 3.3 70B model. We built 6 distinct AI functions: job safety checks, job description generation, simplified descriptions for students, parent risk assessments, smart reply suggestions, and real-time chat toxicity detection.
  • Maps: Leaflet.js with OpenStreetMap tiles for interactive job discovery and employer location pinning.
  • Animations: Lottie Web for lightweight, scalable SVG animations across dashboards.
  • Performance: In-memory query caching for Firestore documents (jobs and user profiles) to prevent N+1 query problems, plus aggressive Promise.all parallel fetching wherever possible.

The architecture is split across focused files:

  • firebase.js — All database logic, queries, caching, and auth
  • script.js — Global utilities, AI integrations, PWA setup, and shared UI helpers
  • Individual HTML files per role — each with self-contained, role-specific logic

Challenges we ran into

1. The Parent Approval State Machine The hardest architectural challenge was the multi-party approval workflow. An application has to flow through Student → Parent → (Employer + Student notification) with real-time state updates. Getting onSnapshot listeners to correctly trigger notifications to the right party at the right time — without duplicate alerts or race conditions — took significant iteration.

2. Firestore Composite Index Limitations We initially wrote queries with compound where() + orderBy() clauses, which Firestore requires composite indexes for. Rather than managing dozens of indexes, we refactored to do simple where() queries and sort client-side — a deliberate trade-off for development speed.

3. AI Response Parsing Getting the Groq/Llama 3 model to consistently return valid JSON for safety checks and toxicity analysis was tricky. LLMs sometimes wrap JSON in markdown code blocks or add commentary. We added fallback parsing logic to gracefully handle malformed responses.

4. Photo Storage Without a File Server We needed employers to upload location photos and students to upload profile photos, but we wanted to avoid setting up Firebase Storage or a file CDN. We solved this by encoding images as Base64 data URLs and storing them directly in Firestore documents — with a strict 2MB file size limit enforced client-side.

5. Real-Time Chat Performance Building a real-time chat system that doesn't create a new Firestore listener on every page load (and properly cleans up old ones) required careful lifecycle management, especially since our pages are traditional multi-page HTML rather than a SPA.

Accomplishments that we're proud of

  • The safety model actually works. The parent-in-the-loop design isn't just UI theater — it's a hard gate. A student literally cannot contact an employer until a parent reviews and approves. There's no workaround.
  • 6 AI integrations in one project. From safety screening to toxicity moderation to smart reply suggestions — AI is woven into the platform at every critical touchpoint, not bolted on as an afterthought.
  • Zero build tools. The entire platform runs from static files. Open index.html in a browser and everything works. No npm install, no node_modules, no build step. This was a conscious architectural choice for accessibility.
  • A genuine design system. We didn't just slap CSS together. The style.css file implements a full design token system with 40+ CSS variables, consistent component patterns, and responsive layouts that look polished on every screen size.
  • Market-rate benchmarking. We researched and compiled fair hourly rates for 50+ job categories so students can instantly see if a pay offer is fair, below market, or generous — empowering them to make informed decisions.
  • Real-time everything. Notifications, chat messages, and application status updates all happen in real-time via Firestore listeners. No refresh button needed.

What we learned

  • State machines are underrated. The pending_parent → approved/rejected lifecycle taught us how important it is to model state transitions explicitly rather than relying on ad-hoc boolean flags.
  • AI as a safety layer requires defensive coding. LLMs are probabilistic — you can't trust them to always return perfectly structured data. Building robust fallback parsing and graceful degradation around AI responses is essential.
  • Vanilla JS is more capable than people think. We built real-time chat, interactive maps, file uploads, notification systems, and complex multi-role dashboards without React, Vue, or any framework. Modern browser APIs are incredibly powerful.
  • Caching matters from day one. Our initial version made redundant Firestore reads every time a list rendered. Adding a simple in-memory cache cut our read count dramatically and made dashboards feel instant.
  • Design is not decoration. Investing time in a proper design system with CSS variables paid dividends. When we needed to add new pages or components, everything looked consistent automatically.

What's next for SideWork

  • Push Notifications: Integrate Firebase Cloud Messaging so parents get notified on their phone the moment their child applies for a job — even when the app isn't open.
  • Job Completion & Reviews: Add a "Mark as Complete" flow with mutual reviews, building trust profiles for both students and employers over time.
  • Earnings Dashboard: Give students a visual tracker of their total earnings, completed jobs, and work hours — building a mini-portfolio of real-world experience.
  • Geofencing & Proximity Alerts: Notify students automatically when a new job is posted within walking distance of their home or school.
  • Parent Group Chat: Allow parents to communicate with each other about specific employers, creating a community-driven trust network.
  • School Partnerships: Partner with schools to offer SideWork as an approved after-school earnings platform, with school administrators as an additional safety layer.
  • Payment Integration: Add Stripe or similar payment processing so pay is held in escrow and released upon job completion — protecting both students and employers.

Built With

Share this project:

Updates