Next.js SSR Webview

Ringle Tutor

Ringle is a South Korean EdTech leader with £60 million in annual revenue, offers specialised one-on-one English lessons with tutors from top global universities.

Development of a scheduling page with timezone compatibility.

Tech Stack - React.js, Next.js, Typescript, moment.js, react-query, yarn, Redux toolkit, TailwindCSS

Duration - November 2021 to February 2022

This is a calendar page with features that allow tutors to set their available time ranges, view and accept/reject student lesson requests. It was developed with timezone compatibility, displaying time zones based on the server-stored tutor's timezone.

✔️ Key Implementation Details

Integrated week marking between the monthly calendar area, weekly calendar area, and lesson cards.
Implemented a UI to ensure that various layers such as operating hours, open slots, Google Calendar events, and lesson schedules do not overlap in the weekly calendar.
Implemented synchronization between slots and lesson cards displayed in the calendar, allowing for mutual scrolling and focus.
Displayed time based on the server-stored customer’s timezone rather than the browser timezone.
Formatted dates and times using Moment.js.

✔️ Project Details

A. Improved Tutor Scheduling Page Usability

Identified Usability Issues

Concerns about usability degradation due to lengthy API response times when switching calendar weeks:
- The response time for the lesson/slot information API was approximately 3 seconds. Loading new information with each week switch resulted in waiting times, leading to a decrease in usability.
Compatibility with small displays:
- When viewing the calendar on devices with a viewport of 1,000px or less, a scroll area appeared in the calendar, making it impossible to see all slot information at a glance.
- This led to the risk of tutors missing lesson requests for time slots not visible on the screen, potentially reducing the acceptance rate of lessons.

Improvements

Upon the initial page load, we made a single API call to fetch data for four weeks, dispatched it to the Redux store, and displayed information immediately using the stored data. API calls were only made when switching beyond the initial four weeks.
We implemented the scrollIntoView Web API to ensure that the selected lesson slot is focused within the viewport. This enhancement makes it easier for tutors to review lesson requests.