Circle Budget Webapp
Tech Stack
About the Project
Developed a web application for circle budgeting, providing a user-friendly interface to manage and track financial data. Built with Next.js for performance, Tailwind CSS for styling, and TypeScript for type safety, this application synchronises data with Google Sheets, allowing for real-time updates and collaborative budgeting. The application features: - **Table Management**: Users can switch between different tables via a dropdown menu, including Consolidated, Budget, and Forecast tables. - **Data Entry**: Editable columns are clearly marked, allowing users to input and update numerical values with save and cancel options. - **Cell Calculation Breakdown**: Users can click on any cell to view a popup that shows how the value in that cell was calculated, including all costs and/or revenue contributing to that final value. - **Comments and Collaboration**: A comment system is implemented, enabling users to add notes to specific cells or rows for better context and collaboration. - **Forecast Updates**: Users can fill in forecast amounts for specific periods, referencing past performance as needed.
The Challenge
Implementing real-time data synchronisation between a web application and Google Sheets while ensuring a user-friendly budgeting experience.
The Approach
Utilised Next.js and Google Sheets API to create a seamless connection, allowing for dynamic data updates and easy collaboration. Implemented a clear UI with Tailwind CSS and provided clear instructions to make data entry intuitive.
Key Learnings
Deepened understanding of Next.js serverless functions, Google Sheets API integration, and complex state management in TypeScript.