Skip to content
BranchesTags

Repository files navigation

🚗 MileTracker

MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.

Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.

🔧 Technologies Used

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

🚀 Features

  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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

🔒 Authentication

Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.

🌍 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

MONGODB_URI=your_mongo_uri JWT_SECRET=your_jwt_secret OPENROUTE_API_KEY=your_route_api_key WEATHER_API_KEY=your_weather_api_key

🔁 Git Branching Strategy To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.

🛠 Branch Setup main — 🚀 Deployed production code

dev — 🧪 Staging branch for active development

yourname/task-name — 🧱 Feature branches off of dev

🧑‍💻 Workflow Pull the latest dev branch:

bash git checkout dev git pull origin dev

Example: Create a personal feature branch: git checkout -b liebe/navbar

Push your branch: git push -u origin liebe/navbar Open a pull request into dev when your feature is ready.

✅ Tips:

To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format. Use dashes (-) and not spaces. Open PRs into dev, not main.

🌿 Branch Naming Guide

TASK SUGGESTED BRANCH NAME

CSS and overall UI styling yourname/css-pass Create and style the Navbar yourname/navbar Build and style the Footer yourname/footer Support multiple vehicles yourname/multi-vehicle-support Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders Improve search with address/state/date filters yourname/expand-search-filters Begin turning the app into a PWA yourname/pwa-setup Improve PDF layout and appearance yourname/pdf-beautification

👏 Credits

Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.

About

https://miletracker-client.onrender.com

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

2 watching

Forks

1 fork
Report repository

Releases

Packages

Used by

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" + '
GitHub - LiebeAnnette/MileTracker: https://miletracker-client.onrender.com · GitHub
Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.
Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server), Mongoose
  • Database: MongoDB Atlas
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService (mileage), OpenWeatherMap (weather), UselessFacts and National Park Service (funfacts), and Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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
🔒 Authentication
Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.
🌍 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
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
🔁 Git Branching Strategy
To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.
🛠 Branch Setup
main — 🚀 Deployed production code
dev — 🧪 Staging branch for active development
yourname/task-name — 🧱 Feature branches off of dev
🧑‍💻 Workflow
Pull the latest dev branch:
bash
git checkout dev
git pull origin dev
Example:
Create a personal feature branch:
git checkout -b liebe/navbar
Push your branch:
git push -u origin liebe/navbar
Open a pull request into dev when your feature is ready.
✅ Tips:
To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format.
Use dashes (-) and not spaces.
Open PRs into dev, not main.
🌿 Branch Naming Guide
TASK SUGGESTED BRANCH NAME
CSS and overall UI styling yourname/css-pass
Create and style the Navbar yourname/navbar
Build and style the Footer yourname/footer
Support multiple vehicles yourname/multi-vehicle-support
Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders
Improve search with address/state/date filters yourname/expand-search-filters
Begin turning the app into a PWA yourname/pwa-setup
Improve PDF layout and appearance yourname/pdf-beautification
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.
About
https://miletracker-client.onrender.com
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
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('^' + ".*" + '
GitHub - LiebeAnnette/MileTracker: https://miletracker-client.onrender.com · GitHub
Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.
Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server), Mongoose
  • Database: MongoDB Atlas
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService (mileage), OpenWeatherMap (weather), UselessFacts and National Park Service (funfacts), and Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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
🔒 Authentication
Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.
🌍 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
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
🔁 Git Branching Strategy
To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.
🛠 Branch Setup
main — 🚀 Deployed production code
dev — 🧪 Staging branch for active development
yourname/task-name — 🧱 Feature branches off of dev
🧑‍💻 Workflow
Pull the latest dev branch:
bash
git checkout dev
git pull origin dev
Example:
Create a personal feature branch:
git checkout -b liebe/navbar
Push your branch:
git push -u origin liebe/navbar
Open a pull request into dev when your feature is ready.
✅ Tips:
To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format.
Use dashes (-) and not spaces.
Open PRs into dev, not main.
🌿 Branch Naming Guide
TASK SUGGESTED BRANCH NAME
CSS and overall UI styling yourname/css-pass
Create and style the Navbar yourname/navbar
Build and style the Footer yourname/footer
Support multiple vehicles yourname/multi-vehicle-support
Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders
Improve search with address/state/date filters yourname/expand-search-filters
Begin turning the app into a PWA yourname/pwa-setup
Improve PDF layout and appearance yourname/pdf-beautification
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.
About
https://miletracker-client.onrender.com
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
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('^' + ".*" + '
GitHub - LiebeAnnette/MileTracker: https://miletracker-client.onrender.com · GitHub
Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.
Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server), Mongoose
  • Database: MongoDB Atlas
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService (mileage), OpenWeatherMap (weather), UselessFacts and National Park Service (funfacts), and Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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
🔒 Authentication
Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.
🌍 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
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
🔁 Git Branching Strategy
To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.
🛠 Branch Setup
main — 🚀 Deployed production code
dev — 🧪 Staging branch for active development
yourname/task-name — 🧱 Feature branches off of dev
🧑‍💻 Workflow
Pull the latest dev branch:
bash
git checkout dev
git pull origin dev
Example:
Create a personal feature branch:
git checkout -b liebe/navbar
Push your branch:
git push -u origin liebe/navbar
Open a pull request into dev when your feature is ready.
✅ Tips:
To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format.
Use dashes (-) and not spaces.
Open PRs into dev, not main.
🌿 Branch Naming Guide
TASK SUGGESTED BRANCH NAME
CSS and overall UI styling yourname/css-pass
Create and style the Navbar yourname/navbar
Build and style the Footer yourname/footer
Support multiple vehicles yourname/multi-vehicle-support
Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders
Improve search with address/state/date filters yourname/expand-search-filters
Begin turning the app into a PWA yourname/pwa-setup
Improve PDF layout and appearance yourname/pdf-beautification
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.
About
https://miletracker-client.onrender.com
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
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" + '
GitHub - LiebeAnnette/MileTracker: https://miletracker-client.onrender.com · GitHub
Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.
Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server), Mongoose
  • Database: MongoDB Atlas
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService (mileage), OpenWeatherMap (weather), UselessFacts and National Park Service (funfacts), and Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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
🔒 Authentication
Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.
🌍 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
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
🔁 Git Branching Strategy
To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.
🛠 Branch Setup
main — 🚀 Deployed production code
dev — 🧪 Staging branch for active development
yourname/task-name — 🧱 Feature branches off of dev
🧑‍💻 Workflow
Pull the latest dev branch:
bash
git checkout dev
git pull origin dev
Example:
Create a personal feature branch:
git checkout -b liebe/navbar
Push your branch:
git push -u origin liebe/navbar
Open a pull request into dev when your feature is ready.
✅ Tips:
To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format.
Use dashes (-) and not spaces.
Open PRs into dev, not main.
🌿 Branch Naming Guide
TASK SUGGESTED BRANCH NAME
CSS and overall UI styling yourname/css-pass
Create and style the Navbar yourname/navbar
Build and style the Footer yourname/footer
Support multiple vehicles yourname/multi-vehicle-support
Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders
Improve search with address/state/date filters yourname/expand-search-filters
Begin turning the app into a PWA yourname/pwa-setup
Improve PDF layout and appearance yourname/pdf-beautification
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.
About
https://miletracker-client.onrender.com
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
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('^' + ".*" + '
GitHub - LiebeAnnette/MileTracker: https://miletracker-client.onrender.com · GitHub
Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.
Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server), Mongoose
  • Database: MongoDB Atlas
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService (mileage), OpenWeatherMap (weather), UselessFacts and National Park Service (funfacts), and Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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
🔒 Authentication
Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.
🌍 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
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
🔁 Git Branching Strategy
To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.
🛠 Branch Setup
main — 🚀 Deployed production code
dev — 🧪 Staging branch for active development
yourname/task-name — 🧱 Feature branches off of dev
🧑‍💻 Workflow
Pull the latest dev branch:
bash
git checkout dev
git pull origin dev
Example:
Create a personal feature branch:
git checkout -b liebe/navbar
Push your branch:
git push -u origin liebe/navbar
Open a pull request into dev when your feature is ready.
✅ Tips:
To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format.
Use dashes (-) and not spaces.
Open PRs into dev, not main.
🌿 Branch Naming Guide
TASK SUGGESTED BRANCH NAME
CSS and overall UI styling yourname/css-pass
Create and style the Navbar yourname/navbar
Build and style the Footer yourname/footer
Support multiple vehicles yourname/multi-vehicle-support
Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders
Improve search with address/state/date filters yourname/expand-search-filters
Begin turning the app into a PWA yourname/pwa-setup
Improve PDF layout and appearance yourname/pdf-beautification
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.
About
https://miletracker-client.onrender.com
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
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('^' + ".*" + '
GitHub - LiebeAnnette/MileTracker: https://miletracker-client.onrender.com · GitHub
Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.
Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server), Mongoose
  • Database: MongoDB Atlas
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService (mileage), OpenWeatherMap (weather), UselessFacts and National Park Service (funfacts), and Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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
🔒 Authentication
Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.
🌍 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
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
🔁 Git Branching Strategy
To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.
🛠 Branch Setup
main — 🚀 Deployed production code
dev — 🧪 Staging branch for active development
yourname/task-name — 🧱 Feature branches off of dev
🧑‍💻 Workflow
Pull the latest dev branch:
bash
git checkout dev
git pull origin dev
Example:
Create a personal feature branch:
git checkout -b liebe/navbar
Push your branch:
git push -u origin liebe/navbar
Open a pull request into dev when your feature is ready.
✅ Tips:
To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format.
Use dashes (-) and not spaces.
Open PRs into dev, not main.
🌿 Branch Naming Guide
TASK SUGGESTED BRANCH NAME
CSS and overall UI styling yourname/css-pass
Create and style the Navbar yourname/navbar
Build and style the Footer yourname/footer
Support multiple vehicles yourname/multi-vehicle-support
Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders
Improve search with address/state/date filters yourname/expand-search-filters
Begin turning the app into a PWA yourname/pwa-setup
Improve PDF layout and appearance yourname/pdf-beautification
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.
About
https://miletracker-client.onrender.com
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
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); }
})();
})();
GitHub - LiebeAnnette/MileTracker: https://miletracker-client.onrender.com · GitHub
Skip to content
BranchesTags
Repository files navigation
🚗 MileTracker
MileTracker is a full-stack MERN application that allows users to track trips by logging a start and end location, automatically calculating mileage, showing weather at the destination, and exporting trip history as a PDF report.
Built for the final project in my full-stack bootcamp, this app uses React, Apollo Client, GraphQL, Node.js, Express, and MongoDB with Mongoose. It also includes JWT authentication, secure API key usage, and continuous deployment through Render and GitHub Actions.
🔧 Technologies Used
  • Frontend: React, Vite, Apollo Client, TypeScript
  • Backend: Node.js, Express, GraphQL (Apollo Server), Mongoose
  • Database: MongoDB Atlas
  • Authentication: JSON Web Tokens (JWT)
  • APIs: OpenRouteService (mileage), OpenWeatherMap (weather), UselessFacts and National Park Service (funfacts), and Google Maps
  • CI/CD: GitHub Actions
  • Deployment: Render
🚀 Features
  • 🧭 Add trips by entering a start and end location
  • 📏 Automatically calculates miles
  • 🌦️ 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
🔒 Authentication
Register and log in with a username and password. Authenticated users have private trip data and token-secured access to all features.
🌍 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
MONGODB_URI=your_mongo_uri
JWT_SECRET=your_jwt_secret
OPENROUTE_API_KEY=your_route_api_key
WEATHER_API_KEY=your_weather_api_key
🔁 Git Branching Strategy
To keep the main branch clean and production-ready, all development happens through a shared dev branch. Individual features and fixes are built on personal branches, then merged into dev via pull request. Once dev is stable, it’s merged into main.
🛠 Branch Setup
main — 🚀 Deployed production code
dev — 🧪 Staging branch for active development
yourname/task-name — 🧱 Feature branches off of dev
🧑‍💻 Workflow
Pull the latest dev branch:
bash
git checkout dev
git pull origin dev
Example:
Create a personal feature branch:
git checkout -b liebe/navbar
Push your branch:
git push -u origin liebe/navbar
Open a pull request into dev when your feature is ready.
✅ Tips:
To keep things clean and collaborative, we follow a [yourname]/[task-name] branch naming format.
Use dashes (-) and not spaces.
Open PRs into dev, not main.
🌿 Branch Naming Guide
TASK SUGGESTED BRANCH NAME
CSS and overall UI styling yourname/css-pass
Create and style the Navbar yourname/navbar
Build and style the Footer yourname/footer
Support multiple vehicles yourname/multi-vehicle-support
Add maintenance reminders (oil, tires, etc.) yourname/maintenance-reminders
Improve search with address/state/date filters yourname/expand-search-filters
Begin turning the app into a PWA yourname/pwa-setup
Improve PDF layout and appearance yourname/pdf-beautification
👏 Credits
Developed by Liebe, Colton, Maddie and Stephen as the final capstone project for a full-stack JavaScript bootcamp. Built with ❤️, APIs, and very little sleep.
About
https://miletracker-client.onrender.com
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages