In the realm of educational technology, particularly within the mathematics and geometry sectors, innovative tools are increasingly pivotal in enhancing learning experiences and comprehension. Among these innovations, Spherical Easel emerges as a standout web application designed to facilitate a deep exploration of spherical geometry. This field, characterized by its unique properties and divergent from traditional Euclidean geometry, presents learners with concepts that challenge conventional understanding, making a tool like Spherical Easel not just novel but essential.

Spherical Easel is engineered to serve both the educational community and geometry enthusiasts, offering a platform where spherical geometry can be visualized, manipulated, and understood in an interactive environment. Built upon the modern and robust frameworks of Vue.js and TypeScript, the application provides an intuitive and responsive user interface that allows for the creation and interaction with spherical geometric constructions. This interface is complemented by a comprehensive suite of tools, enabling users to construct diverse geometric figures directly on a virtual sphere, thereby bridging the gap between abstract concepts and tangible understanding.

At its core, Spherical Easel is supported by a Firebase back-end infrastructure, which plays a critical role in user management, including secure authentication processes and cloud-based data storage and retrieval. This system underpins the functionality for both private and public sharing of geometric constructions, fostering a collaborative educational environment. Additionally, the application incorporates an enhanced database schema designed for efficient data management, categorizing user constructions to facilitate easy access and organization.

Beyond its educational prowess, Spherical Easel is designed with collaboration in mind. Through a robust Firebase back-end, it facilitates an interactive community where users can share, comment on, and learn from each other’s constructions. Spherical Easel is an indispensable tool for educators looking to enrich their teaching and students eager to expand their mathematical horizons.

Spherical geometry offers a unique perspective on the shapes and forms that differ markedly from flat, Euclidean surfaces, presenting unique challenges in understanding and application. Spherical Easel directly addresses these challenges with an innovative web application that enables interactive learning and exploration in this specialized field. This platform not only assists students and researchers in visualizing spherical concepts but also provides an array of practical tools for constructing and manipulating these geometries.

Upon accessing Spherical Easel, users immediately encounter an intuitive interface that allows them to view and create spherical constructions without the need for logging in. This open access is designed to encourage exploration and immediate engagement with the core functionalities of the application, making it an accessible educational tool for anyone interested in spherical geometry.

For users seeking deeper interaction and personalization, Spherical Easel includes a secure authentication process. Once logged in, users can manage their own list of constructions, collaborate with others by starring or copying shared constructions, and maintain their account details, enhancing the educational and collaborative features of the platform. This authentication is supported by a Firebase-powered back-end, which ensures user data is securely handled and provides a personalized workspace for each user.

The application’s data management capabilities are robust, utilizing Firebase to store, categorize, and retrieve user constructions efficiently. This cloud-based approach allows for seamless access and interaction, supporting both individual exploration and community engagement. Users can easily navigate through their own and others' constructions, participate in a dynamic learning environment, and contribute to a repository of shared knowledge.

The functionality and systematic organization of Spherical Easel are further detailed in the accompanying system overview diagram (Figure 1). This diagram illustrates the comprehensive data flow from the user interface through the Firebase back-end, highlighting how the application manages user interactions, data storage, and community features within a secure and efficient framework.

Figure 1: System Overview

Spherical Easel is designed as a web application leveraging Vue.js for the frontend and Firebase for backend services, including authentication and cloud-based storage. The system allows for real-time interaction with geometric constructions on a spherical model.

Spherical Constructions: The cornerstone of this app lies in its spherical constructions, which serve as visual representations of spherical geometry. Users can manipulate and interact with these constructions using a multitude of tools available within the app. Upon creating a construction, users are granted the option to save it, with the flexibility to keep it private for personal use or share it publicly for others to explore. Private constructions are stored under the user's profile in a designated section of the database, while public constructions are stored in two locations: within the public constructions collection and also under the user's profile. Loading saved constructions involves retrieving the list of tools utilized for each construction from the database and rendering them in the view. User engagement with these constructions constitutes the primary focus of the project this semester. The integration of database functionalities, particularly in the context of saving and deleting constructions, has been instrumental in shaping the development and deployment of this project's key features.

Figure 2: Spherical construction canvas

A Vue.Js based front end interface offering a wide range of tools for creating and interacting with spherical geometrical constructions. We implemented a new filtering and sorting algorithm for new and existing constructions, allowing for a more streamlined options menu. Additionally, we configured the constructions tab under the main navigation panel to display a 'starred constructions' list that will allow users to save and retrieve previously liked constructions from the global constructions list available. Finally, we have implemented several new UI buttons for starring and unstarring, as well as a button to revert the publicity of a users owned construction. this allows for flexibility on how a user structures their different construction lists.

Figure 3: option buttons available per construction type

The architecture of the database forms the backbone of the app's functionality. Management of user lists involves leveraging various CRUD commands provided by Firebase. Our project this semester primarily utilizes two key sections of the database:

1. User Collections: This section stores user documents with the document ID matching the user ID. Within each user document, essential information such as user-created constructions, user details (name, role), and starred constructions are stored.

Figure 4: User Document Structure

2. Construction Collection: This collection houses documents representing public constructions. Each document contains information about the construction, including the author and the private document ID.

Figure 5: Public Construction Collection Structure

Interacting with these two collections constitutes the primary focus of our functions. Establishing which collections and documents to update upon invoking a function was crucial in designing the logic for these functions. For example, when starring or unstarring constructions, accessing different parts of the database is necessary, each requiring distinct approaches. Similarly, when converting a construction to private status, access to the public constructions collection is required to delete the corresponding public document. This meticulous management ensures seamless operation and data integrity within the app.

Sophisticated Construction Management System: Implemented a nuanced system for managing constructions, offering users the ability to categorize their creations as public, private, or starred. This intricate system enhances the user experience by providing granular control over organizing and accessing geometric models. Users can effortlessly navigate through their constructions based on their sharing preferences and priority levels, fostering a more intuitive and personalized interaction with the app.

Figure 6: Construction Lists UI

Enhanced Database Schema: Developed an optimized database schema to facilitate more efficient storage and retrieval of user constructions. By structuring the database schema in a streamlined manner, data access and manipulation operations are expedited, resulting in improved performance and responsiveness of the application. This enhancement ensures a seamless user experience, even when dealing with large volumes of geometric data, thereby enhancing the overall usability and scalability of the app.

Figure 7: Updates to User and Construction Schema

Real-Time Updates and Collaboration: Leveraged Firebase's real-time capabilities to enable seamless collaboration and instant updates across multiple users. This feature allows users to collaboratively work on shared constructions in real-time, fostering a sense of community and facilitating collaborative learning experiences. Real-time updates ensure that all users have access to the latest version of constructions, promoting efficient communication and collaboration within the app's ecosystem.

User Accounts: This update to the structure of newly created user accounts was pivotal for testing new functionalities and ensuring consistency in the database. While the overall database structure still requires some refinement, particularly in the renaming of collections, the adjustments made to user accounts were crucial for establishing uniformity and facilitating the utilization of newly integrated star/unstar functionality.

Figure 8: User Document Fields

Star/Unstar: Among the key features requested by our sponsors, the addition of star/unstar functionality demanded a comprehensive understanding and implementation process. This entailed a thorough grasp of the database structure, data retrieval methods, integration of new interface elements, adaptation of views to accommodate additional lists, and establishment of event handling mechanisms, among other intricacies.

Figure 9: New "Star Construction", "Un-Star Construction" Buttons

Nick: Coming into this project, I did not have any experience with Firebase, Vue.js, or TypeScript. My role in this project quickly evolved into mainly backend work. As such, I did not gain much experience with Vue.js, but I worked with Firebase and TypeScript a lot. Receiving instruction on Firebase in my mobile app development class helped me wrap my head around the structure. Analyzing existing code for Firebase references and document and collection accesses helped immensely in learning how to accomplish those ideas in TypeScript. As for TypeScript experience, my previous knowledge of JavaScript helped me get my foot in the door since they are fairly similar in syntax. Using the existing project code to figure out the differences was my main source of learning. I now feel comfortable writing in TypeScript enough to work on future large projects that use it.

The project's testing framework was updated just before we started working. Due to this, we could not use the creation of unit tests to get a baseline understanding of the codebase. All understanding we gained on the project's structure and execution was from trial and error on our own. However, this difficult start to the project gave us all good experience with attempting to understand a large codebase quickly and completely. This will surely benefit us in our careers to come.

Travis: My journey in learning and growing technically involved Vue.js, Firebase, and software engineering. Together, we tackled challenges and learned collaboratively. Specifically, I delved into creating asynchronous functions with TypeScript for managing data in Firebase, contributing to Spherical Easel's backend. My role included implementing user management features and optimizing data storage, while also refining the database schema for better organization.

Reflecting on this project, I've realized the significance of clear communication and ethical conduct. I acknowledge areas where I can improve, such as deepening my understanding of Firebase and enhancing project documentation. Despite not fulfilling all our wishlist items and facing some challenges with app functionality, this experience was incredibly valuable. It taught me how to contribute meaningfully to a larger project and understand the steps necessary to achieve my goals. If given the chance, I would approach things differently next time, armed with valuable insights for future endeavors. Overall, this project highlights both technical accomplishments and opportunities for growth in the future.

Caleb: I came into this capstone project with a lot of experience already with Vuejs and Firebase. I wanted to grow my understanding and experience using a testing framework, but due to shifts in goals from our sponsors, I was unable to work on that. I also wanted to learn more about 3D web modeling and website hosting. With the limitations for testing this project, I focused on growing in managing a development project as team lead: assigning tasks, managing the workflow each sprint, writing the documentation and material, and lending my skills to develop a lot of the new Firebase connections and front end features. Throughout this process I became more confident in my abilities to lead in these areas and I feel happy with the completion of my responsibilities as well as my ability to take on extra work during sprints where the groups time was limited.

I also feel satisfied with my personal growth as a developer working on this existing code base, having gained more experience researching and troubleshooting new processes within the project that I had limited knowledge of before. I was able to share this knowledge with my teammates and helped quicken the learning process for them. Coming into this project, I had a lot of experience with writing reports and documentation, but had very few opportunities to present my work in a public peer reviewed setting, which really helped me understand the process for doing so and increased my appreciated for developers who have consistent projects they are developing and presenting in their careers.

The project was guided by the principles of ensuring software reliability, usability, and security. The team actively worked to understand specifications, conducted thorough testing, and credited previous work, aligning with the ethical standards outlined in the prospectus​.

We handled individual work with contributions through Github's commits and through the clear distribution of work within Jira sprint tasks and issues.

We looked at publicly available tutorials, software documentation, and forums to gain knowledge of the systems and software unfamiliar to use throughout the development stages.

We created UI tests and ran extensive debugging and database review to ensure new features had been thoroughly tested within the limits allowed during each sprint. We also dedicated sprint 5 to be a testing sprint to ensure proper scaling and data load would be successful.

Sprint issues and commit history maintained accuracy on individual work done throughout the project ensuring each member had public credit for all work done.

During each sprint completion, we evaluated each others code before branch merges. We also enabled secondary reviews for all commits to main and met regularly to go over individual development progress during each sprint.

This principle affected the team a lot due to restrictions on utilizing a testing framework during development. The team had to manage testing using only the debugger, expected output test, and UI components. Documentation was achieved through regular code comments and strict adherence to existing coding practices throughout the codebase.

We created meaningful sprint backlogs and reflected at the end of each sprint to ensure changes and setbacks were dealt with quickly and efficiently. We found success through this in staying on target for development.

We created reports each sprint highlighting all changes and new features made as well as created code comments and clear documentation within the codebase.

Teamwork was crucial to the project's success, with roles assigned to leverage each member's strengths effectively. Communication improvements and structured project management practices contributed to overcoming challenges and achieving project milestones​. throughout the semester, we had weekly meetings with our sponsors, and any extra meetings with group mates as needed. Even though we had a good schedule to meet, we struggled at the beginning to communicate effectively and share concerns and growth areas we were dealing with in regards to limitations with our knowledge. We managed the project well through Jira's management software, and utilized discord and slack for communication channels outside of meetings. We feel that our initial planning stage was critical in completing this project on time and delivering a solid product back to the sponsors. While the team struggled to maintain distinct areas of tasks based on skill set, we overall were able to come together to complete features and tasks on time within the VueJs and Firebase framework. We feel strongly that to succeed on a capstone project, a team must have clear structure to hold each other accountable, and be honest and clear when communicating to each other and to their sponsors at all stages of the project.

As the semester concludes, our team reflects on the development of Spherical Easel not just as a technical endeavor but as a significant growth opportunity in managing and executing a large-scale software project. We successfully expanded the application’s functionality by integrating key features such as user authentication, enhanced sharing capabilities, and versatile export options. These enhancements not only elevated the interactivity and educational value of the application but also provided us with hands-on experience in evolving a sophisticated digital tool within a real-world context.

Throughout the project, we employed Agile methodologies with an emphasis on flexibility, iterative development, and regular feedback. This approach was instrumental in navigating the complexities of the project and adapting to unexpected challenges. Agile practices helped us maintain momentum and coherence in our development process, ensuring that each feature was aligned with user needs and project objectives.
Working within this framework, our team learned the importance of division of labor, continuous communication, and iterative testing to handle the expansive scope of Spherical Easel. These experiences underscored the need for more practical exposure to large projects in our CS curriculum. Had we possessed earlier experience with projects of this magnitude, we might have approached the initial phases of 'Spherical Easel' with greater efficacy and foresight.

The semester’s work provided us with a profound appreciation for detailed planning and the value of a flexible, responsive development strategy. As we moved forward, the lessons learned from early challenges helped us refine our approach, enhancing our capacity to manage large-scale projects and preparing us for future professional challenges in the field of software development.

During the project, we encountered several significant challenges that tested our problem-solving skills and teamwork. One of the most notable challenges was related to testing. We had initially planned to use testing as the primary method for familiarizing ourselves with the extensive code-base. However, we soon realized that integrating testing into the project proved to be more difficult than anticipated. This presented a hurdle that required careful navigation and adaptation of our approach.

In addition to testing challenges, we also faced issues with communication, particularly in the initial sprint. Effective communication is vital for any project's success, and experiencing difficulties in this area early on forced us to reevaluate our communication strategies and make necessary adjustments. Overcoming these communication barriers was essential to ensuring that everyone was on the same page and working towards common goals.

Looking ahead, there are several areas where we see opportunities for future work and improvement. One such area is updating the user interface (UI) to enhance the overall user experience. Additionally, we recognize the need for refining the Firebase database structure. A well-organized database is crucial for efficient data storage and retrieval, and making improvements in this area can lead to enhanced performance, understanding, and scalability for the application. Furthermore, establishing a new testing environment is a priority for future work. By creating a dedicated testing environment, we can streamline the testing process and address the challenges we encountered with testing during the project.

Reflecting on the project, we identified several key factors that contributed to our success. One of the most significant factors was developing strong communication within the group. Effective communication enabled us to collaborate efficiently, share ideas, and address challenges as they arose. Additionally, keeping our sponsors informed and up to date on any issues we encountered was crucial. By maintaining transparent communication with our sponsors, we were able to manage expectations effectively and ensure alignment between project goals and sponsor expectations.

Overall, navigating challenges, such as testing difficulties and communication issues, required a combination of problem-solving skills, adaptability, and teamwork. By addressing these challenges head-on and leveraging our strengths as a team, we were able to overcome obstacles and achieve our objectives.