Incivent

A live incident reporting platform for communities around the globe.

Comment 5

Incivent

Honestly, you could read all this, but I recommend just trying Incivent out yourself—trust me, it's really good.

In today’s fast-paced, crime-ridden world, our local communities struggle with staying informed and connected in real time. Whether it’s reporting local incidents, sharing important updates, or fostering a sense of safety and collaboration, the tools for meaningful community engagement are often missing.

So, recognizing this need, I decided that for this hackathon I'd create Incivent! A real-time, crowd-sourced platform designed to empower the entire planet with incident reporting and community collaboration.

Funnily enough, when thinking of a name for the app; the name "Incivent" reflects my mission—it’s a fusion of "incident" and "event," capturing the essence of real-time awareness and incident reporting. I think that by combining these ideas, Incivent symbolizes the way communities can come together to share knowledge and take action.

NOTE: If you're wondering why the url contains 'dwitch', it's because I pivoted. Initially, I was planning on building a community live streaming platform for developers, but I wanted to try something more impactful and socially good. That's where Incivent comes in.

What it does

Incivent is a real-time incident tracking platform that enables communities to share, monitor, and respond to local events and emergencies. The platform combines interactive mapping with community engagement features to create a comprehensive neighborhood awareness tool. Here's some of the features I developed:

  1. Interactive Map Interface

    • Real-time incident visualization (Shadcn/ui)
    • Geo-fenced recent incidents (This was so hard)
    • Incident type-based filtering (e.g., Crime, Emergency, Hazard)
    • MapBox Integration for advanced map exploration (Fly to incident, scale, pan, zoom)

  2. Community Engagement

    • Live chat system (Node.js Websockets)
    • Real-time incident reporting
    • Community alerts and notifications (Sonner)
    • Chat message highlighting (Event Emitter)

  3. User Management

    • Rolled my own auth system (JWT & Bcrypt)
    • Account deletion and session termination
    • Personal points-of-interest markers (LocalStorage)
    • Report management (Create, Read, Update, Delete)

How it's made

Frontend Architecture

  • React + TypeScript for core application
  • shadcn/ui + TailwindCSS for styling
  • TanStack Query for data management
  • MapBox for mapping functionality
  • WebSocket integration for real-time updates

Backend Structure

  • Express.js with TypeScript
  • MongoDB database with Mongoose
  • WebSocket server for real-time communications
  • JWT authentication
  • Secure password handling with Bcrypt

Development Tools

  • Vite for build system
  • Docker for containerization
  • Vercel and Render for deployment
  • ESLint and Prettier for code quality
  • Git for version control

Challenges

  • Authenticating with MongoDB, somehow this took me 20 minutes all because I forgot --remove-orphans when utilizing Docker. 🤦🏿‍♂️
  • Configuring MapBox — it's a complex library with lots of APIs and components.
  • Deploying the backend to render — TLDR; ts-node sucks, tsx saved the day. ❤️
  • Finding time to work — I originally was going to build something else as mentioned above, but pivoted once I realized the idea was not that good.
  • Implementing the websocket model for real-time notifications and alerts — debugging this took like 1000 console.log()' in my code.

Accomplishments

  • Building out a visually optimal and easy to use interface in such little time
  • Finishing the project, making it mobile-responsive, deploying it, and using a funny domain name
  • Building out a cool landing page in like 2 hours: check it out
  • Getting the websockets for real-time broadcasting working, I haven't done that since TalkToBeavs

Learnings

  • Hackathons are easier, but a lot more boring when alone
  • MapBox is an interesting tool, it's a shame their documentation is so lackluster
  • How to develop a real-time application without external libraries like socket.io liveblocks or partykit
  • Ways to align a user experience with real-world challenges that actually matter and shape communities

What's next?

  • Build a community: Market the application to get people using it since it works and is useful
  • Fully-support the API on the client—I ran out of time to finish support for stuff like editing incidents
  • Optimize performance so that there's not 500+ line component files and tons of side-effects
  • Get the project audited or pen-tested to make sure that I can some day release to the public
  • More privacy and security settings, heatmap visualizations, and advanced incident analytics (also ran out of time here, but that's no problem)

And yeah that's it. Thanks for checking out my project.

Share this project:

Updates