Introduction
Not all software is created from scratch. In practice, developers will reuse existing code from various GitHub repositories and combine those pieces of code to form new projects. When I began learning to code, I struggled with imposter syndrome; I believed that I wasn’t a “real” developer unless I wrote every line of code myself.
Think of it as a puzzle. You are given a bunch of pieces and you as the developer have to understand how to put them together to complete the puzzle.
This blog post will guide you through the process of tracing the origins of code within a project. By understanding where each piece comes from and how they fit together, you will gain proficiency in combining different code into a whole, cohesive project.
Quick Notes
Although I advocate for using other’s code to build projects, you still need to be able to understand and modify the code you use. Remember, the most optimized and efficient code is probably already written and available for you to use — you just have to find it.
That is unless you are able to entirely write out code that is more optimized and efficient than the code that is already available, but in that case, you are probably a genius and should be working on more important things than reading this blog post.
Code Searching Tools
Before using any of these tools, you should set objectives for what you are looking for in the code. For example, if you want to find out where the code for a specific file came from, you should search for that file name along with any unique logic or custom implementations that are not common in other codebases (custom logging, error handling, etc.); any other search would be too broad and would not yield the results you are looking for.
If you do not understand what I mean, do not worry, we’ll use thees tools in practice when we inspect the small project I’ve created. For now, just focus on how the tools work.
https://chatgpt.com/share/45b3e4b5-66ce-4e3b-b287-13898e499174
- GitHub Pilot Code Referencing https://www.youtube.com/watch?v=8SOh3A9LEeE
- Github CoPilot Log to see the URL of the code snippet
- GitHub Search
tried many different tools that can find where code snippets inside the projects and only two made sense Here are some ways to find code snippets inside of large codebases:
GitHub Code Referencing -
Github Search - GitHub Code Referencing: This feature helps you find similar code in public repositories and understand its origin and licensing. 2. GitHub Search (Advanced Search): GitHub’s advanced search capabilities allow you to search for specific code snippets, functions, or patterns across all public repositories, with filters for language, repository, and more.
Finding code
Fix format : https://chatgpt.com/share/0b3c0e94-9167-4eb0-a7a7-0074e1ec69e3 To understand how project’s are built, you need to find out where the code originated from so that you could then see how they get put together. To do this I recommend using Github Copilot Code Referencing and Github Search.
There are many other tools available as well but consider that it only makes sense to use tools made by Github (since all other tools that search Github would just be using Github’s API)
First we’ll inspect the small project I’ve created. This will give you an idea of how to find out where the code originated from and how it was put together.
I’ll give an introduction to the tools and how to use them and then we will look at a small project I’ve created to demonstrate how to find out where the code originated from and how it was put together.
Mini Project Example
We will start of with a small, simple project I’ve created to introduce the concept of extrapolating code from different repositories to form a new project.
If you would like to work alongside this blog, you can download the project through a github repository; however, I will be providing the code here as well.
Below you’ll find the code for a simple to-do list application that uses a Node.js backend with Express and MongoDB, and a frontend built with HTML, CSS, and vanilla JavaScript. The application allows users to add tasks to a list and view all tasks in the list.
Here is the directory for the project
├── package-lock.json
├── package.json
├── public
│ ├── app.js
│ ├── index.html
│ └── styles.css
└── server.js
Here is the code server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect('mongodb://localhost:27017/todolist', { useNewUrlParser: true, useUnifiedTopology: true });
const TaskSchema = new mongoose.Schema({
name: String,
completed: Boolean
});
const Task = mongoose.model('Task', TaskSchema);
app.use(express.static('public'));
app.get('/tasks', async (req, res) => {
const tasks = await Task.find();
res.json(tasks);
});
app.post('/tasks', async (req, res) => {
const newTask = new Task(req.body);
await newTask.save();
res.json(newTask);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
public/app.js
document.getElementById('add-task').addEventListener('click', addTask);
async function fetchTasks() {
const response = await fetch('http://localhost:3000/tasks');
const tasks = await response.json();
const taskList = document.getElementById('task-list');
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task.name;
taskList.appendChild(li);
});
}
async function addTask() {
const newTaskInput = document.getElementById('new-task');
const newTask = { name: newTaskInput.value, completed: false };
await fetch('http://localhost:3000/tasks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newTask)
});
newTaskInput.value = '';
fetchTasks();
}
fetchTasks();
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>Todo List</h1>
<ul id="task-list"></ul>
<input type="text" id="new-task" placeholder="New task">
<button id="add-task">Add Task</button>
</div>
<script src="app.js"></script>
</body>
</html>
public/styles.css
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#app {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
And here the dependencies: package.json
{
"name": "To-Do-list-app-main",
"version": "1.0.0",
"description": "## Simple To-Do List App Documentation",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.20.2",
"cors": "^2.8.5",
"express": "^4.19.2",
"mongoose": "^5.13.15"
}
}
Now let’s see how we can find out where the code originated from and how it was put together.
(ChatGPT here is where I need you to derive the github repository for the code above)
In the future, I am hoping to add to this blog post to include the inspection of a more complex real world project example