CodeLens

CodeLens is a powerful, all-in-one Chrome extension and web application designed to simplify code comprehension and documentation. Leveraging llama model , CodeLens enables users to summarize code snippets, define technical terms, and generate sharable documentation—directly within the browser.

---

Table of Contents

• Overview
• Problem Statement
• Features
• Tech-Stack
• Dependencies
• Installation and Setup
• Project Structure
• User Manual
• API Documentation
• Smell Analysis Report
• TDD Commit Hash
• Code Coverage
• Contributors
• User Stories
• Acknowledgement

---

Overview

Modern software development often involves reading unfamiliar code, managing extensive codebases, and communicating complex ideas. CodeLens addresses these challenges by offering:

• On-Page Code Summarization: Quickly convert selected code snippets into human-readable summaries.
• Instant Term Definitions: Provide immediate explanations for technical terms for non-technical users.
• File Upload and Analysis: Enable users to upload entire code files for structured summarization.
• Documentation Generation: Automatically generate and share detailed documentation in multiple formats, including direct integration with Google Docs.

---

Problem Statement

Developers and non-technical users alike struggle with:

• Unfamiliar Code: Understanding and documenting unknown code can be time-consuming and error-prone.
• Large Codebases: Legacy or bulk code often needs quick summarization for efficient onboarding.
• Technical Jargon: Non-technical team members face challenges with technical terminology.

CodeLens alleviates these pain points by providing an all-in-one solution that automates code summarization, term definition, and documentation generation, ensuring that knowledge is accessible and shareable.

---

Features

• Login page for both - Extension and Website
• Forgot password functionality
• Dynamic "Summary" button appears when any text is selected for summary
• Error toast notification when selected text exceeds character limit
• Popup suggestion to redirect to the website if text exceeds the limit
• Landing page displaying history tabs post-login
• Input box with file upload for text prompts or file uploads
• Component to display generated responses
• Option to download generated responses as documentation
• Automatically generated shareable documentation links

---

Tech-Stack

---

Dependencies

Frontend Dependencies

Core dependencies

• @reduxjs/toolkit: ^2.6.0
• axios: ^1.7.9
• primeicons: ^7.0.0
• primereact: ^10.9.2
• react: ^18.3.1
• react-copy-to-clipboard: ^5.1.0
• react-dom: ^18.3.1
• react-redux: ^9.2.0

Development dependencies

• @eslint/js: ^9.17.0
• @types/react: ^18.3.18
• @types/react-copy-to-clipboard: ^5.0.7
• @types/react-dom: ^18.3.5
• @vitejs/plugin-react: ^4.3.4
• eslint: ^9.17.0
• eslint-plugin-react-hooks: ^5.0.0,
• eslint-plugin-react-refresh: ^0.4.16
• globals: ^15.14.0
• react-router-dom: ^7.1.4
• redux-persist: ^6.0.0
• typescript: ~5.6.2
• typescript-eslint: ^8.18.2
• vite": ^6.0.5

Backend Dependencies

Core dependencies

• spring-boot-starter-web: ^3.4.2
• spring-boot-devtools: ^3.4.2
• spring-boot-starter-data-mongodb: ^3.4.2
• spring-data-mongodb: ^4.4.1
• lombok: ^1.18.36
• spring-security-web: ^6.4.2
• spring-security-config: ^6.4.2
• jjwt-api: ^0.12.6
• jjwt-impl: ^0.12.6
• jjwt-jackson: ^0.12.6
• spring-boot-starter-mail: ^3.4.2
• jakarta.validation-api: ^3.1.0
• spring-boot-starter-validation: ^3.4.2
• springdoc-openapi-starter-webmvc-ui: ^2.8.4
• poi-ooxml: ^5.4.0

Development dependencies

• spring-boot-starter-test: ^3.4.2
• de.flapdoodle.embed.mongo: ^4.18.1
• junit: ^4.13.2
• junit-jupiter: ^1.19.0
• spring-boot-testcontainers: ^3.4.2
• mongo: ^1.19.0
• mockito-inline: ^4.6.0

Chrome extension

Core Dependencies

• @types/chrome: ^0.0.301
• @types/react: ^19.0.8
• primeicons: ^7.0.0
• primereact: ^10.9.2
• react: ^19.0.0
• react-dom: ^19.0.0
• react-router-dom: ^7.1.4

---

Installation and Setup

CodeLens can be set up in two ways:

• Using Docker (Recommended) – Installs all services (frontend, backend, MongoDB, LLaMA model, SonarQube) in one command
• Without Docker – Run backend and frontend manually with local MongoDB

Using Docker (Recommended) 🐳

1. Clone the Repository

   git clone https://github.com/your-username/codelens.git
   cd codelens

2. Docker Compose (Development Setup)

From the project root, run:

   docker-compose -f docker/dev/docker-compose.yml up --build

This launches:

• Frontend (React + Vite) → http://localhost:3000
• Backend (Spring Boot) → http://localhost:8080
• MongoDB → localhost:27017
• Mongo Express (GUI) → http://localhost:8081
• LLaMA API (Ollama) → http://localhost:11434
• SonarQube → http://localhost:9000

Without Docker🚀

1. Backend Setup

1.1 Start MongoDB locally:

   sudo service mongod start

1.2 Navigate to backend:

   cd backend

1.3 Verify application.properties contains:

   spring.application.name=backend
   spring.profiles.active=dev
   spring.data.mongodb.repositories.enabled=true
   spring.mail.username=csci5308.group01@gmail.com
   spring.mail.password=pgwtwprvdcashxss
   llama.bot.url=http://localhost:11434/api/generate

1.4 Run the Spring Boot app:

  ./mvnw spring-boot:run

➡ Runs at: http://localhost:8080

2. Frontend Setup

2.1 Navigate to frontend:

   cd frontend
   npm install
   npm run dev

2.2 Add this to frontend/config:

   BASE_URL: `http://localhost:8080/api/v1`

➡ Access at: http://localhost:5173

3. Chrome Extension Setup

1. Open chrome://extensions
2. Enable Developer Mode
3. Click "Load Unpacked"
4. Select the extension/ directory

4. LLM Setup

1. Install Ollama

• For Windows - https://ollama.com/download
• For MacOS - https://ollama.com/download
• For Linux - Execute the installation script

  curl -fsSL https://ollama.com/install.sh | sh

2. Verify

  ollama --version

3. Pull the qwen2.5-coder:0.5b Model

  ollama pull qwen2.5-coder:0.5b

4. Start the Ollama Server

  ollama serve

5. Configure the backend

  curl -X POST http://localhost:11434/api/generate -d '{ "model": "qwen2.5-coder", "prompt": "Your prompt here" }'

5. Production Build

Use this if you're deploying the optimized version.

  docker-compose -f docker/prod/docker-compose.yml up --build

➡ Frontend at: http://localhost:5173
➡ Backend at: http://localhost:8000 (running prod profile`)

---

Project Structure

  codelens/
  ├── backend/ # Spring Boot backend application
  ├── docker/ # Docker Files for different environment
  ├── docs/ #Documents related to project
  ├── extension/ # Chrome extension
  ├── frontend/ # React frontend application
  ├── .gitlab-ci.yml # CI/CD pipelines
  └── README.md # Project documentation

---

User Manual

User Manual

---

API Documentation

Swagger Docs

---

Smell Analysis Report

Smell Analysis Report

---

TDD Commit Hash

Modules	Before Commit	After Commit
Document	bb82a5	f21863
ShareableLink	1cabe7	420a2b
	4930cf	8d51d3
	49d070	6ce781
Session	90682c	8b4aae
Summary	ea345d	e1e0a8

---

Code Coverage

Services	Code Coverage (Class)	Code Coverage (Lines)
Auth	100%	98%
Document	100%	99%
Messages	100%	100%
PluginRedirection	100%	100%
Session	100%	100%
ShareableLink	100%	97%
Summary	100%	100%

---

Contributors

• B00863868: Akshat Gulati - (ak922007@dal.ca)
• B01025608: Nakul Patel - (nk873706@dal.ca)
• B00988337: Het Patel - (ht526322@dal.ca)
• B01033206: Dhruva Patil - (dh602843@dal.ca)
• B01031699: Awwal Algabe - (aw5565230@dal.ca)

Individual Contribution

---

User Stories

Story 1: Instant Code Summaries

Sarah, a junior developer, is reading a blog post about optimizing JavaScript performance. She encounters an unfamiliar code snippet:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

Sarah highlights the code using the Chrome extension. She clicks "Summarize" and gets a popup:

"This code limits how often a function runs, waiting a set time before executing it—great for rate-limiting events."

With this quick explanation, she applies it to her project to optimize an input field’s search functionality.

---

Story 2: Contextual Definitions

Mark, a product manager with limited technical knowledge, is reviewing a design document online. He stumbles across the term "REST API" and isn’t sure what it means.

• He highlights "REST API" with the Chrome extension.
• He selects "Define" and sees:

  "A set of rules for web services to communicate over HTTP using methods like GET and POST."

Now understanding the term, Mark confidently discusses integration needs with his development team.

---

Story 3: Save and Download Responses

Emma, a software engineer, frequently uses the Chrome extension to summarize code snippets and define technical terms.

• She highlights a piece of JavaScript code and clicks "Summarize."
• The tool generates a clear explanation.
• Emma wants to keep a record of the summary for future reference.
• She clicks "Save Response," which stores the result in the extension's history.
• She also has the option to download the response as a .docx file for documentation purposes.

This feature helps Emma organize her technical notes and easily share insights with her team.

---

Story 4: Automated Documentation Generator

Priya, a freelance developer, finishes a Node.js module for a client:

class UserService {
  constructor(db) {
    this.db = db;
  }

  async getUser(id) {
    return await this.db.findUser(id);
  }
}
module.exports = UserService;

She uploads the file to the website and clicks "Generate Documentation."

• The tool creates a detailed Google Doc with class and method descriptions.
• Priya shares the link with her client, who approves the work without needing further clarification.

---

Story 5: Lightweight Extension with Web Integration

Jake, a full-stack developer, is browsing a tutorial site. He selects a small CSS snippet:

.container {
  display: flex;
  justify-content: center;
}

• He uses the Chrome extension and gets:

  "This CSS centers content horizontally using flexbox."

Later, he tries a 500-line JavaScript file, and the extension prompts him to use the website.

• Jake uploads it there, receives a full analysis, and appreciates the seamless switch between tools.

---

Acknowledgments

Special thanks to:

• Dalhousie University, Halifax, Nova Scotia
• CSCI 5308 Course Staff - [Prof. Tushar Sharma, TA Saurabh Rajput]
• Client Team - Group06

---

THANK YOU FOR CHOOSING CODELENS!

©2025 CSCI_5308_GROUP1. All rights reserved.