/* Project: Clear Trek Public Site + Dashboard + CRM Tech: Next.js, React, Node API routes, HubSpot & custom CRM integration Run: npm install && npm run dev */ // package.json { "name": "clear-trek-site", "version": "1.0.0", "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "next": "latest", "react": "latest", "react-dom": "latest", "sequelize": "^6.0.0", "sqlite3": "^5.0.0", "@hubspot/api-client": "^7.0.0", "jsonwebtoken": "^8.5.1", "bcrypt": "^5.0.1" } } // next.config.js module.exports = { env: { JWT_SECRET: process.env.JWT_SECRET || 'supersecret', HUBSPOT_API_KEY: process.env.HUBSPOT_API_KEY || '' } }; // lib/db.js import { Sequelize } from 'sequelize'; export const sequelize = new Sequelize({ dialect: 'sqlite', storage: './data/crm.sqlite' }); // lib/models/Lead.js import { DataTypes } from 'sequelize'; import { sequelize } from '../db'; export const Lead = sequelize.define('Lead', { name: DataTypes.STRING, email: DataTypes.STRING, phone: DataTypes.STRING, status: { type: DataTypes.STRING, defaultValue: 'new' } }); // pages/index.js import Link from 'next/link'; export default function Home() { return (

Clear Trek

San Antonio's premier GPS LOJEC fleet installations.

Client Portal

Service Packages

Clear Trek Essentials

GPS foundation for small fleets

• Standard LOJEC GPS install
• Real-time location tracking
• Secure fleet dashboard access

For fleets of 5–20 vehicles

Clear Trek ProFleet

Performance & insight at scale

• All Essentials features
• Driver behavior analytics
• Maintenance alerts
• Priority install scheduling

Perfect for 20–100 vehicle fleets

Clear Trek Enterprise

Customized power for large fleets

• Full ProFleet suite
• API + software integrations
• White-labeled tracking interface
• Dedicated enterprise support

Optimized for fleets 100+

Request a Quote

Submit

); } // pages/dashboard.js import Dashboard from '../components/ClearTrackDashboard'; export default function ClientDashboard() { return ; } // components/ClearTrackDashboard.jsx import React, { useEffect, useState } from 'react'; export default function ClearTrackDashboard() { const [token, setToken] = useState(''); useEffect(() => { fetch('/api/backend/token') .then(r => r.json()) .then(d => setToken(d.token)); }, []); return (

AutoAgent Dashboard

Your Token: {token}

); } // pages/api/backend/token.js import jwt from 'jsonwebtoken'; export default function handler(req, res) { const token = jwt.sign({ user: 'client' }, process.env.JWT_SECRET, { expiresIn: '1h' }); res.status(200).json({ token }); } // pages/api/backend/index.js import express from 'express'; import nextConnect from 'next-connect'; const handler = nextConnect(); import cleartrackRoutes from '../../../cleartrack-backend'; handler.use(cleartrackRoutes); export default handler; // pages/api/hubspot.js import { Client } from '@hubspot/api-client'; export default async function handler(req, res) { if (req.method !== 'POST') return res.status(405).end(); const hubspot = new Client({ apiKey: process.env.HUBSPOT_API_KEY }); const { name, email } = req.body; try { await hubspot.crm.contacts.basicApi.create({ properties: { email, firstname: name } }); res.redirect('/'); } catch (e) { res.status(500).json({ error: e.message }); } } // pages/api/custom-crm.js import { sequelize } from '../../lib/db'; import { Lead } from '../../lib/models/Lead'; export default async function handler(req, res) { await sequelize.sync(); if (req.method === 'GET') { const leads = await Lead.findAll(); return res.json(leads); } if (req.method === 'POST') { const lead = await Lead.create(req.body); return res.status(201).json(lead); } res.status(405).end(); }