How We Built Yathrika: A Multi-Mode Next.js Platform

Tapu — Thu, 30 Jul 2026 19:09:55 +0000

Building one platform for different types of users creates an interesting development challenge. The interface must remain consistent while each user receives tools designed for their own needs.

This was the main idea behind Yathrika, a connected digital platform built with Next.js.

Yathrika provides three primary experiences:

Personal Mode
Student Mode
Business Mode

In this article, I will explain the development approach, responsive interface structure, API integration, and technical SEO improvements used while building the platform.

The Main Development Challenge

The platform needed to support different user requirements without making the website feel like three unrelated applications.

Personal users need calendars, notes, memories, and daily planning tools.

Students need assignments, flashcards, quizzes, schedules, and progress tracking.

Businesses need digital-screen management, content, campaigns, schedules, and analytics.

The main goal was to keep the visual language consistent while changing the features and dashboard information for each mode.

Building the Platform with Next.js

Yathrika uses Next.js with the App Router.

The project is divided into reusable page components, shared layout elements, public routes, API routes, and mode-specific dashboard components.

Reusable components helped maintain consistency in areas such as:

Navigation
Cards
Buttons
Page spacing
Typography
Responsive behaviour
Hover effects
Footer structure

This structure also makes it easier to update one section without affecting the complete website.

Creating Responsive Interfaces

Every important page was designed for mobile, tablet, laptop, and desktop screens.

Responsive development included:

Converting desktop grids into smaller mobile grids
Adjusting image sizes for different screens
Preventing headings and descriptions from overflowing
Keeping cards aligned across screen sizes
Maintaining readable font sizes
Preserving button accessibility
Optimizing dashboard layouts for small devices

Instead of creating separate pages for mobile and desktop, responsive utility classes were used to adapt the same components.

Personal, Student, and Business Modes

Personal Mode

Personal Mode is designed for everyday planning and organization. It includes tools related to calendars, events, memories, notes, storage, weather, and daily activities.

Explore it here:

View Yathrika Personal Mode

Student Mode

Student Mode helps students organize assignments, study schedules, quizzes, flashcards, vocabulary, goals, and academic progress.

Explore it here:

View Yathrika Student Mode

Business Mode

Business Mode provides tools for managing digital screens, locations, campaigns, content, playlists, schedules, and analytics.

Explore it here:

View Yathrika Business Mode

Dynamic Product and API Integration

The pricing and checkout flow was designed to work with backend product APIs.

Instead of keeping product information permanently inside frontend files, the platform can retrieve details such as:

Product name
Model
Price
Features
Product image
Availability
Discount information

This makes it possible to update product information from the backend without manually changing every frontend component.

The checkout flow connects product selection, order information, payment processing, and order confirmation.

Device Registration

Yathrika also includes a device-registration experience.

The registration flow is designed to support steps such as:

Email verification
User information
Device or SKU validation
Username validation
Password creation
Device registration
Generated device code

This creates a structured process for connecting a user account with a Yathrika device.

Technical SEO Improvements

Technical SEO was another important part of the project.

The improvements included:

Unique page titles and meta descriptions
Canonical URLs
One main H1 heading on each page
Descriptive image alt text
Removal of broken links
XML sitemap generation
Robots metadata
Open Graph metadata
Twitter metadata
Breadcrumb structured data
WebPage and application JSON-LD
Bing Webmaster URL submission
Sitemap validation

Transaction pages such as checkout and order confirmation were excluded from the public sitemap because they are not intended to be search-engine landing pages.

What I Learned

Working on Yathrika provided practical experience with:

Next.js App Router
React component architecture
TypeScript
Responsive design
API integration
Payment workflows
Device-registration flows
Accessibility improvements
Technical SEO
Bing Webmaster Tools
Git and GitHub collaboration

The most important lesson was that a website should not only look good. It should also be responsive, maintainable, accessible, crawlable, and connected correctly to backend services.

Conclusion

Yathrika demonstrates how one Next.js platform can provide different experiences for individuals, students, and businesses while maintaining a consistent design system.

The project continues to evolve through API integration, device features, performance improvements, and SEO work.

Explore the live platform:

Visit Yathrika

DEV Community: Tapu

How We Built Yathrika: A Multi-Mode Next.js Platform

The Main Development Challenge

Building the Platform with Next.js

Creating Responsive Interfaces

Personal, Student, and Business Modes

Personal Mode

Student Mode

Business Mode

Dynamic Product and API Integration

Device Registration

Technical SEO Improvements

What I Learned

Conclusion