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:
Student Mode
Student Mode helps students organize assignments, study schedules, quizzes, flashcards, vocabulary, goals, and academic progress.
Explore it here:
Business Mode
Business Mode provides tools for managing digital screens, locations, campaigns, content, playlists, schedules, and analytics.
Explore it here:
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:
Top comments (0)