Work

startup · 2024

Gostu

FlutterReactLaravelAI Integration

An educational platform built for Algerian baccalaureate students with mobile app and web interface.

Gostu educational platform interface for Algerian students

Gostu: Engineering an Educational Platform for Algerian Students

In the digital age, creating a robust educational platform requires a harmonious blend of technologies. As the developer behind Gostu, I’ve navigated the challenges of integrating various tools to deliver a seamless experience for Algerian baccalaureate students.

Gostu Web Application Landing Page

This project offered a deep dive into the technical journey of building an educational platform, from mobile app development to backend deployment and AI integration.

Mobile App Development with Flutter

Gostu Mobile App Home Screen Gostu Mobile App Resources Section

To ensure a consistent experience across devices, we chose Flutter, Google’s UI toolkit, for mobile app development. Flutter’s single codebase allows for simultaneous deployment on both Android and iOS platforms, streamlining the development process.

Key Steps:

  1. Project Setup: Initiated a new Flutter project and structured the directory to maintain scalability.

  2. State Management: Implemented the Provider package to manage state efficiently, ensuring smooth UI updates and data handling.

  3. API Integration: Established communication with the Laravel backend using the http package, facilitating data retrieval and user authentication.

  4. UI/UX Design: Crafted intuitive interfaces adhering to Material Design principles, enhancing user engagement.

Deploying the Flutter App to Google Play Store

From Development to Distribution

Taking a Flutter application from development to users' hands requires meticulous attention to the Play Store submission process.

Publishing the app on the Google Play Store involved several critical steps:

  1. Google Play Developer Account: Registered and set up the account to manage app releases.

  2. App Signing: Generated a keystore file and configured the build.gradle to sign the app, ensuring authenticity. Detailed instructions can be found in the Flutter documentation.

  3. Building the App Bundle: Used Flutter’s build commands to create an optimized app bundle for release.

  4. Play Console Submission: Uploaded the app bundle, provided necessary metadata, and submitted it for review.

React Frontend Development and Hosting

Gostu Web Resource Page

For the web interface, React was the framework of choice due to its component-based architecture and efficient rendering.

Development Highlights:

  • Component Reusability: Developed modular components to promote reusability and maintainability.

  • Routing: Utilized React Router for seamless navigation between pages.

  • State Management: Employed Redux to manage global state, ensuring consistent data flow.

Frontend Tech Stack
  • ⚛️ React
  • 🔄 Redux
  • 🛣️ React Router
  • 🎨 Styled Components

Hosting Considerations:

Hosting a React application requires serving static files efficiently. Platforms like Vercel and Netlify offer streamlined deployment processes with continuous integration capabilities.

Backend Development with Laravel

The backend, built with Laravel, handles business logic, authentication, and data management.

Core Implementations:

  • RESTful APIs: Designed endpoints adhering to REST principles, facilitating communication with both the React frontend and Flutter app.

  • Authentication: Leveraged Laravel’s built-in authentication mechanisms to secure user data.

  • Database Management: Used Eloquent ORM for efficient database interactions and migrations.

// Example of a Laravel API endpoint for fetching educational resources
public function getResources(Request $request)
{
    $resources = Resource::with('category')
        ->where('subject_id', $request->subject_id)
        ->where('level', $request->level)
        ->orderBy('created_at', 'desc')
        ->paginate(10);
    
    return ResourceCollection::make($resources);
}

Hosting Laravel for High Traffic

Anticipating a large user base necessitated a hosting solution capable of scaling. DigitalOcean provided the infrastructure to deploy and manage the Laravel application effectively.

Scalability Strategies:

  • Load Balancing: Distributed incoming traffic across multiple servers to prevent bottlenecks.

  • Caching: Implemented caching mechanisms to reduce database queries and enhance response times.

  • Database Optimization: Regularly optimized queries and indexed critical fields to maintain performance.

Integrating Large Language Model (LLM) API Services

AI-Powered Learning

The integration of LLM APIs into Gostu provides students with personalized learning assistance, enhancing their educational experience with intelligent, contextual support.

To enhance the platform’s capabilities, integrating AI-driven features was paramount. By connecting with LLM APIs, Gostu offers intelligent assistance to students.

Integration Process:

  1. API Selection: Chose an LLM API that aligns with the platform’s objectives and offers comprehensive documentation.

  2. Authentication: Secured API access using tokens and managed them securely within the backend.

  3. Request Handling: Designed middleware to process user inputs, send them to the LLM API, and handle responses efficiently.

  4. User Interaction: Presented AI-generated content in a user-friendly manner, ensuring clarity and relevance.

Conclusion

Developing Gostu was a multifaceted endeavor that required careful selection and integration of technologies. By leveraging Flutter, React, Laravel, and LLM APIs, we’ve crafted a platform that not only meets the educational needs of Algerian students but also offers a scalable and robust solution poised for future growth.

This project is part of my story: read Chapter 2: Building for Real People for the context around it.