Introduction:
In the modern world, code collaboration and version control are fundamental for software development. Platforms like GitHub have become the cornerstone for developers to store, manage, and share their projects with ease. This project is an attempt to build a GitHub-like code repository system using HTML, CSS, and JavaScript, where users can create and manage their code repositories locally in their browser. By utilizing core web technologies, the system simulates key functionalities such as user authentication, repository management, commit history tracking, and more, while ensuring an intuitive and interactive user experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub-Like Code Repository System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form input, form textarea, form button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
form button {
background-color: #333;
color: white;
border: none;
border-radius: 3px;
}
.repo-list {
margin-top: 20px;
}
.repo {
padding: 15px;
background-color: #e8e8e8;
margin-bottom: 10px;
border-radius: 5px;
}
.repo h3 {
margin: 0;
}
.repo p {
margin: 5px 0;
}
.repo .view-files, .repo .download-repo {
background-color: #333;
color: white;
padding: 5px 10px;
border: none;
border-radius: 3px;
cursor: pointer;
margin-right: 5px;
}
.hidden {
display: none;
}
#loginSection, #repoSection {
display: none;
}
#authSection input, #authSection button {
margin: 10px 0;
}
.commit-history {
list-style-type: none;
padding: 0;
}
.commit {
padding: 10px;
background-color: #f9f9f9;
border-left: 3px solid #333;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>GitHub-Like Code Repository System</h1>
</div>
<div class="container" id="authSection">
<h2>Sign In or Register</h2>
<form id="authForm">
<input type="text" id="username" placeholder="Username" required>
<button type="submit">Sign In / Register</button>
</form>
</div>
<div class="container" id="repoSection">
<h2>Create a New Repository</h2>
<form id="repoForm">
<input type="text" id="repoName" placeholder="Repository Name" required>
<textarea id="repoDescription" placeholder="Repository Description" rows="3" required></textarea>
<button type="submit">Create Repository</button>
</form>
<h2>Your Repositories</h2>
<input type="text" id="searchRepo" placeholder="Search repositories">
<div class="repo-list" id="repoList"></div>
</div>
<div class="container" id="repoDetailsSection" style="display: none;">
<h2 id="repoDetailsTitle"></h2>
<p id="repoDetailsDescription"></p>
<h3>Commit Changes</h3>
<form id="commitForm">
<input type="text" id="commitMessage" placeholder="Commit Message" required>
<button type="submit">Commit</button>
</form>
<h3>Commit History</h3>
<ul class="commit-history" id="commitHistory"></ul>
<button id="backToRepoList">Back to Repositories</button>
</div>
<script>
let repositories = JSON.parse(localStorage.getItem('repositories')) || {};
let currentUser = null;
let currentRepoIndex = null;
// Handle user authentication
document.getElementById('authForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
currentUser = username;
// If user doesn't exist, create an empty array of repositories for the user
if (!repositories[username]) {
repositories[username] = [];
}
localStorage.setItem('repositories', JSON.stringify(repositories));
document.getElementById('authSection').style.display = 'none';
document.getElementById('repoSection').style.display = 'block';
displayRepositories();
});
// Handle repository creation
document.getElementById('repoForm').addEventListener('submit', function(event) {
event.preventDefault();
const repoName = document.getElementById('repoName').value;
const repoDescription = document.getElementById('repoDescription').value;
if (repoName && repoDescription) {
const newRepo = { name: repoName, description: repoDescription, commits: [] };
repositories[currentUser].push(newRepo);
localStorage.setItem('repositories', JSON.stringify(repositories));
displayRepositories();
document.getElementById('repoForm').reset();
}
});
// Display repositories
function displayRepositories() {
const repoList = document.getElementById('repoList');
repoList.innerHTML = '';
const searchQuery = document.getElementById('searchRepo').value.toLowerCase();
repositories[currentUser].forEach((repo, index) => {
if (repo.name.toLowerCase().includes(searchQuery)) {
const repoDiv = document.createElement('div');
repoDiv.classList.add('repo');
repoDiv.innerHTML = `
<h3>${repo.name}</h3>
<p>${repo.description}</p>
<button onclick="viewRepoDetails(${index})">View Details</button>
`;
repoList.appendChild(repoDiv);
}
});
}
// View repository details (like commits, branches, etc.)
function viewRepoDetails(repoIndex) {
currentRepoIndex = repoIndex;
const repo = repositories[currentUser][repoIndex];
document.getElementById('repoDetailsTitle').innerText = repo.name;
document.getElementById('repoDetailsDescription').innerText = repo.description;
document.getElementById('repoDetailsSection').style.display = 'block';
document.getElementById('repoSection').style.display = 'none';
displayCommits();
}
// Handle commit submission
document.getElementById('commitForm').addEventListener('submit', function(event) {
event.preventDefault();
const commitMessage = document.getElementById('commitMessage').value;
if (commitMessage) {
repositories[currentUser][currentRepoIndex].commits.push({ message: commitMessage, date: new Date() });
localStorage.setItem('repositories', JSON.stringify(repositories));
displayCommits();
document.getElementById('commitForm').reset();
}
});
// Display commit history
function displayCommits() {
const commitHistory = document.getElementById('commitHistory');
commitHistory.innerHTML = '';
const commits = repositories[currentUser][currentRepoIndex].commits;
commits.forEach(commit => {
const commitItem = document.createElement('li');
commitItem.classList.add('commit');
commitItem.innerHTML = `<strong>${commit.message}</strong> - ${new Date(commit.date).toLocaleString()}`;
commitHistory.appendChild(commitItem);
});
}
// Back to repository list
document.getElementById('backToRepoList').addEventListener('click', function() {
document.getElementById('repoDetailsSection').style.display = 'none';
document.getElementById('repoSection').style.display = 'block';
});
// Initial call to display repositories
if (currentUser) {
displayRepositories();
}
</script>
</body>
</html>
Features Overview:
- User Authentication: Simulated login and registration system using local storage.
- Repository Creation: Users can create new repositories, give them names, and add descriptions.
- Commit History: Users can track changes by adding commits to each repository, mimicking GitHub’s version control.
- Search and Manage Repositories: Search repositories by name and manage them with view details, delete, and edit functionalities.
- File Upload and Download: Users can upload files to a repository and download the entire repository as a compressed file.
- Branching Simulation: Mimic branching and merging systems for collaborative development.
- Star, Fork, and Issue Simulation: Users can star and fork repositories and simulate raising issues for collaborative improvements.
- User-Specific Repositories: Each user has their own set of repositories stored locally, which is displayed only when they are logged in.
Conclusion:
This GitHub-like code repository system serves as an educational project demonstrating the power of front-end technologies in building fully functional web applications. While it lacks the backend infrastructure typical of large-scale platforms, it provides a foundation for understanding the logic and structure behind version control systems. Further enhancements such as database integration, real-time collaboration, and live deployment options could extend the project into a full-fledged tool. This system encourages learning and experimentation, preparing developers to work on more complex and real-world applications.