{"id":25926894,"url":"https://github.com/abhish3kk/repofinder-react","last_synced_at":"2026-04-12T13:04:54.536Z","repository":{"id":276427229,"uuid":"929036521","full_name":"abhish3kk/repofinder-react","owner":"abhish3kk","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-28T18:50:31.000Z","size":195,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T21:56:00.356Z","etag":null,"topics":["authentication","axios","azure-deployment","cicd","husky","javascript","jwt","react","react-router","tailwind","tsx","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abhish3kk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-07T17:32:47.000Z","updated_at":"2025-02-28T18:50:34.000Z","dependencies_parsed_at":"2025-02-08T07:18:16.075Z","dependency_job_id":"6bf27ddd-1722-42c1-99b1-4eba5c658668","html_url":"https://github.com/abhish3kk/repofinder-react","commit_stats":null,"previous_names":["abhish3kk/github-favourites-fe","abhish3kk/repofinder-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhish3kk%2Frepofinder-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhish3kk%2Frepofinder-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhish3kk%2Frepofinder-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhish3kk%2Frepofinder-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhish3kk","download_url":"https://codeload.github.com/abhish3kk/repofinder-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241731744,"owners_count":20010781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","axios","azure-deployment","cicd","husky","javascript","jwt","react","react-router","tailwind","tsx","vite"],"created_at":"2025-03-03T20:03:48.964Z","updated_at":"2026-04-12T13:04:54.496Z","avatar_url":"https://github.com/abhish3kk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\ntitle: Repofinder React\ndescription: RepoFinder allows users to search GitHub repositories based on various filters such as topics, languages, stars, sorting order, and result limits. Users can log in to save their search preferences.\nstack: React, Azure, GitHub Actions, Zustand, TypeScript, Tailwind CSS, Node Express, SQLite, Swagger, Azure Devops, JWT\n---\n\n# Repofinder - React\n\n## Live Demo\n\n🔗 **Repofinder Live:** [https://repofinder.abhish3kk.in](https://repofinder.abhish3kk.in)\n\n## Table of Contents\n\n1. [Introduction](#introduction)\n\n   - [What is Repofinder?](#what-is-repofinder)\n   - [Features](#features)\n\n2. [Application Architecture](#application-architecture)\n\n   - [Overview](#overview)\n   - [Component Breakdown](#component-breakdown)\n   - [State Management](#state-management)\n   - [API Communication](#api-communication)\n\n3. [Application Flow](#application-flow)\n\n   - [Entry Point (`main.tsx`)](#entry-point-maintsx)\n   - [App Initialization](#app-initialization)\n   - [Routing \u0026 Navigation](#routing--navigation)\n   - [Authentication Flow](#authentication-flow)\n   - [Fetching and Displaying GitHub Repos](#fetching-and-displaying-github-repos)\n   - [Favoriting Repositories](#favoriting-repositories)\n   - [Error Handling \u0026 Edge Cases](#error-handling--edge-cases)\n\n4. [Tech Stack](#tech-stack)\n\n   - [Frontend Technologies](#frontend-technologies)\n   - [Libraries \u0026 Dependencies](#libraries--dependencies)\n   - [API \u0026 Backend Communication](#api--backend-communication)\n\n5. [Project Setup \u0026 Installation](#project-setup--installation)\n\n   - [Prerequisites](#prerequisites)\n   - [Installation Steps](#installation-steps)\n   - [Environment Variables](#environment-variables)\n\n6. [Running the Application](#running-the-application)\n\n   - [Development Mode](#development-mode)\n   - [Production Build](#production-build)\n\n7. [API Interaction](#api-interaction)\n\n   - [Health Check API](#health-check-api)\n   - [Authentication APIs](#authentication-apis)\n   - [GitHub API Calls](#github-api-calls)\n   - [Favorites API](#favorites-api)\n\n8. [Folder Structure](#folder-structure)\n\n9. [Deployment](#deployment)\n   - [Deployment Steps](#deployment-steps)\n   - [Azure Hosting](#azure-hosting)\n\n## Introduction\n\n### What is Repofinder?\n\nRepofinder is a React application that helps users discover GitHub repositories efficiently. It interacts with the GitHub API via a Node.js Express backend, allowing users to search for repositories based on customizable parameters such as **topics, programming language, star count, result limit, sorting criteria,** and more. Users can configure these filters in the **Settings** section to refine their search and find repositories that align with their interests.\n\n### Features\n\n- **Search Repositories by Topic \u0026 Language** – Easily filter repositories based on relevant technologies and domains.\n- **Find Active \u0026 Relevant Projects** – Avoid outdated or inactive repositories by prioritizing projects with recent activity.\n- **Sort by Stars \u0026 Popularity** – Discover trending repositories based on their star count and engagement.\n- **Reduce Overwhelm** – Many top-ranked repositories can be complex or inactive. Repofinder helps users find projects that are easier to contribute to based on recent activity and stack relevance.\n\n## Application Architecture\n\n### Overview\n\nRepofinder follows a **client-server architecture**, where the frontend (React) communicates with the backend (Node.js + Express) to fetch repositories via the GitHub API. The application ensures seamless user authentication, state management, and API communication to provide an interactive user experience.\n\n```mermaid\ngraph LR;\n    User --\u003e|Requests| ReactApp;\n    ReactApp --\u003e|API Calls| NodeBackend;\n    NodeBackend --\u003e|Fetches Data| GitHubAPI;\n    NodeBackend --\u003e|Response| ReactApp;\n    ReactApp --\u003e|Displays Data| User;\n```\n\n\u003e The diagram above represents the data flow: Users interact with the React frontend, which fetches data from the backend, and the backend queries the GitHub API before returning the results to the client.\n\n### Component Breakdown\n\n```\nsrc/components\n├── Card.tsx\n├── Combobox.tsx\n├── Darklight.tsx\n├── Error.tsx\n├── Loader.tsx\n├── MainContent.tsx\n├── Nav.tsx\n└── UserDropdown.tsx\n```\n\nThe application consists of various reusable and structural components, categorized as follows:\n\n#### **Core UI Components**\n\n- **Card.tsx** – Displays repository details such as name, stars, and description.\n- **Combobox.tsx** – A searchable dropdown component for selecting options like topics or languages.\n- **Darklight.tsx** – Toggles between dark and light themes.\n- **Error.tsx** – Displays error messages when API calls fail or when the backend is unreachable.\n- **Loader.tsx** – A loading spinner shown during API calls or page transitions.\n\n#### **Structural Components**\n\n- **MainContent.tsx** – The primary layout container that renders content dynamically.\n- **Nav.tsx** – The navigation bar containing links and user profile actions.\n- **UserDropdown.tsx** – A headless component for user-related actions like logout and profile settings.\n\n### State Management\n\nRepofinder uses a combination of **Zustand** and **Context API** for efficient state management:\n\n#### **Global State Management with Zustand**\n\nZustand is used for managing application-wide state while ensuring minimal re-renders. The following stores handle different aspects of the app:\n\n```\nsrc/store\n├── appStore.ts\n├── authStore.ts\n├── index.ts\n└── settingStore.ts\n```\n\n- **`appStore.ts`** – Manages global app settings like theme selection (dark/light mode).\n- **`authStore.ts`** – Stores authentication details, including user session and JWT tokens.\n- **`settingStore.ts`** – Maintains user-defined search filters (topics, language, stars, etc.).\n\n#### **Context API for UI State**\n\nContext API is used for handling UI-related transient states that don’t require persistence, such as:\n\n- **Loader State** – Controls when to show/hide the loader during API requests and page transitions.\n\nBy combining **Zustand** for persistent, app-wide state and **Context API** for temporary UI state, Repofinder ensures a smooth and optimized user experience.\n\n### Folder Structure\n\n```\nsrc\n├── AppRoutes.tsx\n├── Provider.tsx\n├── api\n│   ├── api.service.ts\n│   ├── axiosInstance.ts\n│   ├── config.ts\n│   ├── endpoints.ts\n│   ├── http.service.ts\n│   └── index.ts\n├── assets\n│   ├── react.svg\n│   └── repos.json\n├── auth\n│   └── ProtectedRoute.tsx\n├── components\n│   ├── Card.tsx\n│   ├── Combobox.tsx\n│   ├── Darklight.tsx\n│   ├── Error.tsx\n│   ├── Loader.tsx\n│   ├── MainContent.tsx\n│   ├── Nav.tsx\n│   └── UserDropdown.tsx\n├── contexts\n│   ├── authContext.ts\n│   ├── healthContext.ts\n│   ├── index.ts\n│   └── loaderContext.ts\n├── hooks\n│   ├── index.ts\n│   ├── useAuth.ts\n│   └── useLoader.ts\n├── index.css\n├── main.tsx\n├── models\n│   ├── api.request.model.ts\n│   ├── api.response.model.ts\n│   ├── app.models.ts\n│   ├── app.types.ts\n│   ├── github.model.ts\n│   └── github.types.ts\n├── providers\n│   ├── AuthProvider.tsx\n│   ├── HealthProvider.tsx\n│   ├── LoaderProvider.tsx\n│   └── index.ts\n├── routes\n│   └── index.tsx\n├── store\n│   ├── appStore.ts\n│   ├── authStore.ts\n│   ├── index.ts\n│   └── settingStore.ts\n├── utils\n│   ├── enumToArray.ts\n│   ├── getLabelFromOption.ts\n│   └── index.ts\n├── views\n│   ├── Dashboard.tsx\n│   ├── Login.tsx\n│   ├── Register.tsx\n│   └── Settings.tsx\n└── vite-env.d.ts\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhish3kk%2Frepofinder-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhish3kk%2Frepofinder-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhish3kk%2Frepofinder-react/lists"}