Frontend Mentor - GitHub User Search App

This repository contains my solution to the GitHub user search app challenge on Frontend Mentor. The application allows users to search for GitHub profiles by username, displaying relevant information fetched from the GitHub Users API. Key features include a responsive design, light and dark theme toggle, and dynamic error handling.

Table of Contents

• Overview
  • Features
  • Screenshot
  • Links
• Process
  • Built With
  • Key Learnings
• Usage
• Areas for Improvement
• Author
• Acknowledgments

---

Overview

Features

• Search GitHub users by username.
• Display user information, including:
  • Full name and username.
  • Avatar image.
  • Join date.
  • Bio.
  • Repository, follower, and following counts.
  • Links to Twitter, company, and website (if available).
  • Location.
• Responsive error handling for non-existent users.

---

Screenshot

Desktop View

Desktop View (Dark Mode)

Active States

Tablet View

Mobile View

---

Links

• Live Site URL: Visit the live demo

---

Process

Built With

• HTML5: Provides a semantic structure for the application.
• Tailwind CSS: To style and organize the layout.
• JavaScript: Handles interactivity, API calls, and DOM updates.

---

Key Learnings

This project enhanced skills in:

• API Integration:
  Using the fetch API to retrieve and display real-time data from the GitHub API.

• Error Handling:
  Managing HTTP errors, such as 404 responses, to display user-friendly messages.

• DOM Manipulation:
  Dynamically updating the UI based on fetched data using JavaScript methods like querySelector, classList, and innerHTML.

• Date Formatting:
  Transforming the created_at field from ISO format to a user-friendly format.

• Responsive Design:
  Ensuring proper alignment and layout across various screen sizes.

---

Usage

1. Enter a GitHub username in the search bar.
2. Press "Search" to fetch and display the user details.
3. If the user is not found, an error message will be displayed.

---

Areas for Improvement

• Design: Enhance the UI with better styling and responsiveness using Tailwind CSS or custom CSS.
• Accessibility: Improve keyboard navigation and implement aria-* attributes.
• Functionality:
  • Add pagination for repositories.
  • Include additional user details like starred repositories.
  • Implement a dark mode toggle.

---

Author

• GitHub: @sayaliakbar
• LinkedIn: @sayaliakbar

---

Acknowledgments

• GitHub API Documentation
• MDN Web Docs for JavaScript reference and tutorials.
• Frontend Mentor community for their helpful resources and encouragement.