BranchesTags

Repository files navigation

🚗 MileTracker

MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.

The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.

Project Context

MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.

My Contributions

  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration

Skills Demonstrated

  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution

🔧 Technologies Used

  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render

🚀 Features

  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push

🌍 Live Demo

📸 Screenshots

Login Page

Login Page

Home Page

Home Page

Vehicle Manager Page

Vehicle Manager

Add Trip Page

Add Trip Page

Your Trips Page

Your Trips Page

Trip Report Printer Page

Trip Report Printer Page

🧪 Local Development

  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start

Run the Front End

cd client
npm install
npm run dev

Environmental variables: MONGODB_URI=your_mongo_uri JWT_SECRET=your_jwt_secret OPENROUTE_API_KEY=your_route_api_key WEATHER_API_KEY=your_weather_api_key

👏 Credits

Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.

About

https://miletracker-client.onrender.com

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.
The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.
Project Context
MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.
My Contributions
  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration
Skills Demonstrated
  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push
🌍 Live Demo
📸 Screenshots
Login Page
Login Page
Home Page
Home Page
Vehicle Manager Page
Vehicle Manager
Add Trip Page
Add Trip Page
Your Trips Page
Your Trips Page
Trip Report Printer Page
Trip Report Printer Page
🧪 Local Development
  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start
Run the Front End
cd client
npm install
npm run dev
Environmental variables:
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.
About
https://miletracker-client.onrender.com
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.
The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.
Project Context
MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.
My Contributions
  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration
Skills Demonstrated
  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push
🌍 Live Demo
📸 Screenshots
Login Page
Login Page
Home Page
Home Page
Vehicle Manager Page
Vehicle Manager
Add Trip Page
Add Trip Page
Your Trips Page
Your Trips Page
Trip Report Printer Page
Trip Report Printer Page
🧪 Local Development
  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start
Run the Front End
cd client
npm install
npm run dev
Environmental variables:
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.
About
https://miletracker-client.onrender.com
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.
The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.
Project Context
MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.
My Contributions
  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration
Skills Demonstrated
  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push
🌍 Live Demo
📸 Screenshots
Login Page
Login Page
Home Page
Home Page
Vehicle Manager Page
Vehicle Manager
Add Trip Page
Add Trip Page
Your Trips Page
Your Trips Page
Trip Report Printer Page
Trip Report Printer Page
🧪 Local Development
  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start
Run the Front End
cd client
npm install
npm run dev
Environmental variables:
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.
About
https://miletracker-client.onrender.com
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.
The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.
Project Context
MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.
My Contributions
  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration
Skills Demonstrated
  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push
🌍 Live Demo
📸 Screenshots
Login Page
Login Page
Home Page
Home Page
Vehicle Manager Page
Vehicle Manager
Add Trip Page
Add Trip Page
Your Trips Page
Your Trips Page
Trip Report Printer Page
Trip Report Printer Page
🧪 Local Development
  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start
Run the Front End
cd client
npm install
npm run dev
Environmental variables:
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.
About
https://miletracker-client.onrender.com
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.
The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.
Project Context
MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.
My Contributions
  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration
Skills Demonstrated
  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push
🌍 Live Demo
📸 Screenshots
Login Page
Login Page
Home Page
Home Page
Vehicle Manager Page
Vehicle Manager
Add Trip Page
Add Trip Page
Your Trips Page
Your Trips Page
Trip Report Printer Page
Trip Report Printer Page
🧪 Local Development
  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start
Run the Front End
cd client
npm install
npm run dev
Environmental variables:
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.
About
https://miletracker-client.onrender.com
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.
The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.
Project Context
MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.
My Contributions
  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration
Skills Demonstrated
  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push
🌍 Live Demo
📸 Screenshots
Login Page
Login Page
Home Page
Home Page
Vehicle Manager Page
Vehicle Manager
Add Trip Page
Add Trip Page
Your Trips Page
Your Trips Page
Trip Report Printer Page
Trip Report Printer Page
🧪 Local Development
  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start
Run the Front End
cd client
npm install
npm run dev
Environmental variables:
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.
About
https://miletracker-client.onrender.com
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack web application that allows users to log trips, calculate mileage between locations, view destination weather, and generate downloadable PDF trip reports.
The project focuses on accurate data handling, API-driven calculations, and presenting structured trip data in a clear, usable format.
Project Context
MileTracker was developed as a group capstone project for a full-stack JavaScript bootcamp. The goal was to design and deploy a production-ready application that integrates multiple external data sources, supports authenticated users, and manages structured records over time.
My Contributions
  • Owned the design and implementation of the expense tracking feature from end to end
  • Built GraphQL queries and mutations to create, update, delete, and retrieve expense records
  • Implemented frontend components to manage expenses by trip and folder
  • Developed logic to calculate total trip costs based on associated expenses
  • Ensured expense data was consistently stored, loaded, and displayed across user sessions
  • Resolved merge conflicts and stabilized expense-related features during team integration
Skills Demonstrated
  • Structured data modeling and validation
  • CRUD operations on structured data
  • GraphQL queries and mutations
  • Data aggregation and calculation logic
  • Frontend–backend integration
  • Debugging and merge conflict resolution
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server)
  • Database: MongoDB (Mongoose)
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService, OpenWeatherMap, UselessFacts, National Park Service, Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates mileage between locations
  • 🌦️ Displays weather for the destination
  • 🗑 Delete trips individually
  • 📄 Download a PDF report of all logged trips
  • 🔐 User authentication with JWTs
  • 📦 Protected API keys in environment variables
  • ⚙️ GitHub Actions runs type checks on every push
🌍 Live Demo
📸 Screenshots
Login Page
Login Page
Home Page
Home Page
Vehicle Manager Page
Vehicle Manager
Add Trip Page
Add Trip Page
Your Trips Page
Your Trips Page
Trip Report Printer Page
Trip Report Printer Page
🧪 Local Development
  1. Clone the repo
  2. Run the backend:
cd server
npm install
npm run start
Run the Front End
cd client
npm install
npm run dev
Environmental variables:
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp.
About
https://miletracker-client.onrender.com
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages