# Project export: Mantis This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: Cal Hacks 11.0 - Tagline: "Hey when's the food coming out?" Mantis: "...." Event organization and navigation made easier with Mantis. - Devpost: https://devpost.com/software/mantis - GitHub: https://github.com/abhishekkakolla/Calhacks - Video: https://www.youtube.com/embed/2I8c26L1vsc?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 1 GitHub contributor(s) — Abi Kakolla (3 commits) ## Devpost submission (written by the team) ### Inspiration A few of us were used to attending several events and hackathons, and we noticed how much paper waste would occur when event organizers would hang up posters and display countdowns on TVs. These methods of displaying information just seemed to be very temporary and unsustainable. That's when we realized we could use AR to make it easier for event organizers to share their event information through a platform and for participants to see this through their mobile phones. ### What it does Mantis is a web platform for event organizers to organize their event by inputting locations for the signs they want to include--a sustainable alternative for displaying information that doesn't require tearing down posters after the closure of the event--as well as a map / description of the event space for VoiceAI to make navigating the space easier for visually impaired people. What's more, people can view the information from their phones from afar, so this can prevent crowding in areas where visibility is low (such as booths). On the participant (user) side, users can use their phones to walk around the event and see where these signs are in Augmented Reality. For ease of accessibility, users can use our VoiceAI implemented that helps them navigate the space. ### How we built it We used Next.js and TailwindCSS for the frontend of our app where the event organizers can move to specific locations in the event space and place add a sign. This information is stored in MongoDB and sent to an AR server we set up using Python and Node.js. AR was implemented using AR.js using A-frames in our mobile-friendly web app. ### Challenges we ran into All of us were very new to backend development (especially MongoDB) and some of us had never done web development before. Augmented Reality with AR.js was the most challenging aspect of this project since documentation wasn't up-to-date and there were many incompatibilities since all of us had iOS mobile devices (which have many security features set by Apple). It was an extremely dense information-packed night, but in the end we were able to finish an MVP that has the potential to actually save waste and make coordinating events easier for both organizations and users. ### Accomplishments we're proud of Implementing AR and creating our first full-stack app! ### What we learned All of us had learned a completely new technology during these past two nights. For some of us, it was coming in with 0 web development experience and coming out with knowing how to route Next.js pages together and send information to a backend! For the rest of us, it was learning how to use VoiceAI, AR.js, and implementing a backend for the first time. ### What's next Utilizing 3D interactive models rather than text signs for the location-based AR inputs to make it more dynamic. ## README (from the GitHub repository) No README available. ## Detected evidence (automated analysis) Indexed codebase: 4 recognized source files, 5 KB. - CSS (language) — detected in the code - JavaScript (language) — detected in the code - Next.js (technology) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - Express (technology) — claimed on Devpost, not found in the code - Google Gemini (technology) — claimed on Devpost, not found in the code - Node.js (technology) — claimed on Devpost, not found in the code - Python (language) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (9 of 9) ``` .gitignore jsconfig.json next.config.mjs package.json postcss.config.mjs src/app/globals.css src/app/layout.js src/app/page.js tailwind.config.js ``` ### Dependencies - package.json: next@14.2.15, postcss@^8, react@^18, react-dom@^18, tailwindcss@^3.4.1 ### Recent commits (newest first) - init - Initial commit from Create Next App - Initial commit ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "calhacks", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.15" }, "devDependencies": { "postcss": "^8", "tailwindcss": "^3.4.1" } } ``` ### src/app/layout.js ```javascript import localFont from "next/font/local"; import "./globals.css"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", variable: "--font-geist-sans", weight: "100 900", }); const geistMono = localFont({ src: "./fonts/GeistMonoVF.woff", variable: "--font-geist-mono", weight: "100 900", }); export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( {children} ); } ``` ### src/app/page.js ```javascript import Image from "next/image"; export default function Home() { return (
Next.js logo
  1. Get started by editing{" "} src/app/page.js .
  2. Save and see your changes instantly.
Vercel logomark Deploy now Read our docs
); } ``` ### tailwind.config.js ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", }, }, }, plugins: [], }; ``` ### src/app/globals.css ```css @tailwind base; @tailwind components; @tailwind utilities; :root { --background: #ffffff; --foreground: #171717; } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } body { color: var(--foreground); background: var(--background); font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } ```