Skip to content

Have something in mind?

Let’s talk

Frontend Engineering

Product Engineering

Pather

Pather is an education platform developed by TechSkill UK, connecting learners with industry experts through courses, live classes, and interactive learning experiences. I worked on the platform as a frontend developer, delivering three applications for learners, experts, and administrators. After another developer left the project, I took ownership of frontend delivery, implementing core learning workflows, building reusable components, improving application performance, and mentoring an intern through task assignments and code reviews. By establishing reusable interface components and development patterns, I was able to accelerate implementation across the applications while maintaining a consistent user experience.

Project details

Project type
EdTech Platform
Role
Frontend Developer
Engagement
Paid Contract · Remote
Period
April – July 2024
Status
Engagement completed
Technologies
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Mantine
  • Sentry

Context

Project context.

Pather is an education platform developed by TechSkill UK to connect learners with experts through structured courses, live sessions, and interactive educational experiences. The product consisted of three applications, each designed around a different set of responsibilities: a learner application for accessing educational content, an expert application for creating and managing learning experiences, and an administrator application for managing the platform. The learner experience supported course enrollment, live classes, quizzes, and learning progress. Experts needed tools to upload videos, create courses, schedule live sessions, and manage assessments. Administrators required interfaces for managing users, reviewing expert verification, overseeing course content, and monitoring platform activity. I joined the project during active development. Following another developer's departure, I assumed responsibility for delivering the frontend applications while working alongside an intern whom I guided through implementation tasks and code reviews.

Project setting

The project required frontend delivery across three applications within a relatively short engagement. After taking ownership of the frontend, I balanced implementation of complex workflows with guiding an intern through smaller development tasks. I also introduced coding guidelines and reusable components to improve consistency across the codebase and make subsequent application development more efficient.

Problem space

  • Three distinct user groups needed dedicated applications with different features and workflows.
  • Learners needed straightforward access to courses, live sessions, quizzes, and progress information.
  • Experts needed tools for creating and managing educational content without unnecessary complexity.
  • Administrators needed centralized oversight of users, expert verification, courses, and platform activity.
  • The team needed to deliver multiple frontend applications while maintaining consistent components and development practices.
  • Media-heavy features such as video players, quizzes, and reporting charts required careful loading and performance management.

Target users

  • Learners enrolling in courses and participating in educational activities.
  • Industry experts creating courses, delivering live classes, and managing assessments.
  • Platform administrators overseeing users, experts, educational content, and reporting.

Contribution

My contribution.

I worked as a frontend developer on Pather from April to July 2024, taking ownership of frontend delivery across the learner, expert, and administrator applications. My responsibilities included developing core features, establishing reusable components, improving performance, reviewing code, and mentoring an intern.

My work covered the three major interfaces of the platform, from learner-facing educational experiences to expert content-management tools and administrator dashboards. A significant part of my contribution involved reusing components and established implementation patterns across applications, allowing subsequent interfaces to be developed more quickly. I also took responsibility for frontend code quality, performance improvements, and day-to-day technical guidance for an intern working on the project.

  1. Learner Application Development

    Built learner-facing interfaces for discovering and enrolling in courses, participating in live classes, taking quizzes, and monitoring learning progress. Developed reusable components that later supported implementation of the expert application.

  2. Expert Application Development

    Implemented frontend workflows for experts to upload course videos, create and manage courses, conduct live classes, and prepare quizzes. Reused components and patterns from the learner application to accelerate development and maintain consistency.

  3. Administrator Dashboard

    Developed administrative interfaces for user management, expert KYC verification, course management, moderation, and platform reporting. Implemented data tables, charts, and management workflows to support administrative oversight.

  4. Frontend Architecture and Performance

    Established reusable components, shared implementation patterns, and coding guidelines across the applications. Applied code splitting, lazy loading, server-side rendering, caching, and video-related optimizations to improve how resource-intensive features were delivered. Configured Sentry for production error monitoring.

  5. Technical Mentorship and Delivery Ownership

    Took ownership of frontend delivery after another developer left the project. Worked directly with an intern, delegated suitable tasks, handled more complex implementation work, conducted code reviews, and documented codebase conventions to maintain consistency and support development.

Scope of ownership

The learner application provided reusable components and implementation patterns that helped accelerate subsequent work on the expert application. The learner interface took approximately one week and three days to implement, while the expert interface was completed in approximately one week through reuse of existing components and established development patterns. Beyond delivering features, I contributed to the team's development process by reviewing code, mentoring an intern, and maintaining guidelines for frontend implementation.

Implementation

Technical breakdown.

Pather's frontend implementation centered on three applications built around different user roles and educational workflows. Using Next.js, React, and TypeScript, I implemented interfaces for learners, experts, and administrators, with reusable components and consistent development patterns. The implementation also addressed the performance requirements of educational applications, particularly features involving videos, quizzes, and data-heavy administration dashboards.

  1. Learner Experience

    • Next.js
    • React
    • TypeScript
    • Tailwind CSS
    • Mantine

    Developed the learner application to support the core learning journey, from enrolling in courses to attending live sessions, completing quizzes, and monitoring progress.

    The interface brought these activities together into a structured experience that learners could use throughout their courses.

    Components developed during this stage also established reusable patterns for other parts of the platform.

    • Course enrollment and learning workflows.
    • Live class participation.
    • Interactive quizzes and assessments.
    • Learning progress interfaces.
    • Reusable frontend components.

  2. Expert Content Management

    • Next.js
    • React
    • TypeScript
    • Tailwind CSS
    • Mantine

    Built the expert application to provide instructors with tools for creating and delivering educational content.

    The application supported course creation, video uploads, live classes, and quiz management, enabling experts to organize and deliver their learning experiences.

    I reused existing components and implementation patterns from the learner application, reducing the amount of frontend work needed to deliver the expert interface.

    • Course creation and management.
    • Educational video uploads.
    • Live class workflows.
    • Quiz creation.
    • Shared interface components and development patterns.

  3. Administration and Reporting

    • Next.js
    • React
    • TypeScript
    • Mantine

    Implemented administrative interfaces for overseeing users, experts, and educational content.

    The administrator application included workflows for user management, reviewing expert KYC submissions, managing courses, and handling moderation tasks.

    Built data tables, charts, and reporting interfaces to support visibility into platform operations.

    • User management.
    • Expert KYC verification and approval.
    • Course management.
    • Content moderation.
    • Reporting dashboards.
    • Data tables and charts.

  4. Performance, Reusability, and Monitoring

    • Next.js
    • React
    • TypeScript
    • Sentry

    Improved application performance by managing how resource-intensive features and modules were loaded.

    Applied code splitting and lazy loading to video players, quizzes, charts, and other application modules, reducing unnecessary loading of functionality outside the user's immediate workflow.

    Also worked with server-side rendering, caching, and video-related optimization techniques.

    Alongside performance improvements, I established coding guidelines and reusable components to support consistent implementation across the three applications.

    Configured Sentry to provide visibility into frontend errors in production.

    • Code splitting for application modules.
    • Lazy loading for video players, quizzes, and charts.
    • Server-side rendering and caching.
    • Video-related performance optimization.
    • Reusable components and shared implementation patterns.
    • Coding guidelines and code reviews.
    • Production error monitoring with Sentry.

Outcomes

What the work delivered.

My engagement resulted in frontend delivery across Pather's learner, expert, and administrator applications, supporting educational workflows for three distinct user groups. Reusable components and shared implementation patterns accelerated development of subsequent interfaces. I also improved frontend loading strategies, introduced production error monitoring, and contributed to code quality through documentation, mentoring, and code reviews.

  1. Deliverable

    Three Frontend Applications

    Delivered frontend functionality across three applications serving learners, experts, and platform administrators, each with dedicated interfaces for its responsibilities.

    Measured impact

    Applications
    3

    Learner, expert, and administrator applications.

    The applications collectively supported course enrollment, educational content creation, live classes, quizzes, user management, expert verification, moderation, and reporting.

  2. Outcome

    Faster Expert Application Development

    Reused components and established development patterns from the learner application to accelerate implementation of the expert interface.

    Measured impact

    Expert UI delivery
    ~1 week

    Compared with approximately one week and three days for the learner interface.

    Component reuse reduced the need to rebuild common interface elements and provided established frontend patterns for the subsequent application.

  3. Deliverable

    Frontend Performance Improvements

    Implemented loading and optimization strategies for resource-intensive educational features, including video players, quizzes, charts, and application modules.

    The work included code splitting, lazy loading, server-side rendering, caching, and video optimization. No measured percentage improvement is claimed.

  4. Deliverable

    Reusable Frontend Foundations

    Established reusable components and documented development conventions to maintain consistency across the platform's applications.

    These patterns helped support frontend delivery across the learner, expert, and administrator experiences while reducing repeated implementation work.

  5. Deliverable

    Mentorship and Code Quality

    Provided technical guidance to an intern through task delegation, coding guidelines, and code reviews while taking responsibility for complex frontend implementation work.

    This contributed to a more structured development process during an engagement that required delivery of several application interfaces.

  6. Deliverable

    Production Error Monitoring

    Configured Sentry to support monitoring and investigation of frontend errors in production.

    The integration provided an error-monitoring capability for identifying and investigating application issues after deployment.