Skip to main content

Introduction

Author​

Tiyasa Kundu

Contact Info​

Email LinkedIn

Project Title​

Completion of the FOSSology UI using React.js and Next.js

What's the project about?​

The FOSSology UI Completion Project aims to finalize and enhance the React-based user interface that was previously initiated but remained incomplete due to limited REST API support. Several pages currently lack full functionality and proper data integration. This project focuses on completing those pages, improving the UI/UX structure, and aligning the interface with FOSSology REST API v2, transitioning away from the deprecated v1 implementation. The goal is to deliver a more stable, user-friendly, and maintainable UI for the FOSSology ecosystem.

Key Deliverables​

  1. Migration of Modern Stack

    • Upgrade from React v17 to React v19.
    • Transition from Create React App (CRA) to Vite for improved performance and development speed.
    • Migrate from npm to pnpm for efficient package management.

  2. Next.js Integration

    • Evaluate and set up the project using Next.js framework to support server-side rendering and routing.
    • Rebuild and organize existing components within the Next.js architecture

  3. Completion of Incomplete UI Pages

    • Finalize and implement all pending pages and components based on comparison with the older UI.
    • Ensure proper data fetching via REST API v2 on all incomplete or partially implemented views.

  4. UI/UX Restructuring

    • Implement key user experience suggestions from the parallel UX improvement initiative.
    • Enhance layout, usability, and visual consistency based on user feedback and design prototypes.

  5. REST API v2 Alignment

    • Remove any remaining usage of deprecated REST API v1.
    • Integrate and test full compatibility with REST API v2 endpoints.

  6. Bug Fixes & Issue Resolution

  7. Storybook Component Library

    • Create reusable components and document them in Storybook.
    • Ensure proper documentation and interactive previews.

  8. Developer Documentation Support

    • Provide clear guidelines for setting up the development environment, coding conventions, component usage, and internal API interaction.