Project Story: Pact Compass About the Project Pact Compass was inspired by the everyday need to make informal agreements—whether with friends, roommates, or small teams—and the challenge of keeping everyone on the same page. I often found myself wishing for a simple tool to formalize these pacts, track who agreed, and send reminders, without the overhead of legal contracts or endless group chats.

Inspiration The idea came from real-life situations: splitting chores with roommates, setting goals with friends, or making commitments in small groups. I wanted a platform that made it easy to draft an agreement, invite others, and keep everyone accountable, all in a friendly and accessible way.

What I Learned Building Pact Compass taught me a lot about user experience—how to make flows intuitive for both creators and invitees. I deepened my knowledge of React, TypeScript, and state management, and learned how to implement features like personalized invite links and status tracking. I also explored premium feature gating and notification systems.

How I Built It I built the app using React and TypeScript for the frontend, focusing on a clean and responsive UI. I used hooks for state management and React Router for navigation. The pact logic—creating, updating, and tracking agreements—was handled in a service layer, making it easy to test and extend. I also implemented a simple authentication system and premium feature checks. Additionally I used AI coding tools to accelerate development and handle boilerplate, but all key logic, architecture, and problem-solving were guided by my own expertise.

Challenges Faced One of the biggest challenges was designing the invite system so each party could securely access and agree to their part of the pact. Managing pact status updates and ensuring real-time feedback for users required careful state handling. Balancing simplicity with enough features to be genuinely useful was also a constant consideration.

Overall, building Pact Compass was a rewarding experience that pushed me to think about both technical solutions and real-world usability.

Built With

  • ai
  • coding
  • copilot
  • css
  • github
  • github-copilot-(ai-coding-assistant)-**deployment:**-(add-if-you-used-vercel
  • if-different)-**authentication:**-custom-(or-specify-if-you-used-firebase/auth0/etc.)-**state-management:**-react-hooks-**apis/services:**-custom-pact-service-layer-**tools:**-visual-studio-code
  • javascript-**frameworks/libraries:**-react
  • javascript-frameworks/libraries:-react
  • languages:-typescript
  • netlify
  • react
  • react-router-**ui:**-tailwind-css-(or-your-css-framework
  • router
  • state-management:-react-hooks-apis/services:-custom-pact-service-layer-tools:-visual-studio-code
  • tailwind
  • ui:
Share this project:

Updates