Skip to content

Uv-191206/project-x-VibeBuild

 
 

Repository files navigation

🚀 VibeBuild — AI Driven Solutions & Vibe Coding

A premium, interactive workshop platform renovated with a Claymorphism aesthetic. Built for hackathon-style AI workshops, it features soft 3D UI elements, tactile interactions, and a modern 'Outfit' typography. Participants can manage teams, submit projects, and showcase their work from a stunning 3D dashboard.

Main Repository: https://github.com/Uv-191206/project-x-VibeBuild.git
Live Platform: https://project-x-vibe-build.vercel.app/

Next.js React Tailwind CSS Framer Motion Aesthetic


🌍 Participant Showcases

The following projects were built during the workshop:

Participant Project Repo Live Deployment
Yogi Patel Clone-Yogi Live Demo
Smeet Clone-Smeet Live Demo
Prashant Clone-Prashant Live Demo
Hitansh Clone-Hitansh Live Demo
Yuvraj & Jeet BharatAgri-AI Live Demo
Dev Clone-Dev-Data Pending
Rohan Clone-Rohan Live Demo
Harsh Clone-Harsh Live Demo
Pransu Clone-VeriLearn Live Demo
Richa Clone-Academic-Hub Live Demo
Vraj & Yash N/A Live Demo

✨ Features

Feature Description
🔐 Individual Auth JWT login via User ID or Email, rate-limited (5 attempts/15min), HTTP-only cookies
👥 Self-Service Teams Participants create teams from the dashboard (team name, members, domain)
📊 Dashboard Countdown timer, progress tracker, team creation, project submission with confetti
🌍 Project Showcase Public grid with domain filters, search, hover animations & student submission form
🤖 AI Chatbot Floating assistant with OpenAI integration + built-in fallback guides for GitHub & Vercel deployment
📈 LOC Counter Real-time tracking of lines of code written across all participant projects (33,370+ lines)
🖼️ Gallery Dynamic Panorama view with auto-swiping, lightbox, and high-res photo download
📄 Reports Centralized PDF report preview (workshop_report.pdf) with inline download feature
📋 Attendance Admin CRUD with first/second half toggles & CSV export
🎓 Certificates Admin-issued certificates (name, ID, type) with PDF generation & QR code

🛠️ Tech Stack

Category Technology
Framework Next.js 16 (App Router)
UI Library React 19
Styling Tailwind CSS 4 + Custom CSS
Animations Framer Motion
Database MongoDB via Mongoose (optional — falls back to in-memory store)
Auth JWT (jose + jsonwebtoken) + bcryptjs
Icons Lucide React

🚀 Getting Started

1. Install dependencies

npm install

2. Set up environment variables

Copy the example file and edit as needed:

cp .env.local.example .env.local

3. Start the dev server

npm run dev

Open http://localhost:3000 🎉


🚢 Deployment

Vercel + MongoDB Atlas (Recommended)

  1. MongoDB Atlas (free): Create a cluster at mongodb.com/atlas
  2. GitHub: Push your code
  3. Vercel: Import repo and add MONGODB_URI and JWT_SECRET.

📄 License

MIT

About

This project represents my version and represents a model similarity with context to Demonstration of Real Time project showcase , co-develop the original idea with Mr jeet patel.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 93.1%
  • CSS 6.9%