Menu
Freshten R. |
October 01, 2024
When I first joined the Lexy App project, the mission was clear: to revolutionize how people learn languages by leveraging the power of AI. Lexy is this awesome AI tutor web app that helps people learn English. When I hopped on board, I was thrown into the mix with cool tech like Ionic for front-end development, Firebase for our database, and Python for backend development. I was a bit overwhelmed at first, but it’s been an incredible learning experience.
One of the first things I tackled was getting to grips with React and how it works with the Ionic setup. This was my first deep dive into Ionic React, and I quickly learned that it’s a powerful tool that comes with its own set of quirks. I started by working on the tutorial page feature for Lexy, with the challenge of creating a seamless and engaging experience for users who were just getting started with the app.
The idea was to guide users through the app’s features and help them get the most out of the experience, so the tutorial page needed to be both intuitive and interactive. I had to ensure that the tutorial content was clear and that navigation between different sections was smooth. I thought I had a solid plan, but when I put everything together, it just didn’t feel right. Navigation was clunky, and users were getting lost. I received feedback that the page was confusing and not too helpful, which was tough to hear after putting in so much work.
One of the biggest challenges was ensuring that all these elements worked together seamlessly. Integrating the animations with responsiveness and making sure that the tutorial page, which teaches users how to create custom animations, was both functional and visually appealing required much coordination. I spent many hours debugging and refining the details to ensure everything worked smoothly. It took a lot of trial and error, with plenty of mistakes along the way, but I learned so much about user experience design and the importance of keeping things simple and intuitive.
I thought I had a good grasp of CSS, but once I started working with media queries and responsive designs, I realized I still had a lot to learn. My first attempts at making the app responsive were pretty rough. Elements would shift in weird ways, texts would get cut off, and the whole layout would break on smaller screens. I remember feeling so frustrated because I couldn’t figure out what was going wrong.
Next, I focused on designing the landing page, which is crucial because it’s the first thing users see. I wanted it to be welcoming and informative, showcasing what Lexy is all about. This involved not just laying out the information effectively but also ensuring that it was visually appealing. I spent a lot of time working on the layout, colors, and placements of elements to make sure the page was both functional and attractive.
A significant part of this task was making sure everything was responsive. I had to dive into CSS media queries and ensure that our pages looked good on different devices and screen sizes. This meant testing on various devices and seeing the layout to make sure it was both functional and visually appealing across the board. I was super excited to implement all these cool features, such as smooth scrolling and interactive buttons, but I quickly ran into a wall. My animations were lagging terribly, and the page wasn’t responsive at all. I remember the first time I loaded it on my phone—it looked completely broken. Buttons were overlapping, texts were out of place, and images were way too big. It was a total mess. Once again, it took a lot of trial and error, but seeing the results come together was really satisfying.
Animation was another area in which I spent a lot of time. We wanted to add some flair to the app to make interactions more engaging. I learned so much while experimenting with animations for button effects, transitions between pages, and the appearance of elements on the screen. It was fun to experiment with different styles and effects, but it also meant dealing with performance issues to ensure that the animations didn’t slow down the app.
I had to step back and breathe for a while and figure out what was going wrong. I realized that I was trying to add too many codes for animations and transitions without fully understanding how they would affect performance. So, I went back to basics. I refactored my code, stripped down the page, removed unnecessary animations, and focused on making the core elements work correctly. I also spent hours reading through documentation, watching tutorials, and experimenting with different solutions.
The next Lexy-related task for the second half of the year was the implementation of critical features like the badge reward system. The badge system was a core part of Lexy’s engagement strategy. The idea was to motivate users by rewarding them with badges as they progress through different levels and challenges in the app. It was a daunting task, especially for someone still getting the hang of the complexities of Ionic and Firebase, but I was eager to dive in.
I started by understanding the user flow and specific actions that would trigger badge rewards. For example, users could earn a “Message Master” badge upon accomplishing a certain number of correct messages or a “Vocabulary Virtuoso” badge for learning a set number of new words. I also worked closely with the UI/UX team and exchanged ideas for visually appealing and highly intuitive designs.
The implementation was not without its challenges. One of the biggest hurdles was ensuring that the badge system was seamlessly integrated with Firebase. For this, I had to write efficient codes to handle real-time updates whenever a user earned a new badge. This involved setting up Firebase triggers and functions that would automatically update the user’s badge collection and reflect the changes in the app without any lag.
Another hurdle was managing data synchronization between the client-side Ionic app and the Firebase backend. Given the dynamic nature of the badge system, I had to ensure that any progress a user made was consistently tracked and updated. This meant dealing with potential issues such as reading spike usage of Firebase and reaching the daily limit.
I also faced a steep learning curve with Ionic. While I had some experience with other frameworks, Ionic’s specific structure and syntax required me to adapt quickly. I spent much time debugging and learning from my mistakes. I had to dive deep into Firebase documentation and figure out how to properly structure our data and set up real-time listeners. It was a steep learning curve, but eventually, I got it working. Seeing data sync in real time across different devices was like magic, and it felt so rewarding to finally get it right. The support from my team was invaluable during this time. They provided guidance and encouraged me to take on the challenge as an opportunity to grow.
To overcome the hurdles, I broke down the project into smaller, manageable tasks, set daily goals, and focused on tackling one challenge at a time. This approach not only kept me organized but also allowed me to celebrate small wins along the way.
Looking back on my experience with Lexy, I’m proud of what I’ve contributed and learned. As a beginner, stepping into such a significant role was daunting, but it pushed me to grow in ways I never imagined. I’m grateful for the opportunity to be part of this innovative team, and I can’t wait to see what the future holds for Lexy and its users.
My experience working on the badge reward system for Lexy, in particular, has been both challenging and immensely fulfilling. It’s a project that has taught me the value of persistence, teamwork, and continuous learning. I’m eager to keep pushing the boundaries of what we can achieve with Lexy, and I’m excited about all the new features and improvements we’ll bring to users in the future.
That’s been my journey so far with Lexy. It’s been a mix of challenges, failures, and triumphs, and I’m really thrilled about where we’re headed. Thanks for reading and being part of this incredible adventure with us!
