The Velox is a revolutionary full-stack transit application designed for seamless route planning, live map visualization, and instant ticket purchasing. Built from the ground up to showcase advanced engineering, interactive design, and a fully custom user experience, Velox represents a comprehensive, end-to-end solo development effort.
The Velox delivers a powerful, intuitive experience with a focus on speed and efficiency:
- Intelligent Pathfinding: Instantly calculates the optimal, shortest route between any two points on the network.
- Real-time Route Visualization: Interactive, custom-loaded maps display routes, stations, and pathfinding results dynamically.
- Secure Authentication: Robust user authentication and session management built using JWT and encrypted tokens.
- Admin Dashboard: Dedicated administrative interface for managing users and system data.
- Integrated Payment System: Seamlessly purchase tickets using various payment methods, with functionality to add and manage payment details securely.
- Responsive Design: A modern, mobile-first interface built with Next.js and Tailwind CSS for a fluid experience on any device.
The core functionality of Velox relies on a highly specialized, custom-built routing and mapping system.
The route calculation is powered by an optimized implementation of Dijkstra's Shortest Path Algorithm. This classic graph algorithm is ideal for transit systems as it efficiently finds the lowest-cost path (where "cost" can represent distance, time, or a combination of both) from a starting station to all reachable stations.
- Efficiency: The algorithm leverages a priority queue to ensure routes are calculated quickly, even across a large and complex transport network.
- Weighted Edges: Connections between stations are treated as weighted edges, allowing the system to factor in real-world variables like travel time and transfer penalties when determining the "best" route.
The entire transit network is represented in a custom-built Node Graph data structure.
- Custom Graph Implementation: I designed and implemented the entire graph structure, utilizing an efficient adjacency list representation to model stations (nodes) and routes (edges).
- Scalable Routing Data: This bespoke system allows for precise control over how route data is stored and traversed, making it adaptable to new lines, temporary closures, and varying route complexities.
The visual and functional heart of the application is the map rendering system.
- Custom SVG Loader: I developed a specialized SVG Map Loader that takes custom-designed map vector graphics (SVG files) and transforms them into an interactive digital map.
- Data Integration: This loader not only renders the map visually but also correlates specific SVG elements (like station icons and track paths) with the corresponding data points in the backend's Node Graph. This linkage is crucial for drawing the calculated pathfinding results directly onto the interactive map.
Velox is a passion project where I personally handled every single aspect of development and production. It serves as a testament to full-stack, end-to-end capability.
From concept to deployment, I was the sole creator:
| Aspect | Contribution |
|---|---|
| Video Production | Conceptualized, scripted, filmed, and edited the promotional video content. |
| Graphics & UI/UX | Designed all user interface elements, application graphics, and the overall user experience. |
| 3D Visuals | Created all custom 3D visual assets used for branding and in the application interface. |
| Branding | Developed the entire project identity, including the name, logo, color palette, and brand voice. |
| Frontend Development | Built the entire Next.js/React frontend with TypeScript and Tailwind CSS. |
| Backend Development | Architected the Node.js/Express/Prisma backend, including the REST API, database schema, and routing logic. |
| Mapping & Routing | Designed the custom map data structure and implemented the core pathfinding algorithms. |
The custom-designed transit maps and various branded assets are integral to the Velox experience.
Upload your custom SVG/map design files here. These are the basis for the application's interactive map.
[PLACEHOLDER FOR CUSTOM MAP DESIGN FILES (e.g.,
map.svg,stations.json)]
Upload 3D renders, promotional images, and branding assets here.
[PLACEHOLDER FOR BRANDING, GRAPHICS, AND 3D VISUALS]
short_time2.mp4
Workbench.Render_final.mp4
3D_fase3_animatie_fabiodinota.mp4
This project is split into two main components: frontend (Next.js) and backend (Node.js/Express/Prisma).
- Node.js (v18+)
- npm or yarn
- A running PostgreSQL database instance (or modify the
prisma/schema.prismafile).
- Navigate to the
backenddirectory:cd backend - Install dependencies:
npm install # or yarn install - Set up your environment variables (e.g.,
.envfile) for database connection, JWT secrets, etc. - Push the database schema and generate the client:
npx prisma migrate dev --name init npx prisma generate
- Start the backend server:
npm run dev
- Navigate to the
frontenddirectory:cd ../frontend - Install dependencies:
npm install # or yarn install - Set up your environment variables (e.g.,
.env.local) pointing to the backend API. - Start the Next.js development server:
npm run dev
The application should now be accessible at http://localhost:3000.
- Real-time Data Integration: Integrate external APIs for live train/bus tracking.
- Multi-Modal Routing: Expand the pathfinding logic to incorporate walking, biking, and different transit types.
- User Profiles: Advanced user customization and notification settings.