Lexilum self-built AI app launch
Lexilum self-built AI app launch
Lexilum self-built AI app launch
Lexilum
8 weeks
Product MVP launch
Lexilum
8 weeks
Product MVP launch
Lexilum
8 weeks
Product MVP launch
Lexilum: an AI interactive vocabulary learning web app
Introduction
Lexilum is an app designed to help advanced students quickly learn new words. It's perfect for those who need fast definitions and easy ways to add words to their active vocabulary. The app uses AI to automatically generate definitions, usage examples, and quiz content.
The motivation behind Lexilum comes from the need for advanced language learners to have an efficient tool for vocabulary enhancement. The AI in Lexilum focuses on giving clear, popular definitions and straightforward examples, eliminating the need for extra context or clicks. A significant advantage of Lexilum is its unlimited vocabulary range, only bounded by the AI's ability to understand and respond to context.
Design Choices and Technologies
This is the second version of this application. During its development, I spent many hours learning new technologies and overcoming technical challenges.
- I started with learning React for a modern technology stack, then moved on to Next.js for server-side rendering.
- Admin Dashboard Template: Initially used as a starting point for the dashboard. It had Next Auth and Planetscale, but I switched to different providers later.
- The Tremor React table was a key part of my app - the word list. I modified it to work with React context and used Tremor for other elements like buttons and inputs for easier integration.
- For frontend styling, I switched from standard CSS to Tailwind for a simpler way to manage and change component styles.
- TypeScript is used for its strong typing and error checking capabilities.
- **Next.js Serverless Functions:** Chosen for their ease of use and scalability. They help in managing words, fetching and processing content from OpenAI, and converting responses to JSON.
- Building the API made it clear that I needed better word interaction, so I learned about state managers and added React Context to my project.
- I chose Supabase as the main database for its simplicity and real-time features.
- Clerk was picked for user authentication and security, and its good integration with the latest Next.js.
High-Level Components
The Lexilum app is built with a focus on efficiency and user experience, incorporating several integral components:
1. User Authentication & Authorization: Clerk is employed for its robust security and user management capabilities. This choice ensures a secure environment for users, crucial for handling personal progress data and preferences.
2. Dashboard UI:The combination of React and Next.js, coupled with deployment on Vercel, ensures a responsive and high-performing user interface. React Context is integrated as a state manager to enhance UI responsiveness and interactivity.
3. Vocabulary Database & CRUD Operations: Supabase serves as the core database, providing real-time data handling. This is augmented by Next.js serverless functions, which facilitate asynchronous data operations, ensuring a smooth and efficient database interaction for vocabulary management.
4. Quiz Generation & Management: A dynamic quiz experience is crafted using a custom randomization algorithm. This is further supported by Next.js serverless functions that efficiently format data into JSON for the quiz interface, allowing for a seamless and engaging quiz module.
Overcome Technical Challenges
The initial version of this app used standard fetches within the component to retrieve a word, its definition, and usage. This approach led to significant delays (averaging 30 seconds) due to the time taken for requests to reach OpenAI, parse the inconsistent response laden with extra symbols and a constantly changing format, and then adapt the output for the layout. To address this, I shifted this logic from the component to the API endpoint, resulting in faster performance, though some issues persisted. Additionally, the lengthy wait time for API responses introduced numerous edge-case errors, prompting me to further simplify my logic. I realized that triggering the definition and usage separately and asynchronously would enhance the speed of my API, so I divided each function into separate endpoints. This change significantly boosted performance, and updating the API prompts to yield more concise and consistent formats further improved processing efficiency.
Following the GPT-3.5-Turbo-1106 update, my API's functionality became much faster. However, I was aiming for seamless user interaction with the word table, so I explored advanced methods for interacting with React states. I discovered that React Context was a suitable option for maintaining word additions and deletions within the web app state, while triggering API endpoints in the background. Overcoming challenges with this new state management approach, I achieved smooth UI interaction with the words table. I then advanced the project by triggering separate asynchronous API functions to generate a quiz question and three incorrect answers as soon as a new word was added to the database. This backend logic for quiz generation activates only during word addition, significantly reducing the load during quiz time. This approach of pre-generating quiz data allowed for quick retrieval of the prepared data for quizzes from the database.
Additionally, I implemented a new UpdateWordDetails function, activated directly from the word context, to update word definitions and usage as soon as they were retrieved from OpenAI. The final challenge was generating a random set of questions and answers each time a user started a quiz. This proved problematic since Supabase couldn't use the ORDER BY RANDOM() SQL method. My workaround involved fetching all user questions, assigning them IDs, and selecting four random questions using Math.random. While not the most elegant solution, it was practical for the MVP stage of my app, avoiding the need for a database index.
The next steps involve developing a statistics system for users to track their progress and possibly reorganizing my components in a clearer, more standardized manner, refactoring dependencies, and introducing separate state providers for the quiz and words sections.
Lexilum: an AI interactive vocabulary learning web app
Introduction
Lexilum is an app designed to help advanced students quickly learn new words. It's perfect for those who need fast definitions and easy ways to add words to their active vocabulary. The app uses AI to automatically generate definitions, usage examples, and quiz content.
The motivation behind Lexilum comes from the need for advanced language learners to have an efficient tool for vocabulary enhancement. The AI in Lexilum focuses on giving clear, popular definitions and straightforward examples, eliminating the need for extra context or clicks. A significant advantage of Lexilum is its unlimited vocabulary range, only bounded by the AI's ability to understand and respond to context.
Design Choices and Technologies
This is the second version of this application. During its development, I spent many hours learning new technologies and overcoming technical challenges.
- I started with learning React for a modern technology stack, then moved on to Next.js for server-side rendering.
- Admin Dashboard Template: Initially used as a starting point for the dashboard. It had Next Auth and Planetscale, but I switched to different providers later.
- The Tremor React table was a key part of my app - the word list. I modified it to work with React context and used Tremor for other elements like buttons and inputs for easier integration.
- For frontend styling, I switched from standard CSS to Tailwind for a simpler way to manage and change component styles.
- TypeScript is used for its strong typing and error checking capabilities.
- **Next.js Serverless Functions:** Chosen for their ease of use and scalability. They help in managing words, fetching and processing content from OpenAI, and converting responses to JSON.
- Building the API made it clear that I needed better word interaction, so I learned about state managers and added React Context to my project.
- I chose Supabase as the main database for its simplicity and real-time features.
- Clerk was picked for user authentication and security, and its good integration with the latest Next.js.
High-Level Components
The Lexilum app is built with a focus on efficiency and user experience, incorporating several integral components:
1. User Authentication & Authorization: Clerk is employed for its robust security and user management capabilities. This choice ensures a secure environment for users, crucial for handling personal progress data and preferences.
2. Dashboard UI:The combination of React and Next.js, coupled with deployment on Vercel, ensures a responsive and high-performing user interface. React Context is integrated as a state manager to enhance UI responsiveness and interactivity.
3. Vocabulary Database & CRUD Operations: Supabase serves as the core database, providing real-time data handling. This is augmented by Next.js serverless functions, which facilitate asynchronous data operations, ensuring a smooth and efficient database interaction for vocabulary management.
4. Quiz Generation & Management: A dynamic quiz experience is crafted using a custom randomization algorithm. This is further supported by Next.js serverless functions that efficiently format data into JSON for the quiz interface, allowing for a seamless and engaging quiz module.
Overcome Technical Challenges
The initial version of this app used standard fetches within the component to retrieve a word, its definition, and usage. This approach led to significant delays (averaging 30 seconds) due to the time taken for requests to reach OpenAI, parse the inconsistent response laden with extra symbols and a constantly changing format, and then adapt the output for the layout. To address this, I shifted this logic from the component to the API endpoint, resulting in faster performance, though some issues persisted. Additionally, the lengthy wait time for API responses introduced numerous edge-case errors, prompting me to further simplify my logic. I realized that triggering the definition and usage separately and asynchronously would enhance the speed of my API, so I divided each function into separate endpoints. This change significantly boosted performance, and updating the API prompts to yield more concise and consistent formats further improved processing efficiency.
Following the GPT-3.5-Turbo-1106 update, my API's functionality became much faster. However, I was aiming for seamless user interaction with the word table, so I explored advanced methods for interacting with React states. I discovered that React Context was a suitable option for maintaining word additions and deletions within the web app state, while triggering API endpoints in the background. Overcoming challenges with this new state management approach, I achieved smooth UI interaction with the words table. I then advanced the project by triggering separate asynchronous API functions to generate a quiz question and three incorrect answers as soon as a new word was added to the database. This backend logic for quiz generation activates only during word addition, significantly reducing the load during quiz time. This approach of pre-generating quiz data allowed for quick retrieval of the prepared data for quizzes from the database.
Additionally, I implemented a new UpdateWordDetails function, activated directly from the word context, to update word definitions and usage as soon as they were retrieved from OpenAI. The final challenge was generating a random set of questions and answers each time a user started a quiz. This proved problematic since Supabase couldn't use the ORDER BY RANDOM() SQL method. My workaround involved fetching all user questions, assigning them IDs, and selecting four random questions using Math.random. While not the most elegant solution, it was practical for the MVP stage of my app, avoiding the need for a database index.
The next steps involve developing a statistics system for users to track their progress and possibly reorganizing my components in a clearer, more standardized manner, refactoring dependencies, and introducing separate state providers for the quiz and words sections.
Lexilum: an AI interactive vocabulary learning web app
Introduction
Lexilum is an app designed to help advanced students quickly learn new words. It's perfect for those who need fast definitions and easy ways to add words to their active vocabulary. The app uses AI to automatically generate definitions, usage examples, and quiz content.
The motivation behind Lexilum comes from the need for advanced language learners to have an efficient tool for vocabulary enhancement. The AI in Lexilum focuses on giving clear, popular definitions and straightforward examples, eliminating the need for extra context or clicks. A significant advantage of Lexilum is its unlimited vocabulary range, only bounded by the AI's ability to understand and respond to context.
Design Choices and Technologies
This is the second version of this application. During its development, I spent many hours learning new technologies and overcoming technical challenges.
- I started with learning React for a modern technology stack, then moved on to Next.js for server-side rendering.
- Admin Dashboard Template: Initially used as a starting point for the dashboard. It had Next Auth and Planetscale, but I switched to different providers later.
- The Tremor React table was a key part of my app - the word list. I modified it to work with React context and used Tremor for other elements like buttons and inputs for easier integration.
- For frontend styling, I switched from standard CSS to Tailwind for a simpler way to manage and change component styles.
- TypeScript is used for its strong typing and error checking capabilities.
- **Next.js Serverless Functions:** Chosen for their ease of use and scalability. They help in managing words, fetching and processing content from OpenAI, and converting responses to JSON.
- Building the API made it clear that I needed better word interaction, so I learned about state managers and added React Context to my project.
- I chose Supabase as the main database for its simplicity and real-time features.
- Clerk was picked for user authentication and security, and its good integration with the latest Next.js.
High-Level Components
The Lexilum app is built with a focus on efficiency and user experience, incorporating several integral components:
1. User Authentication & Authorization: Clerk is employed for its robust security and user management capabilities. This choice ensures a secure environment for users, crucial for handling personal progress data and preferences.
2. Dashboard UI:The combination of React and Next.js, coupled with deployment on Vercel, ensures a responsive and high-performing user interface. React Context is integrated as a state manager to enhance UI responsiveness and interactivity.
3. Vocabulary Database & CRUD Operations: Supabase serves as the core database, providing real-time data handling. This is augmented by Next.js serverless functions, which facilitate asynchronous data operations, ensuring a smooth and efficient database interaction for vocabulary management.
4. Quiz Generation & Management: A dynamic quiz experience is crafted using a custom randomization algorithm. This is further supported by Next.js serverless functions that efficiently format data into JSON for the quiz interface, allowing for a seamless and engaging quiz module.
Overcome Technical Challenges
The initial version of this app used standard fetches within the component to retrieve a word, its definition, and usage. This approach led to significant delays (averaging 30 seconds) due to the time taken for requests to reach OpenAI, parse the inconsistent response laden with extra symbols and a constantly changing format, and then adapt the output for the layout. To address this, I shifted this logic from the component to the API endpoint, resulting in faster performance, though some issues persisted. Additionally, the lengthy wait time for API responses introduced numerous edge-case errors, prompting me to further simplify my logic. I realized that triggering the definition and usage separately and asynchronously would enhance the speed of my API, so I divided each function into separate endpoints. This change significantly boosted performance, and updating the API prompts to yield more concise and consistent formats further improved processing efficiency.
Following the GPT-3.5-Turbo-1106 update, my API's functionality became much faster. However, I was aiming for seamless user interaction with the word table, so I explored advanced methods for interacting with React states. I discovered that React Context was a suitable option for maintaining word additions and deletions within the web app state, while triggering API endpoints in the background. Overcoming challenges with this new state management approach, I achieved smooth UI interaction with the words table. I then advanced the project by triggering separate asynchronous API functions to generate a quiz question and three incorrect answers as soon as a new word was added to the database. This backend logic for quiz generation activates only during word addition, significantly reducing the load during quiz time. This approach of pre-generating quiz data allowed for quick retrieval of the prepared data for quizzes from the database.
Additionally, I implemented a new UpdateWordDetails function, activated directly from the word context, to update word definitions and usage as soon as they were retrieved from OpenAI. The final challenge was generating a random set of questions and answers each time a user started a quiz. This proved problematic since Supabase couldn't use the ORDER BY RANDOM() SQL method. My workaround involved fetching all user questions, assigning them IDs, and selecting four random questions using Math.random. While not the most elegant solution, it was practical for the MVP stage of my app, avoiding the need for a database index.
The next steps involve developing a statistics system for users to track their progress and possibly reorganizing my components in a clearer, more standardized manner, refactoring dependencies, and introducing separate state providers for the quiz and words sections.
Other Projects
© Copyright 2024. All rights Reserved.
Made by
© Copyright 2024. All rights Reserved.
Made by
Available for Work
Available for Work