VikeEats

VikeEats is a web map application displaying all food outlets on the University of Victoria campus. This project was started under the University of Victoria Vikelabs Club to counteract the lack of a centralized information hub regarding the food options on campus: especially regarding dietary restrictions. It is built as a hybrid Next.js + Python app that uses Next.js as the frontend and Flask as the API backend.

Gallery

How To Run

npm install

Then, run the development server:

npm run dev

If this doesn't work run

npm install -g pnpm

How It Works

The Python/Flask server is mapped into to Next.js app under /api/.

This is implemented using next.config.js rewrites to map any request to /api/:path* to the Flask API, which is hosted in the /api folder.

On localhost, the rewrite will be made to the 127.0.0.1:5328 port, which is where the Flask server is running.

In production, the Flask server is hosted as Python serverless functions on Vercel.

Demo

https://nextjs-flask-starter.vercel.app/

Deploy Your Own

You can clone & deploy it to Vercel with one click:

Developer Guide

Running the Backend & Database

1. Install Python dependencies:

   pip install -r requirements.txt

2. Initialize the SQLite database:

   python api/create_db.py

   This creates the initial vikeeats.db file required for the application.

Running the Full Application

npm install
npm run dev

Open http://localhost:3000 to view the app. The Flask server runs concurrently on port 5328.

Testing

We use pytest for automated testing. The suite includes mocks for external UVic/UVSS websites to ensure reliable and fast testing of scraping logic and API responses.

1. Install test dependencies:

   pip install pytest pytest-mock requests-mock pytest-flask

2. Run the automated test suite:

   pytest tests/ -v

3. Run legacy tests (live scraping): These scripts perform real network requests to UVic/UVSS websites:

   python tests/test_food_outlets_legacy.py
   python tests/test_sub_hours_legacy.py
   python tests/test_populate_legacy.py

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Flask Documentation - learn about Flask features and API.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!