Inspiration: City Sync was inspired by the need for intuitive, interactive tools that empower urban planners, architects, and citizens to visualize and experiment with city layouts in real time. We wanted to bridge the gap between complex urban data and accessible, engaging interfaces.
What We Learned: Throughout the project, we deepened our understanding of React, TypeScript, and advanced animation libraries like Framer Motion. We also learned how to structure reusable hooks and components for scalable, maintainable code, and how to manage complex state for interactive UIs.
How We Built It: We built City Sync using Next.js and React for the frontend, leveraging TypeScript for type safety and maintainability. We used Framer Motion for smooth, scroll-based animations, and custom React hooks (like useBuildingSpec) to manage building data and user interactions. GitHub was essential for collaboration and version control.
Challenges: Some of the biggest challenges included managing real-time state updates for complex building specifications, ensuring smooth and performant animations, and resolving merge conflicts during rapid team development. We also faced hurdles integrating third-party libraries and optimizing for both desktop and mobile experiences.
Log in or sign up for Devpost to join the conversation.