Error Handling

This project provided a unique perspective on error handling, fundamentally shaping the approach to writing code. It involved evaluating all possible failure points and accounting for them, ensuring a straightforward and seamless user experience. This process was crucial in maintaining the integrity of the application and providing a robust user interface.

A key learning was the implementation of a global error state provided by the useContext hook. This state was used in a reusable error component, designed to display relevant errors wherever placed. This approach to error handling has significantly influenced the thought process behind writing code, and evaluating possible points of failure, all while emphasizing the importance of robust and user-friendly design.

Return to Top

Asynchronous Programming

I learned how the browser executes code and gained the ability to allocate tasks out of the synchronous queue. This knowledge was instrumental in managing tasks efficiently and ensuring the smooth operation of the application.

A significant learning was the importance of accounting for the time it takes to complete these tasks on the front end. Implementing loading states and loading animations proved to be an effective strategy for enhancing UX/UI. This not only improved the user experience but also provided a more professional look and feel to the application.

Return to Top

Database Management

A significant focus in this project was placed on working with databases. The first step involved setting up a scalable structure for users, ensuring it could handle large amounts of data efficiently. This was followed by formatting the data in a user-friendly manner that facilitated ease of use on the front end.

A key part of the process was sorting data entries to identify the most recent ones. This was complemented by working with file uploads and passing the link reference to the NoSQL database, a strategy that effectively eliminated redundant data requests.

The useEffect hook was utilized to fetch data from Firebase both onMount and when data was added or deleted, with careful attention paid to avoid causing an infinite re-render loop. In this project, I learned about working with various database operations, including reading, writing, deleting, and amending data. This experience provided a comprehensive entry-level understanding of database management in a real-world application.

Return to Top

User Authentication

With aid of the useContext hook I was able to share the state of the current user with the rest of the application. This approach helped create a seamless user experience across the application, ensuring that user-specific data and features were readily available.

Moreover, I learned this highlighted the importance of gatekeeping application features for logged-in users. This was achieved using the NextJS Router, which proved to be an efficient tool for managing access to application features based on user authentication status. This experience underscored the importance of secure and efficient user authentication in real-world applications.

Return to Top

The API Layer

It was a practical experience in making HTTP requests and using async/await and Fetch for network communication with OpenAI’s API. A first for me was passing data from the front end to the API layer, which highlighted to me the importance of effective data management in client-server communication. This importance was later emphasized when engineering a prompt for ChatGPT to output data in a usable format. I was able to achieve this by instructing ChatGPT to output in JSON format followed by a structured JSON object displaying the format I wished to receive.See the prompt.

Following the OpenAI documentation for implementation was a valuable learning experience, emphasizing the importance of understanding and adhering to API documentation for successful integration. This included token management and the need to guard against overspending. This emphasized the importance of efficient resource management when working with APIs.

Return to Top

TypeScript

The project served as an introduction to TypeScript, highlighting the importance of a strongly typed language. Before this project I was ignorant of how TypeScript can enhance code maintainability, making it easier for others to contribute without fear of breaking the code. However, now I don’t see myself reverting to JavaScript for future projects.

Coming from JavaScript, the concept of compiling and the potential errors that can arise at build time were initially unfamiliar. The assumption was that if the code was working in the development server, that was all that mattered. However, when the time came to deploy my application to Vercel it revealed that the code had not been successfully compiled.

This experience displayed the importance of regularly checking if the code compiles before committing it to GitHub. It also emphasized the need to plan your project before building, with pseudocode, thus considering how the code should run and what each function should do to ensure expected performance.

Return to Top