🔎 Open Source Explorer

Discover, search, filter, and explore open-source projects from GitHub.

Open Source Explorer is a web application built with React and TypeScript that makes it easier to discover interesting GitHub repositories without having to manually search through GitHub.

🌐 Live Demo: https://open-source-explorer.netlify.app/

🐙 GitHub: https://github.com/drjkmr30/Open-Source-Explorer

---

✨ Features

• 🔍 Search GitHub repositories
• ⭐ Sort repositories by stars
• 🍴 Sort repositories by forks
• 🕐 Sort repositories by recently updated
• 💻 Filter repositories by programming language
• 📄 Paginated search results
• 📊 View repository activity
• 🏷️ View repository topics and metadata
• 🔗 Direct links to GitHub repositories
• 📱 Responsive interface
• ⚡ Fast client-side application powered by Vite
• 📈 Google Analytics integration

---

🖥️ Preview

Homepage

---

🛠️ Tech Stack

Frontend

• React
• TypeScript
• Vite
• SCSS / CSS

APIs & Libraries

• GitHub REST API
• React Router
• Axios
• Recharts
• date-fns
• clsx

Development Tools

• Node.js
• npm
• Git
• GitHub
• Netlify

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• npm
• Git

You can verify your installation with:

node --version
npm --version
git --version

Installation

Clone the repository:

git clone https://github.com/drjkmr30/Open-Source-Explorer.git

Move into the project directory:

cd Open-Source-Explorer

Install dependencies:

npm install

Start the development server:

npm run dev

The application will be available at:

http://localhost:5173/

---

🏗️ Production Build

To create a production build:

npm run build

To preview the production build locally:

npm run preview

The production files are generated in the:

dist/

directory.

---

🔌 GitHub API

Open Source Explorer uses the GitHub REST API to retrieve repository information.

The application uses GitHub's repository search endpoint to retrieve information such as:

• Repository name
• Description
• Stars
• Forks
• Issues
• Programming language
• Topics
• Last update
• Repository owner

Repository activity is retrieved using GitHub's commit activity endpoint.

No GitHub personal access token is required for the current public repository search functionality.

---

📂 Project Structure

src/
│
├── components/
│   ├── common/
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── EmptyState/
│   │   ├── ErrorState/
│   │   ├── Input/
│   │   └── Loader/
│   │
│   ├── features/
│   │   ├── ActivityChart/
│   │   ├── Filters/
│   │   ├── Pagination/
│   │   ├── RepositoryCard/
│   │   ├── RepositoryGrid/
│   │   └── SearchBar/
│   │
│   └── layout/
│       ├── Header/
│       └── Footer/
│
├── hooks/
│   ├── useRepositories.ts
│   └── useRepositoryActivity.ts
│
├── services/
│   └── github.service.ts
│
├── styles/
│   ├── abstracts/
│   ├── base/
│   ├── components/
│   └── main.scss
│
├── types/
│   ├── activity.types.ts
│   └── repository.types.ts
│
├── App.tsx
├── App.css
├── index.css
└── main.tsx

---

🌐 Deployment

The application is deployed using Netlify.

Production URL:

https://open-source-explorer.netlify.app/

The project is connected to the GitHub repository, so changes pushed to the main branch can trigger a new deployment automatically.

---

🔎 SEO & Analytics

Open Source Explorer includes basic technical SEO features:

• Descriptive page title
• Meta description
• Canonical URL
• Open Graph metadata
• Robots directives
• robots.txt
• XML sitemap
• HTTPS

Google Analytics is used to understand how visitors interact with the application.

Google Search Console is used to monitor search visibility and indexing.

---

🚧 Future Improvements

Some features planned for future versions include:

• 🔥 Trending repositories
• ⭐ More advanced repository filters
• 🏷️ Topic-based discovery
• 📊 More detailed repository analytics
• ❤️ Save/favorite repositories
• 🔐 GitHub authentication
• 🌙 Improved theme controls
• 📱 Further mobile optimization
• 🔎 Dedicated pages for programming languages and topics
• ⚡ Improved search relevance
• 🧠 Personalized repository recommendations

---

🤝 Contributing

Contributions, suggestions, and bug reports are welcome.

If you find a problem or have an idea for improving Open Source Explorer, feel free to open an issue or submit a pull request.

---

👨‍💻 Author

Dheeraj Kumar

🎓 Computer Science & Engineering

🐙 GitHub: https://github.com/drjkmr30

💼 LinkedIn: https://www.linkedin.com/in/dheeraj-kumar-75157a266/

🌐 Portfolio: https://iridescent-marshmallow-d4910f.netlify.app/

---

📄 License

This project is open source and available under the MIT License.