https://github.com/asrieldreemurrgm/github_profile_viewer

A React-based GitHub profile viewer built for learning purposes, featuring user search, public repositories display, error handling, and CSS Modules styling.
https://github.com/asrieldreemurrgm/github_profile_viewer

components css css-modules css-modules-react fetch-api frontend github-api html5 javascript jsx learning-project react react-hooks useeffect-hook vite vitejs-react web-app

Last synced: 3 months ago
JSON representation

A React-based GitHub profile viewer built for learning purposes, featuring user search, public repositories display, error handling, and CSS Modules styling.

• Host: GitHub
• URL: https://github.com/asrieldreemurrgm/github_profile_viewer
• Owner: AsrielDreemurrGM
• Created: 2024-11-18T12:01:26.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-08-05T00:48:50.000Z (3 months ago)
• Last Synced: 2025-08-05T02:33:30.267Z (3 months ago)
• Topics: components, css, css-modules, css-modules-react, fetch-api, frontend, github-api, html5, javascript, jsx, learning-project, react, react-hooks, useeffect-hook, vite, vitejs-react, web-app
• Language: JavaScript
• Homepage: https://mostrador-perfis-git-hub.vercel.app
• Size: 59.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
  
GitHub Profile Viewer

  
Este README também está disponível em Inglês.

  


    This is a GitHub profile viewer developed to practice and study React fundamentals.

    The application allows users to search for any GitHub username and view their public profile

    information and repositories. It includes error handling for non-existent users and profiles with no public repos.

  

  
🔗 Live Demo

  


    

      Click here to see it live on Vercel

    

  

  
🚀 Features

  


    
GitHub user search by username;

    
Displays profile info and public repositories;

    
Custom styling using CSS Modules;

    
Error messages for "User Not Found" and "No Public Repositories";

    
Responsive and clean UI;

    
Built with Vite + React for fast development and performance.

  

  
🧠 What Was Learned

  


    
React component creation and organization;

    
useEffect and useState hooks for data fetching and state management;

    
Fetching data using Fetch API;

    
Conditional rendering and list rendering in JSX;

    
Error handling and user feedback techniques;

    
Import/export of modules and variables in React;

    
How to deploy a Vite + React app to Vercel.

  

  
🛠️ Technologies Used

  


    
JavaScript (ES6+)

    
React

    
Vite

    
CSS Modules

    
HTML5

    
Fetch API

  

  
📜 Commit History Summary

  


    
Project initialized with React + Vite setup;

    
Explored returning values in JSX and HTML cleanup;

    
Studied module import/export, component structuring, and event handling;

    
Implemented user search, repository listing, and CSS Modules for styling;

    
Added input validation and disabled unused form elements;

    
Improved UX with dynamic error messages for edge cases;

    
Final cleanup and deployed to Vercel.