BPIT Placement Website

Description

This project is created for BPIT (Bhagwan Parshuram Institute of Technology) college placement students to streamline and manage placement activities. Currently, students rely on third-party platforms like POD for job-related updates and placement information. This platform aims to provide a more personalized and efficient way for students and companies to engage with the placement process.

The project is built using the MERN stack (MongoDB, Express, React, Node.js) to ensure scalability, flexibility, and a seamless user experience.

🚀 Project Workflow Diagram

graph TD
    %% Define styles
    classDef adminNode fill:#ff8c00,stroke:#ffb347,stroke-width:3px,color:#1a1a1a,stroke-dasharray:4 2,round
    classDef studentNode fill:#00bfff,stroke:#87cefa,stroke-width:3px,color:#1a1a1a,stroke-dasharray:4 2,round
    classDef publicNode fill:#32cd32,stroke:#7cfc00,stroke-width:3px,color:#1a1a1a,stroke-dasharray:4 2,round
    classDef decisionNode fill:#ff4c4c,stroke:#ff6e6e,stroke-width:3px,color:#1a1a1a

    %% Shared Public Access
    subgraph Public["   🌐 Public Pages"]
        direction TB
        P1([Homepage, About,<br> Contact, Privacy Policy<br> Terms & Conditions,<br>FAQ Chatbot]):::publicNode
    end

    %% TNP Admin Flow
    subgraph TNP_Admin["👨‍💼 TNP Admin Flow"]
        direction TB
        A1([📝 TNP Admin Signup / Login]):::adminNode --> B1{🔐 Verify Admin Credentials}:::decisionNode
        B1 -->|✅ Admin| C1([📂 Access Admin Page]):::adminNode
        B1 -->|❌ Not Admin| A1

        C1 --> D1([📢 Post Job / Internship]):::adminNode
        C1 --> E1([🗑️ Delete Job Posts]):::adminNode

        A1 --> A2([🏢 Access Company & Community Pages]):::studentNode
        A2 --> A3([📝 Fill Job Application Form]):::studentNode
        A2 --> A4([💬 Community Chat]):::studentNode
    end

    %% Students Flow
    subgraph Students["🎓 Students Flow"]
        direction TB
        S1([🔓 Login / Signup]):::studentNode --> S2([🏢 Access Company & Community Pages]):::studentNode
        S2 --> S3([📝 Fill Job Application Form]):::studentNode
        S2 --> S4([💬 Community Chat]):::studentNode
        S2 -.-> S5([🚫 Cannot Access Admin Page]):::studentNode
    end

    %% Connect Public to both flows
    P1 --> A1
    P1 --> S1

Loading

Features

• 🔒 User Authentication & Authorization: Secure login for students, admins, and companies.
• 👤 Profiles: Dedicated profiles for students and companies.
• 💼 Job Listings & Applications: Browse and apply for placement opportunities.
• 📊 Admin Dashboard: Manage job postings and placements with ease.
• 🔔 Real-Time Notifications: Stay updated with instant alerts.
• 📧 Contact Form: Integrated with EmailJS for seamless communication.
• 🎨 Attractive UI: Smooth animations using Lottie and Framer Motion.
• 📱 Responsive Design: Optimized for both mobile and desktop devices.

🧪 Demo Credentials

You can use the following test credentials to explore the Admin Dashboard:

👨‍💼 Admin Login

• Username: admin
• Password: admin

🧰 Tech Stack

🖥️ Frontend

---

🗃️ Backend

---

🚀 Deployment & Hosting

---

📦 Tools That Powered This Project

📁 Project Structure

bpit-careerhub/
├── 🖥️ backend/                # Express.js backend
│   ├── index.js              # Entry point
│   ├── controller/           # Route logic (company, user, message)
│   ├── model/                # Mongoose schemas
│   ├── routes/               # API endpoints
│   ├── middleware/           # Auth middleware
│   └── jwt/                  # JWT token utils
│
├── 💻 client/                 # React frontend
│   ├── public/               # Static assets
│   └── src/
│       ├── Component/        # Reusable components
│       │   ├── Charts/       # Placement stats charts
│       │   ├── Header/       # Header, footer, scroll handling
│       │   ├── MainComponent/# Pages (Home, Company, Admin, etc.)
│       │   └── ProgressBar/  # Scroll progress UI
│       ├── App.js            # Main app component
│       ├── index.js          # React entry point
│       └── firebase.js       # Firebase config
│
├── 📄 README.md
└── 📁 .gitignore

Prerequisites

• Node.js and npm (Node Package Manager)
• MongoDB for database management
• React.js for frontend development

Installation

To run this project locally, follow the steps below:

1. Clone the repository

   git clone <repository-url>
   cd bpit-placement

2. Install server-side dependencies Navigate to the backend folder and install the dependencies:

   cd backend
   npm install

3. Install client-side dependencies Navigate to the frontend folder and install the dependencies:

   cd frontend
   npm install

4. Set up environment variables Create a .env file in the backend directory with the following variables:

   MONGO_URI=<Your MongoDB URI>
   JWT_SECRET=<Your JWT Secret>
   EMAILJS_USER_ID=<Your EmailJS User ID>
   EMAILJS_TEMPLATE_ID=<Your EmailJS Template ID>
   EMAILJS_SERVICE_ID=<Your EmailJS Service ID>

5. Run the application

   • Start the backend server:

     cd backend
     npm start

   • Start the frontend application:

     cd frontend
     npm start

   Your application should now be running on http://localhost:3000.

Deployment

The project is deployed on Render and can be accessed at:

BPIT Placement Live Site

Credits

This project was created to improve the placement process for BPIT students and reduce reliance on third-party platforms. The MERN stack was chosen for its scalability and efficiency in building modern web applications. Special thanks to the open-source community for providing the tools and libraries used in this project.

License

This project is open-source and available under the MIT License. See the LICENSE file for details.

Contributing

Feel free to fork this project and submit issues or pull requests if you want to contribute.