REACT FRAMEWORK LABORATORY (LEMONCODE MASTER FRONT END)

Overview

This project is a React-based web application that demonstrates modern frontend development practices using TypeScript, Vite, and a clean architectural pattern. The application allows users to search for GitHub organizations and view their members in a user-friendly interface.

Features

• Organization Search: Users can input a GitHub organization name to search for its members
• GitHub API Integration: Fetches real-time data from the GitHub API to display organization members
• Member List Display: Shows organization members with their profile information
• Error Handling: Gracefully handles cases where organizations are not found
• Responsive Design: Clean and modern UI built with React components

Tech Stack

• React 19.1.0 - Modern React with hooks and functional components
• TypeScript - Type-safe development
• Vite - Fast build tool and development server
• React Router DOM - Client-side routing
• GitHub API - External data source

Project Structure

The project follows a pod-based architecture pattern:

src/
├── scenes/          # Main application scenes
├── pods/            # Feature-based components (input, list, detail)
├── layouts/         # Layout components
├── core/            # Context providers and core logic
├── router/          # Application routing
└── styles.css       # Global styles

Architecture Patterns

• Pod Architecture: Each feature is organized in self-contained pods with their own components, API calls, mappers, and view models
• Context API: Global state management using React Context
• Component Composition: Clean separation between presentation and business logic
• TypeScript Interfaces: Strong typing for better development experience

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

   npm install

Development

Start the development server:

npm start

The application will be available at http://localhost:5173

Build

Create a production build:

npm run build

Preview

Preview the production build:

npm run preview

Usage

1. Open the application in your browser
2. Enter a GitHub organization name in the input field (e.g., "microsoft", "facebook", "google")
3. Press enter or click search to fetch the organization's members
4. View the list of members with their profile information
5. If the organization doesn't exist, an error message will be displayed

Learning Objectives

This project demonstrates:

• Modern React development with hooks and functional components
• TypeScript integration in a React project
• API integration and error handling
• Component architecture and separation of concerns
• State management with Context API
• Clean code practices and project organization

---

This project is part of the Lemoncode Master Front End program