Back to Home

NVRS: Evolution of a Full-Stack Project

Project Overview by Alex

Project Background

VRS (Virtual Restaurant System) represents my journey through modern web development and business. It began with a capstone business plan from a top-ranked business school, originally as a vanilla JavaScript app. It slowly evolved into an AWS-based venture with sophisticated frameworks and serverless architecture. It would later be integrated with a Nutritional Assistant™ an LLM-powered feature that interprets the patron's nutritional needs or preferences and recommends a meal based on the menu. VRS demonstrates the natural progression of web application development in today's cloud-first, LLM-driven world.

Current Projects

VRS App — React / TypeScript / Next.js / AI Live

The current production VRS App runs on TypeScript and Next.js with an LLM-powered Nutritional Consultant built in. The consultant accepts voice input via OpenAI's speech-to-text, then hands off to a DeepSeek-powered response agent that reasons over the full menu — including ingredient-level data — to recommend dishes that match each patron's stated preferences, restrictions, and macro targets.

Tech Stack:
Launch the VRS App
  • React
  • TypeScript
  • Next.js
  • React.js
  • Node.js
  • Express.js
  • MySQL
  • OpenAI Speech-to-Text
  • DeepSeek API
Nutritional Consultant — How It Works
  1. Voice or text input: the patron describes what they want — "high protein, no shellfish, under 600 calories."
  2. Speech-to-text: OpenAI transcribes voice requests into clean text.
  3. Menu + ingredient lookup: the agent queries the menu and its underlying ingredient table, so recommendations respect allergens, macros, and dietary rules at the component level — not just the dish description.
  4. Reasoning & recommendation: DeepSeek ranks matching dishes and returns a short, natural-language explanation.
Key Improvements Over the Legacy Build
  • Type-safe development with TypeScript to reduce runtime errors
  • Server-side rendering and edge deployment via Next.js
  • Improved state management and component architecture
  • Ingredient-level database schema powering dietary filtering
  • LLM-driven conversational ordering (voice + text)

Technical Evolution

2023

Phase 1: Foundation (Vanilla JS)

The original VRS prototype laid the groundwork with:

  • Express.js server handling route logic
  • MySQL database for data persistence
  • Basic client-side JavaScript for interactivity
  • Bootstrap for responsive design
  • Deployed on traditional server infrastructure
2024

Phase 2: Modern Framework (Next.js with TypeScript)

Evolving the application with current best practices:

  • TypeScript implementation for type safety
  • Server-side rendering with Next.js
  • Enhanced routing capabilities
  • Improved state management
  • Better code organization and maintainability
  • Deployment on Cloudflare Pages for improved performance
  • LLM-powered Nutritional Consultant wired into the menu
2025

Phase 3: Building for Growth with AWS

Hardening the platform for scale and reliability:

  • Implementing Lambda functions for messaging features
  • Robust REST API architecture for CRUD actions
  • Cloudflare CDN for faster frontend response
2026

Phase 4: Leveraging LLMs with Purpose

turning the menu from static text into a living, reasoned dataset that an LLM can actually work with.

  • Prepared the database to support ingredient-level and food-preparation data so recommendations can respect allergens, macros, and cooking methods, not just dish names.
  • Trained DeepSeek, a widely-used LLM, to listen to the patron and recommend menu items based on their stated needs, restrictions, and preferences.

Key Features Across All Versions

  • Secure user authentication system
  • RESTful API design principles
  • Responsive UI across devices
  • Scalable database architecture
  • Order management workflow
  • Restaurant menu configuration

Development Insights

The transition from vanilla JavaScript to TypeScript and Next.js revealed significant advantages:

  • Type safety drastically reduced runtime errors and improved developer experience
  • Component-based architecture with React simplified maintenance and feature development
  • Server-side rendering improved initial load performance and SEO capabilities
  • The structured nature of TypeScript enforced better coding practices
  • Modern tooling streamlined the development workflow

The upcoming move to AWS Lambda represents our commitment to scalable, maintainable architecture that can grow with demand without significant infrastructure management overhead.

Coming Soon

Next Major Release Features:
  • .NET based security implementation
  • Admin dashboard with image upload capabilities for menu customization
  • Enhanced contextual menu controls for improved navigation

Future Enhancements

  • Implementing C# serverless functions on AWS Lambda
  • Enhanced API documentation with Swagger/OpenAPI
  • Advanced caching mechanisms for improved performance
  • Real-time updates using WebSockets
  • Integration with third-party payment processors
  • Mobile app development with React Native
  • Performance monitoring and analytics integration

Try the Apps

Launch the VRS App → Try the AI Sentiment Tool →

Tech Stack Evolution

Original Stack
  • • Node.js
  • • Express.js
  • • Vanilla JavaScript
  • • MySQL
  • • Apache 2.4
  • • AWS (S3, EC2, Route 53)
Current Stack
  • • TypeScript
  • • Next.js
  • • React.js
  • • Node.js/Express (Backend)
  • • MySQL
  • • Cloudflare Pages

Why TypeScript?

TypeScript provides numerous advantages for complex applications:

  • Static type checking catches errors during development
  • Better IntelliSense and code completion
  • Improved code documentation with types
  • Enhanced refactoring capabilities
  • Greater scalability for team development