ProjectVista is a simple and powerful platform where students can show off their college projects. It helps students, teachers, recruiters, and admins work together in one place. Students can post their work, teachers can mentor them, and recruiters can find top talent.
Visit the platform and log in instantly with the demo accounts below. No registration needed!
| Role | Password | What You Can See | |
|---|---|---|---|
| 🛡️ Admin | [email protected] |
password123 |
Manage all users, assign mentors, view all groups & metrics |
| 👩🏫 Teacher | [email protected] |
meera123 |
Review proposals, track student progress, give ratings |
| 🎓 Student | [email protected] |
password123 |
Submit proposals, weekly reports, team chat |
💡 Tip: Login as all three roles to see how each dashboard is completely different!
- Personal Dashboards: Separate areas for Students, Teachers, Recruiters, and Admins to manage their work easily.
- Weekly Progress Reporting: Students submit their project updates every week with files and descriptions, allowing mentors to track development.
- Real-Time Chat: Project groups can talk to each other instantly using a built-in chat system to coordinate their work.
- Proposal System: A clean way for students to submit project ideas and get them approved by teachers.
- Digital Gallery: A beautiful list of all approved projects that anyone can browse to find inspiration.
- Evaluation & Insights: recruiters can give ratings, feedback, and professional insights on projects.
- Student Dashboard: This is the main hub for students. They can submit project proposals, upload weekly progress reports, manage their project files, and chat with their team members in real-time.
- Teacher Dashboard: Teachers act as mentors. They review project proposals, track student progress through weekly submissions, give ratings, and manage the student groups assigned to them.
- Admin Dashboard: The control center where admins manage all user accounts (students, teachers), organize project groups, and oversee the entire platform.
- Join the Platform: Sign up as a Student, Teacher, or Recruiter. Admins manage the system.
- Pitch Your Idea: Students submit a project proposal detailing their plan.
- Get Approved: A teacher reviews the proposal and approves it to form a project group.
- Weekly Updates: Every week, students submit progress reports (files and text) to show their work.
- Team Talk: Use the real-time group chat to stay connected with team members and mentors.
- Final Submission: Upload the complete project with GitHub links, demo videos, and documentation.
- Professional Review: Teachers and Recruiters check the final project. Recruiters provide ratings while Teachers give final academic approval.
- Showcase: The project appears in the main gallery for the public and other students to see.
| Layer | Technology |
|---|---|
| Frontend | Next.js 14 (App Router), React, Tailwind CSS |
| Backend | Node.js, Express.js |
| Real-Time | Socket.io (group chat) |
| Database | MongoDB, Mongoose |
| File & Image Uploads | Cloudinary |
| Email Notifications | Brevo (SMTP) |
| Authentication | JWT (JSON Web Tokens) |
| Deployment | Vercel (Frontend) + Render (Backend) |
college-project-showcase/
├── backend/
│ ├── controller/
│ ├── middleware/
│ ├── models/
│ ├── routes/
│ └── index.js
├── frontend/
│ └── my-app/
│ ├── app/
│ │ ├── admin-dashboard/
│ │ ├── student-dashboard/
│ │ ├── teacher-dashboard/
│ │ ├── explore/
│ │ └── view-project/
│ ├── components/
│ ├── context/
│ └── public/
└── README.md
git clone <repo-link>
cd college-project-showcaseCreate a .env file inside the backend/ folder and fill in the following:
# ── Database ──────────────────────────────────────────
MONGO_URL=mongodb+srv://<username>:<password>@cluster0.xxxxx.mongodb.net/college-project-showcase-platform
# ── Server ────────────────────────────────────────────
PORT=2021
# ── Authentication ────────────────────────────────────
JWT_SECRET=your_secret_key_here
# ── Email (Brevo SMTP) ────────────────────────────────
FROM_EMAIL=[email protected]
BREVO_SMTP_KEY=your_brevo_smtp_key_here
# ── Frontend URL (for CORS & email links) ─────────────
CLIENT_URL=https://your-frontend.vercel.app
# ── Cloudinary (File & Image Uploads) ─────────────────
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secretWhere to get these values:
Variable Where to get it MONGO_URLMongoDB Atlas → Connect → Drivers JWT_SECRETAny random string (e.g. openssl rand -base64 32)FROM_EMAILYour Gmail address used for sending emails BREVO_SMTP_KEYBrevo (formerly Sendinblue) → SMTP & API → SMTP Keys CLIENT_URLYour deployed frontend URL (Vercel / Netlify) CLOUDINARY_CLOUD_NAMECloudinary Dashboard → Account Details CLOUDINARY_API_KEYCloudinary Dashboard → API Keys CLOUDINARY_API_SECRETCloudinary Dashboard → API Keys
Create a .env.local file inside frontend/my-app/ and add:
# ── Backend API URL ───────────────────────────────────
NEXT_PUBLIC_BASE_URL=http://localhost:2021
# For production, change to your Render backend URL:
# NEXT_PUBLIC_BASE_URL=https://your-backend.onrender.com# Terminal 1: Backend
cd backend
npm install
npm start
# Terminal 2: Frontend
cd frontend/my-app
npm install
npm run devThe app will be running at http://localhost:3000
| Service | Purpose | Link |
|---|---|---|
| Vercel | Frontend (Next.js) | vercel.com |
| Render | Backend (Node/Express) | render.com |
| MongoDB Atlas | Database | cloud.mongodb.com |
| Cloudinary | File & image storage | cloudinary.com |
⚠️ On Render/Vercel, set all environment variables from Step 2 & 3 in the platform's Environment Variables settings panel.
Below is a full walkthrough of the platform — from the landing page to every role-based dashboard.
The hero section welcomes visitors and explains the platform's purpose.
Users select their role (Student / Teacher / Admin) and sign in. Each role unlocks a completely different dashboard.
Admins have a bird's-eye view of the entire platform — manage users, assign mentors, track all groups, and monitor project health metrics.
Teachers review student proposals, track weekly progress submissions, give ratings, and communicate with their assigned project groups.
Students submit project proposals, upload weekly progress reports with files, and chat with teammates in real-time — all from one place.
Anyone can browse the gallery of approved, completed projects — no login needed.
Each project has a detailed page showing the team, tech stack, GitHub link, demo video, and recruiter evaluations.