Testimonial
"We took a chance on Lee as we’d not worked together before, and he was going to be the sole developer for our project. So it was an important hire to get right. This chance paid off significantly.Lee has been a wonderful, helpful, and extremely valuable asset to our team over the course of the project. He has taken on a significant amount of technical responsibility within the product, and has been instrumental in completing a significant ground-up restructuring, and also a front end redesign. He is full of ideas, which are carefully planned and calculated, which clearly demonstrates his detail-oriented personality traits. He is able to follow instructions without hesitation, but if he disagrees or thinks there’s a better way, he is able to tell you why, and offer an alternative solution.
I really enjoyed working with Lee, and I would have no hesitations hiring him again should the need arise." Bex Longhurst - Chief Technology Officer - Teach.io
About Teach
Teach.io is an e-learning platform. When I joined the project, the app was a proof of concept. I implemented Teach.io as a Progressive Web App (PWA), enabling key features such as push notifications, offline access, and app installation across different devices. This upgrade significantly enhanced user engagement and accessibility, bridging the gap between web and native applications.
The app consists of 4 major pillars:
- Community: The Facebook-like community is the heart of the app. It allows multi-media posting including Tenor GIFs, emojis, likes, comments, and replies.
- Course builder: Teachers can create courses with the customer course builder using multi-media content, module drip feed and progress tracking.
- Messaging: Instantly message other members with push notifications.
- Calendar: An RFC-compliant iCal app with Zoom integration for scheduling live lessons or other community events.
The app is fully functional and has all supporting features such as student management, group creation, avatars, personal preferences, security 2FA, notifications, email and more.For all features see: https://teach.io/features.
Technologies used
Express
Google App Engine
Google Cloud Task
AWS
MUX
Chargebee
Stripe
Zoom
Zapier
MongoDB
New Relic
Next.js
Socket.io
React Email
React Query
Formik & Yup
Tailwind
React query state management
Shortly after joining the project, I encountered significant performance bottlenecks due to excessive API calls and unnecessarily complex boilerplate code. The application relied heavily on useReducer and React's context API.
Challenges
- Stale data issues: Users frequently saw outdated information due to lack of automatic refetching.
- Excessive API calls: Redundant network requests were being made, leading to performance degradation and unnecessary server load.
- Complex state management: Managing API state with useState, useEffect, and useReducer required excessive boilerplate code.
- Side effects: useEffect was a source of numerous difficult-to-trace bugs. Some effects were written directly in components rather than abstracted to custom hooks.
- Difficult cache invalidation: Implementing caching and refetching logic was error-prone and inconsistent or impossible.
To address these challenges, I introduced React Query into the project, replacing manual API state management and caching logic. React Query provided an elegant way to manage server-state data efficiently.
Results of introducing React Query
- Reduced API calls: React Query caches responses, significantly decreasing redundant network requests. During render - if multiple components request the same data - API calls are automatically deduplicated.
- No useContext: The need for useContext was removed, greatly reducing unnecessary rerendering.
- Improved data consistency: Automatic refetching ensures users always see fresh data.
- Skeletons: The implementation of skeletons became trivial. It was easy to identfy if data was undefined, fresh, or stale. Suitable skeletons or animations now make it easy to indicate to the user what is happening in real-time.
- Simplified state management: Eliminated unnecessary reducer logic, led to cleaner, more maintainable code. A simple repeatable pattern was established, allowing new code to be authored quickly.
- Enhanced user experience: Optimistic updates provided instant UI feedback, improving perceived performance. For example, liking or commenting on a post is instantaneous and any failures would later result in a roll-back.
Conclusion
Migrating to React Query revolutionised the state management strategy of the web application. I improved performance, reduced complexity and enhanced the user experience by leveraging its powerful caching, background refetching, mutation handling capabilities and Optimistic updates. React Query is now a key part of the teach.io development stack.Integrations
During my time at Teach.io I integrated multiple external services to implement the following main features:
Zoom
Teach.io has an app on the Zoom Market Place that allows students and teachers to create and attend meetings from within the Teach.io calendar app.See the Zoom Marketplace App.Zapier
To provide better marketing options for teachers, the teach.io Zapier app was introduced. Now, student creation can be automated via Zapier actions, allowing teachers to sell courses on external platforms or sales funnels.
Chargebee
Chargebee handles teachers' subscriptions on Teach.io. Teachers are able to manage, update, and cancel their own subscriptions in-app as well as see the status of any free trials or coupons.For customer service purposes, Teach.io admins can manage subscriptions by adding free services or updating costs.Mux
Mux allows teachers to upload encrypted videos, only allowing students to view them via the app. This keeps their IP protected. Teachers are updated when the video is ready to review and publish the course.Stripe
Teachers can add their Stripe API keys to the app. They can create sales pages to market courses and receive money directly. Various management tools are available to track sales and refund customers.Event system
Teach.io needed a reliable and scalable solution for email and push notifications about important events, discussions, activities within the app, student milestones, new course content created or unlocked by the drip-feed feature. The event system has to function according to a user's app preference.
The challenge was to ensure notifications were sent efficiently and on time, without overloading the system. To achieve this, the below technologies were implemented.
Implementation
- Google Cloud Tasks: Chosen as the event management system to schedule and run tasks efficiently. This allows notifications to be processed asynchronously, improving performance and reliability.
- MongoDB: Used to store event metadata, ensuring quick access and retrieval of relevant event data.
- Express event processing middleware: Middleware was developed to fetch event metadata before passing the event to the appropriate event handler.
- Express debouncing middleware: Debouncing middleware ensures notifications are only sent after the trigger stops changing. This keeps unnecessary notifications down while still keeping users informed about activity on the platform.
- Queue-based processing: Implemented to manage server load and prevent bottlenecks.
Results
- Improved engagement: Users received timely updates, leading to increased interactions within the community.
- Scalability: The solution can handle thousands of notifications daily with minimal performance overhead. Analysis of the community and interesting posts are calculated during night times when server load is low. A points based system was implement to score relevant or interesting content.
- Reliability: Google Cloud Tasks ensured that no notifications were missed, even during high-traffic periods. Automatic retries and New Relic logging was implemented to monitor success.
- Optimized performance: Offloading tasks to asynchronous processing reduced server load, ensuring app responsiveness.
By leveraging cloud-based event management and a well-structured backend, I was able to successfully automate a notification system, enhancing user experience and engagement.
Block content editor
The HTML content editor for the course builder and course sales page allows teachers to create stylish sales pages, as well as useful course resources.
The challenge
Teach.io’s course creation and sales page management were initially reliant on static HTML and the markdown format, requiring teachers to have at least a basic understanding of markdown. This was a major bottleneck in content creation, as non-technical users struggled with formatting and structuring content effectively. Our goal was to provide an intuitive WYSIWYG editor that allowed real-time editing and customization without sacrificing control over the final HTML output.
Why Slate.js?
Given the need for flexible, user-friendly, and extendable features, I chose Slate.js.Slate.js is a framework for building a customizable block editor in React and stood out for several reasons:- Highly customizable: Unlike traditional WYSIWYG editors, Slate.js provides a lower-level API to define the exact behaviour needed. Later, when we needed the slate editor in the community, I was able to add mentions easily.
- React-friendly: Since Teach.io’s front end was built with React, integrating Slate.js felt natural.
- Rich text capabilities: It allowed me to implement features like inline formatting, media embedding, and custom blocks.
- Schema enforcement: Ensuring structured content without breaking HTML semantics was crucial.
Implementation
To build the editor, I configured Slate.js to provide a block editing experience that felt seamless and intuitive. I structured the system to handle different content types, such as headings, paragraphs, images and mentions, ensuring users could easily insert and format content.One of the most powerful aspects of Slate.js was the ability to customize the editor’s behaviour by defining specific rules for content formatting. This allowed me to enforce consistency while still giving users creative control over their course materials.Additionally, I implemented a toolbar with essential formatting options, including bold and italic text, and list creation. By leveraging Slate.js’s flexibility, I ensured that users could paste and edit their content in a way that mirrored a traditional word processor while maintaining the underlying structure needed for clean HTML output.
Storing and retrieving content
Instead of storing raw HTML, I opted to save the structured JSON output generated by Slate.js. This approach provided flexibility in rendering content dynamically and prevented issues with malformed HTML. When content needed to be displayed, it was converted into HTML while maintaining its intended structure and styling.This method also allowed for seamless integration with our database, ensuring that course content and sales pages remained organized and easy to update. It also meant I could introduce new content types and features over time without requiring significant overhauls to the system.The outcome
With the new CMS, course creators at Teach.io were able to build, update, and manage content effortlessly.Slate.js proved to be a powerful tool in the Teach.io stack, enabling a custom editing experience tailored to Teach.io’s needs. By leveraging its flexibility, I transformed how courses and sales pages were managed, ultimately improving both teacher efficiency and learner engagement.The calendar app
The calendar is one of the 4 cornerstones of the app. It supports time zones and repeating events in an RFC iCal format.
Overview
I designed and implemented a robust calendar application within Teach.io.
Challenges
- Handling time zones correctly: Given that users were spread across different time zones, ensuring that events appeared at the correct local time was critical.
- Implementing recurring events: Recurring event rules needed to be flexible (daily, weekly, monthly, custom intervals) and adhere to iCalendar’s RRULE specification.
- Exceptions: Editing of one repeated event or edit all events after a date.
- iCalendar (RFC 5545) compliance: The calendar needed to generate valid .ics files that can be read by external services like Google Calendar and Outlook.
Time zone management
To handle time zones effectively, I used the date-fns library. Events were stored in UTC in the database, and time zone conversion was done dynamically based on the user’s location.Recurring events with RRULE
I used the rrule.js library to generate recurring event rules. The backend stored recurrence rules in the database as per the iCal standard.Generating iCalendar (.ics) files
To allow users to export events, I generated .ics files using ical-generator in Node.js.
Results
- Time Zones: The calendar successfully handles time zones, ensuring events are displayed correctly worldwide.
- Recurring events: Recurring events are flexible and fully customizable by users.
- Import and export: iCalendar export and import functionality enables seamless integration with external services.
- Scalability: The system is scalable, supporting thousands of concurrent users.
By building a custom calendar the app is fully styled and tailored to the needs of Teach.io. I leveraged standardized protocols and robust libraries to build a highly functional and user-friendly calendar for Teach.io. This enhanced scheduling efficiency for educators and learners alike.
Real-time messaging & notifications
I implemented real-time messaging and notifications in teach.io using Socket.io. The goal was to create an instant and seamless communication experience for users, similar to what you’d expect in modern chat applications.
The challenge
Traditional web applications rely on repeated requests to the server to check for new messages or updates. This approach is inefficient and results in stale data.The solution
I integrated Socket.io, a powerful real-time communication library, into the React frontend and an Express backend. This allows messages and notifications to be delivered instantly - as soon as they are sent.The impact
This implementation significantly improved the user experience, making communication smooth and real-time. Users are able to see when others are online. However, this is controllable via user preferences.Email templating
Email templating in web applications can be a particularly tricky challenge due to several key factors. I encountered these difficulties when working on email templates for Teach.io.
Challenges
- Email client incompatibilities: Different email clients (like Gmail, Outlook, and Apple Mail) render emails differently.
- CSS support: Many email clients have limited or outdated support for CSS. Some won’t recognize newer CSS properties or media queries, making responsive email design challenging.
- Cross-device optimization: Emails need to look good on various devices. This requires careful attention to detail in structuring the layout and the styles.
- Testing & maintenance: Since emails are sent to a wide range of users across different devices and email clients, extensive testing is needed to ensure that the design displays consistently.
The solution
I found that React Email is a powerful tool to improve the process by offering a solution that addressed many of the traditional pitfalls of email templating.Here’s why I used React Email to implement a robust email templating solution for teach.io:- Component-based design: React Email allows for email templates to be built using reusable components. Each component can be individually styled and tested, making development faster and more organized.
- Compatibility: React email provides a set of pre-configured strategies and templates that address specific problems encountered in different email clients. This reduced the amount of manual tweaking and testing required to ensure emails look good in various environments.
- Avoiding raw HTML editing: One of the most significant challenges with traditional email templating is the need to manually edit raw HTML. React Email abstracted that away, allowing me to focus on building structure and logic.
- Optimized for testing and debugging: React Email provides tools for previewing email templates, making it easier to debug issues related to rendering, responsiveness, and compatibility.
Results
By using React Email, I was able to streamline the email template development process. It’s a modern solution that simplifies the traditionally complex task of email templating, making it more efficient and less error-prone.Contact
Contact me by submitting the form below and I will get back to you as soon as possible.