Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krish-makadiya/devdetective
GitHub User Profiles is a lightweight web application built with HTML, CSS, and JavaScript that allows users to search and view GitHub profiles using the GitHub REST API. It displays key information such as the user's avatar, bio, repositories, and followers, all within a responsive design interface.
https://github.com/krish-makadiya/devdetective
api-integration css frontend-development github-api html javascript open-source responsive-design user-profiles web-application
Last synced: 2 days ago
JSON representation
GitHub User Profiles is a lightweight web application built with HTML, CSS, and JavaScript that allows users to search and view GitHub profiles using the GitHub REST API. It displays key information such as the user's avatar, bio, repositories, and followers, all within a responsive design interface.
- Host: GitHub
- URL: https://github.com/krish-makadiya/devdetective
- Owner: Krish-Makadiya
- Created: 2024-06-24T13:28:52.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-29T07:05:29.000Z (17 days ago)
- Last Synced: 2025-01-29T08:22:10.076Z (17 days ago)
- Topics: api-integration, css, frontend-development, github-api, html, javascript, open-source, responsive-design, user-profiles, web-application
- Language: CSS
- Homepage: https://krishmakadiya-devdetective.netlify.app/
- Size: 21.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DevDetective
This is a simple web application that retrieves and displays GitHub user profiles using the GitHub API. Built with just HTML, CSS, and JavaScript, this app allows users to search for any GitHub username and view details like profile picture, bio, repositories, and more.
---
## Features
- **Search GitHub Profiles**: Enter a GitHub username to retrieve their profile.
- **User Details**: Displays the user's avatar, name, bio, public repositories, followers, and following.
- **Error Handling**: Provides feedback for invalid or non-existent usernames.
- **Responsive Design**: Optimized for desktop and mobile devices.
---
## Tech Stack
- **Frontend**: HTML, CSS, and JavaScript
- **API**: [GitHub REST API](https://docs.github.com/en/rest)
---
## Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/github-user-profiles.git
cd github-user-profiles
```
2. Open the `index.html` file in your browser to run the application.
---
## Usage
1. Enter a GitHub username in the search bar.
2. View the user's profile details, including their repositories, followers, and more.
3. If the username doesn't exist, an error message will be displayed.
---
## File Structure
```
.github-user-profiles/
├── index.html # Main HTML file
├── style.css # CSS styles
├── script.js # JavaScript logic for API integration
└── README.md # Project documentation
```
---
## API Integration
This project uses the GitHub REST API to fetch user data. The API endpoint used is:
- `GET https://api.github.com/users/{username}`
Example:
```javascript
fetch(`https://api.github.com/users/exampleUser`)
.then(response => response.json())
.then(data => console.log(data));
```
---
## Contributing
Contributions are welcome! Follow these steps to contribute:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature/your-feature-name
```
3. Make your changes and commit them:
```bash
git commit -m "Add a meaningful commit message"
```
4. Push to your branch:
```bash
git push origin feature/your-feature-name
```
5. Create a Pull Request.
---
## Contact
For queries or suggestions, feel free to contact:
- **Email**: [email protected]
---