Enhancing the MobTranslate Platform: UI Redesign and New Features

The MobTranslate project is an open-source initiative aimed at preserving Indigenous languages through technology. It provides a platform similar to “Google Translate” for Indigenous languages, making them accessible to speakers, learners, and researchers worldwide. In this update, we focus on recent improvements and features added to the MobTranslate platform, particularly in the user interface and component library.

Recent Updates

1. Redesigned WordCard and WordLikeButton Components

The WordCard and WordLikeButton components have been redesigned to offer a modern UI with enhanced functionality:

• Gradient Backgrounds: WordCards now feature gradient backgrounds that change based on the learning stage, providing a visual cue for users.
• Bucket Status Badges: Visual badges with icons indicate the status of words in learning buckets.
• Improved Stats Display: Stats are now displayed with icon backgrounds and better grouping for clarity.
• Audio Playback Enhancements: Audio playback now includes visual feedback, improving the user experience.
• WordLikeButton Variants: Multiple variants of the WordLikeButton (default, minimal, floating) have been added, along with size options and smooth animations.
• Accessibility and Dark Mode: Improved focus states for accessibility and enhanced dark mode support throughout the components.

2. Input Field Design Improvements

Input fields across the platform have been updated for better usability:

• Increased Height and Padding: The height and padding of input fields have been increased for better touch targets and text spacing.
• Modern Appearance: Rounded corners have been updated from rounded-md to rounded-lg.
• Hover and Focus States: Enhanced hover states and focus rings improve interactivity and accessibility.
• Consistent Styling: All form components, including Input, Textarea, Select, and SearchInput, now have consistent styling.

3. Enhanced Button and Alert Components

The Button and Alert components have been enhanced with new variants and features:

• Button Variants and Sizes: Eight button variants and five size options have been added, along with loading states and icon placement options.
• Alert Variants: Six alert variants have been introduced, with support for titles, descriptions, icons, and dismissible actions.

4. Comprehensive Component Style Guide

A new style guide has been created to showcase all UI components, including custom components like WordCard, WordLikeButton, and StatsCard. The style guide provides usage guidelines and best practices for maintaining consistency across the platform.

Technical Implementation

Code Changes

The following code snippets highlight some of the changes made to the components:

WordCard Component:

<WordCard 
      wordId="1"
      word="nginda"
      translation="you (singular)"
      languageCode="kuku_yalanji"
      languageName="Kuku Yalanji"
      stats={{
        attempts: 10,
        accuracy: 85,
        avgResponseTime: 2.5,
        lastSeen: new Date().toISOString(),
        bucket: 3
      }}
      isLiked={false}
      likesCount={42}
      onLikeToggle={() => console.log('Like toggled')}
      hideStats={false}
    />
    

Alert Component:

<Alert 
      variant="success"
      title="Success!"
      description="Your changes have been saved successfully."
      icon={<CheckCircle className="h-5 w-5" />}
    />
    

Installation and Usage

To get started with the updated MobTranslate platform, clone the repository and install the dependencies:

git clone https://github.com/australia/mobtranslate.com.git
    cd mobtranslate.com
    npm install
    

Run the development server:

npm run dev
    

Architecture Decisions

The redesign focused on improving user experience and accessibility while maintaining a modern aesthetic. The use of Tailwind CSS for styling ensures consistency and ease of customization. The component library is structured to promote reusability and scalability.

Future Roadmap

Future updates will focus on expanding the language database, integrating AI-powered translation features, and enhancing the platform’s performance and scalability.

Conclusion

The recent updates to MobTranslate significantly enhance the user experience through a modernized UI and improved component functionality. These changes align with the project’s mission to preserve Indigenous languages and make them accessible to a global audience.

For more details, visit the MobTranslate GitHub repository and explore the style guide for comprehensive component documentation.