• 

• 

Inspiration

UnityCircles was inspired by the idea that real human connection happens in small, intentional groups. Social networks scale to millions, but meaningful support usually comes from 3–5 people who listen, share, and grow together. With Hack4Unity’s theme focused on bringing people together, I wanted to design a tool that creates microcircles that encourage trust, empathy and collaboration.

What it does

UnityCircles places each user into a microcircle of up to 5 people based on shared interests. Every circle receives a set of weekly missions designed to strengthen connection — such as reflective prompts, group check-ins, or small collective challenges.

The prototype also tracks live session stats, including:

Average Members per Circle

Total Users Total Circles Average Members per Circle= Total Circles Total Users ​

Everything runs locally in the browser, with no backend and no login, making the demo safe, fast, and private.

How we built it

We built the entire project as a single-file front-end application using only:

HTML

CSS

JavaScript

All state (users, circles, missions) is stored in localStorage:

{ users: [], circles: [] }

A lightweight matching algorithm groups users by the first interest they enter, creating new circles when needed. The interface uses a modern aesthetic with gradients, glassmorphism cards, and responsive layout — all without frameworks or build tools.

Challenges we ran into

Originally, we planned a full-stack solution using Node.js and React, but strict system limitations (storage and dependency issues) made installing modern toolchains impossible under the hackathon deadline. This forced a pivot to a front-end-only architecture, which required rethinking the entire design so the prototype still demonstrated meaningful interaction and unity — without a server.

Accomplishments that we're proud of

A polished, modern UI built entirely with vanilla code

Functional matchmaking and circle generation

Topic-based mission creation for each microcircle

A fully offline demo that runs instantly

A clear representation of how small groups can build unity

What we learned

We learned that simplicity can be a strength. Working within limitations pushed us to create a prototype that is fast, portable, and easy for anyone to open. We also learned that unity is not created automatically by grouping people — it grows when groups share structure, rituals, and purpose, which inspired the weekly mission system.

What's next for UnityCircles

Real backend with persistent and secure circles

AI-assisted intelligent matchmaking

Real-time chat or audio rooms

Advanced tools for group facilitation

“Unity Mode” connecting multiple circles together

UnityCircles shows that even small circles can create meaningful community — one microcircle at a time.

Built With

• backend
• external
• frameworks
• glassmorphism
• gradients
• html5-(structure)-css3-(ui-design
• local-state)-localstorage-api-(client-side-persistence)-browser-dom-api-(dynamic-rendering
• mission-generation
• no
• responsive-layout)-javascript-(vanilla)-(matchmaking-logic
• ui
• updates)