.png)
At Innota.ai, I played a key role in the development of a web application built on a MERN stack that aimed to enhance the studying experience for consumers by providing various tools for efficient note-taking. The main feature was an AI that could summarize parts of imported PDF files into formatted text, while side features included highlighting, saving passages, cropping, drawing, and creating notes.
My primary focus was on enhancing the workspace functionality, which involved adding new features and fixing existing bugs.
The project involved working on the workspace component of the existing note-taking app. The workspace contained imported PDF files and user-created notes. Key tasks included:
Upon reviewing the workspace functionality, I quickly realized that the front-end logic was consolidated into a single 1600-line React class component. This approach was outdated and problematic for several reasons. Firstly, the sheer size of the component made it difficult to navigate and comprehend the code, which impeded both debugging and future development. Secondly, the use of class components with outdated React methods such as lifecycle hooks further complicated the codebase and made it less efficient. The absence of proper documentation exacerbated these issues, leading to disorganized and unreadable frontend logic.
To address these problems, I undertook a thorough transformation of the workspace functionality. I refactored the large React class component into smaller, more focused React function components. By breaking down the large component into manageable parts, I could streamline the logic and achieve better separation of concerns. This restructuring allowed for cleaner, more organized code and improved readability.
The transformation also facilitated the use of modern React features such as hooks, which improved the overall efficiency and responsiveness of the application. By reorganizing the logic into dedicated function components, each handling a specific task or section, I could create a more modular and maintainable codebase. This approach made it easier to implement new features, track down bugs, and make future updates.
Additionally, I introduced new features to enhance the workspace experience. One significant addition was a custom context menu in the dashboard, providing users with more control and convenience when managing workspaces. This feature enabled users to modify or delete workspaces directly from the dashboard, streamlining their workflow.
Throughout the process, I collaborated with other team members to ensure that my contributions aligned with the overall goals and vision of the project. This approach ensured a cohesive development effort and a more seamless integration of the new features and improvements.
Modern React Development: Working on this project allowed me to deepen my understanding of modern React development practices. Through refactoring the codebase and transitioning from class components to function components with hooks, I gained valuable experience in using the latest tools and techniques. This knowledge has equipped me to develop more efficient and contemporary web applications in future projects.
Code Refactoring and Maintainability: The task of refactoring the large and disorganized codebase into smaller, more modular components provided me with important insights into code organization and best practices. I learned how to break down complex code into manageable parts, improving readability and maintainability. This experience emphasized the value of well-structured code for both current development and future updates.
Collaboration and Communication: Throughout the process, I worked closely with other team members to ensure that my changes aligned with the overall goals of the project. This experience reinforced the importance of effective collaboration and clear communication in a development team. It taught me how to integrate my work seamlessly with that of others, resulting in a cohesive and successful outcome for the project.
User-Centered Design: By adding new features and improving the functionality of the workspace, I developed a better understanding of user-centered design. This project highlighted the importance of creating intuitive and efficient user experiences, allowing me to focus on the needs and preferences of the end user. As a result, I am better prepared to design applications that meet and exceed user expectations.