Lao English School

Short Explanation

LaoEnglishSchool is a website where students can book English lessons using a credit system.

Project Goals

LaoEnglishSchool aim to make our lessons fun whilst making you feel comfortable just as you would during a typical conversation with a friend.

Helping hands for students from all around the world through every step of their journey with fun, effective yet simple Lao courses!

Tech Stack Used

The LaoEnglishSchool project uses a range of technologies, including:

• Vue: This user interface framework is used to design and build the user interface of the LaoEnglishSchool app, leveraging reusable components and efficient rendering capabilities.

• Express: This fast and minimalist web application framework is employed in the LaoEnglishSchool app to create augmented reality and 3D experiences, enabling the provision of interactive and immersive content.

• Tailwind CSS: This library is utilized for styling React components, enhancing the visual presentation of the low-poly 3D design of the underworld in the LaoEnglishSchool app.

• PostgreSQL: A powerful and scalable relational database management system, PostgreSQL is used in the LaoEnglishSchool app to store and retrieve data. It plays a role in displaying web content like QR codes and other web-based elements seamlessly.

• MySQL: Another powerful and scalable relational database management system, MySQL is also used in the LaoEnglishSchool app to store and retrieve data. It plays a role similar to PostgreSQL in displaying web content like QR codes and other web-based elements seamlessly. We'll see the feature with the tech stack used in the next section.

Features

Flexible Schedule

Learn anywhere, anytime. We have designed our courses with your busy schedule in mind.

Customized Lesson

Build upon your knowledge and accelerate your learning with engaging, yet challenging lessons.

Functional Class

Pick up daily vocabulary, and expressions to have conversations with real people!

Exclusive Resource

Get access to free lessons, PDF sheets, tips, special promotions and many more.

Online Support

Our team is always here to support you every step of your learning journey.

The Problems and How I Deal With It

During a past website development project, as a developer, I encountered and overcame unique challenges while using Vue 3 and Pinia.

One of the challenges we faced was adapting to the new Composition API introduced in Vue 3. The Composition API allows for more flexible and modular code organization but required a shift in our mindset from the Vue 2 Options API. We had to learn new concepts like setup functions, reactive and ref variables, and the use of composable functions. Understanding and effectively utilizing these new features took some time and required updating our existing knowledgebase.

Incorporating Pinia, a state management solution specifically designed for Vue 3, presented another challenge. Pinia offers a more modular and type-safe approach to managing application state. However, as it was relatively new at the time, resources and documentation were limited compared to more established state management libraries like VueX. We had to rely on community support, forums, and experimenting to understand and leverage Pinia effectively.

Another challenge was transitioning an existing Vue 2 codebase to Vue 3 and integrating Pinia. This required careful consideration of breaking changes and ensuring compatibility with the updated syntax and APIs. We had to refactor components, update dependencies, and migrate the application state to Pinia. The process involved extensive testing to identify and resolve any compatibility issues or unexpected behavior.

While facing these challenges, we gained valuable experiences and insights:

1. Deeper understanding of the Composition API: By embracing the Composition API in Vue 3, we appreciated its benefits in terms of code reusability, composability, and improved maintainability. We witnessed how it facilitated more fine-grained control over component logic, making it easier to reason about and test.

2. Building familiarity with Pinia: Integrating Pinia as our state management solution reinforced our understanding of Vue 3's reactivity system. We learned how to effectively define stores, access and mutate state, and handle actions using Pinia's API. The type-safety and modular nature of Pinia empowered us to develop scalable and robust applications.

3. Adapting to breaking changes: The process of migrating from Vue 2 to Vue 3 taught us the importance of careful planning and thorough testing. We developed strategies for smoothly transitioning codebases, resolving incompatibilities, and minimizing disruption to the overall project.

4. Community collaboration and self-learning: The challenges we faced with Vue 3 and Pinia highlighted the significance of active participation in the developer community. Engaging in forums, seeking help from fellow developers, and contributing back to the ecosystem allowed us to overcome roadblocks and expand our understanding.

Ultimately, the challenges we encountered while using Vue 3 and Pinia in website development strengthened our expertise in these technologies. We acquired a deeper understanding of Vue 3's Composition API, gained proficiency in utilizing Pinia for state management, learned to navigate breaking changes during migrations, and cultivated a sense of collaboration within the development community.

Lessons Learned

As a developer, I earned unique lessons while using Vue 3 and Pinia in website development. Here are some of the notable lessons I learned:

1. Flexibility and Modularity with the Composition API: Vue 3's Composition API introduced a more flexible and modular approach to building components. I learned that by leveraging the Composition API, I could organize and reuse logic more efficiently. The ability to define reactive data using ref and reactive, and composing functions using computed and watch, allowed for more fine-grained control over component behavior. This enhanced flexibility and modularity made my code more maintainable and easier to reason about.

2. Type-Safe State Management with Pinia: Pinia, a dedicated state management solution for Vue 3, offered type safety out of the box. I learned how to define stores using Pinia's API and leverage TypeScript's type system to ensure type safety when working with store state and actions. This eliminated potential runtime errors caused by incorrect data usage. Pinia's modular architecture and support for modules and plugins made state management more organized and scalable.

3. Improved Performance and Reactivity: Vue 3 introduced a reactivity system with better performance characteristics. The optimized reactivity tracking algorithm allowed for more granular updates, reducing unnecessary re-renders and improving overall performance. I learned to leverage the reactive and ref APIs effectively to achieve optimal reactivity within components and improve the responsiveness of my applications.

4. Smooth Migration Process: Upgrading an existing Vue 2 codebase to Vue 3 and integrating Pinia required thoughtful planning and a solid migration strategy. I learned the importance of thoroughly understanding the breaking changes and using available migration tooling and documentation. Additionally, incremental migrations and extensive testing played crucial roles in ensuring a smooth transition to the new version and minimizing disruptions for end-users.

5. Growing Ecosystem and Community Support: Engaging with the Vue 3 and Pinia communities provided valuable insights and support. I learned the importance of actively participating in the ecosystem through contributions, attending conferences, and discussing best practices. Being part of a supportive community expanded my knowledge and allowed me to share experiences and solutions with fellow developers.

6. Documentation and Learning Resources: As Vue 3 and Pinia were relatively new at the time, learning documentation and resources were evolving. This taught me to be resourceful, explore official documentation, follow release notes, and leverage community-driven examples and tutorials. I became more adept at navigating through evolving technologies and adapting to new paradigms.

Overall, my experience using Vue 3 and Pinia in website development provided unique lessons in leveraging the Composition API, achieving type-safe state management, optimizing performance and reactivity, executing smooth migrations, embracing community collaboration, and adapting to evolving ecosystems. These lessons strengthened my proficiency with these technologies and enabled me to build more scalable, maintainable, and performant web applications.