Vira

An intelligent mapping platform for data center site assessment and analysis.

Features

• Interactive 3D map with Mapbox GL
• AI-powered site suitability assessment
• Real-time environmental data analysis
• Custom zone creation and management
• Glass-morphism UI design

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun
• Mapbox account (for access token)

Getting Started

1. Clone the repository

git clone <repository-url>
cd vira

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token
MONGODB_URI=your_mongodb_connection_string
AIRNOW_API_KEY=your_airnow_api_key
GEMINI_API_KEY=your_gemini_api_key

Variable	Description
NEXT_PUBLIC_MAPBOX_TOKEN	Mapbox GL access token for map rendering
MONGODB_URI	MongoDB connection string for data storage
AIRNOW_API_KEY	AirNow API key for air quality data
GEMINI_API_KEY	Google Gemini API key for AI analysis

4. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint

Tech Stack

• Framework: Next.js 16 (App Router)
• UI: React 19, Tailwind CSS 4
• Maps: Mapbox GL JS
• Database: MongoDB Atlas
• AI: Google Gemini

Project Structure

src/
├── app/
│   ├── page.tsx        # Main page with logo badge
│   ├── layout.tsx      # Root layout
│   └── globals.css     # Global styles & design system
└── components/
    └── Map.tsx         # Interactive map component

Demo Video

https://youtu.be/pJ89OMo3h-M

License

Private