Mauli Maharashtra Syllabus Guidelines And MHT-CET

Sidebar.jsx

import {

LayoutDashboard,

FolderKanban,

Rocket,

Activity,

GitBranch,

FileText,

Wrench,

Shield,

Terminal,

Settings,

} from "lucide-react";

const menuItems = [

{ name: "Dashboard", icon: LayoutDashboard },

{ name: "Projects", icon: FolderKanban },

{ name: "Deployments", icon: Rocket },

{ name: "Monitoring", icon: Activity },

{ name: "CI/CD", icon: GitBranch },

{ name: "Logs", icon: FileText },

{ name: "Self-Healing", icon: Wrench },

{ name: "Security", icon: Shield },

{ name: "Terminal", icon: Terminal },

{ name: "Settings", icon: Settings },

];

const Sidebar = () => {

return (

Opsify

</h1>

</div>

{menuItems.map((item) => (

<div

key={item.name}

className="flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer hover:bg-slate-800 transition"

<item.icon size={18} />

</div>

))}

</nav>

</aside>

);

};

export default Sidebar;

Topbar.jsx

import { Bell, UserCircle } from "lucide-react";

const Topbar = () => {

return (

<div>

Dashboard

</h2>

Overview of your DevOps environment

</p>

</div>

<div>

Admin

</p>

</div>

</header>

);

};

export default Topbar;

Statcard.jsx

const StatCard = ({

title,

value,

growth,

}) => {

return (

{title}

</h3>

{value}

</p>

{growth}

</p>

</div>

);

};

export default StatCard;

Layout.jsx

import Sidebar from "./Sidebar";

import Topbar from "./Topbar";

const Layout = ({ children }) => {

return (

{children}

</main>

</div>

);

};

export default Layout;

[08/06, 10:12 pm] Mauli Tcs: src/pages/LandingPage.jsx

import { Bot, Rocket, Shield, Activity } from "lucide-react";

const LandingPage = () => {

return ( <div className="min-h-screen bg-white"> <nav className="flex justify-between items-center px-8 py-5 border-b"> <h1 className="text-2xl font-bold text-blue-600">

Opsify </h1>

```

<a href="#">Features</a>

<a href="#">Pricing</a>

<a href="#">About</a>

</div>

Get Started

</button>

</nav>

<div>

AI Powered

{" "}DevOps Platform

</span>

</h1>

Build, Deploy, Monitor and Heal applications

using AI-powered automation.

</p>

Start Building

</button>

View Demo

</button>

</div>

<img

src="https://placehold.co/600x400"

alt="hero"

className="rounded-xl shadow"

</div>

</section>

<FeatureCard icon={<Bot />} title="AI Blueprint" />

<FeatureCard icon={<Rocket />} title="Deployments" />

<FeatureCard icon={<Activity />} title="Monitoring" />

<FeatureCard icon={<Shield />} title="Self Healing" />

</div>

</section>

</div>

```

);

};

const FeatureCard = ({ icon, title }) => (

<h3 className="font-bold mt-4">{title}</h3>

</div>

);

export default LandingPage;

[08/06, 10:12 pm] Mauli Tcs: src/pages/LoginPage.jsx

const LoginPage = () => {

return ( <div className="min-h-screen flex items-center justify-center bg-slate-100"> <div className="bg-white p-8 rounded-xl shadow w-full max-w-md"> <h1 className="text-3xl font-bold mb-6">

```

<input

type="email"

placeholder="Email"

className="w-full border p-3 rounded-lg"

<input

type="password"

placeholder="Password"

className="w-full border p-3 rounded-lg"

<button

className="w-full bg-blue-600 text-white py-3 rounded-lg"

</button>

</form>

</div>

```

);

};

export default LoginPage;

[08/06, 10:12 pm] Mauli Tcs: const RegisterPage = () => {

return ( <div className="min-h-screen flex items-center justify-center bg-slate-100"> <div className="bg-white p-8 rounded-xl shadow w-full max-w-lg"> <h1 className="text-3xl font-bold mb-6">

Create Account </h1>

```

<input

type="text"

placeholder="Name"

className="w-full border p-3 rounded-lg"

<input

type="email"

placeholder="Email"

className="w-full border p-3 rounded-lg"

<input

type="password"

placeholder="Password"

className="w-full border p-3 rounded-lg"

<input

type="password"

placeholder="Confirm Password"

className="w-full border p-3 rounded-lg"

<button

className="w-full bg-blue-600 text-white py-3 rounded-lg"

</button>

</form>

</div>

```

);

};

export default RegisterPage;

[08/06, 10:14 pm] Mauli Tcs: src/pages/DashboardPage.jsx

import Layout from "../components/common/Layout";

import StatCard from "../components/common/StatCard";

const DashboardPage = () => {

return ( <Layout> <div className="grid md:grid-cols-4 gap-6"> <StatCard

title="Total Projects"

value="12"

growth="+12%"

```

<StatCard

title="Deployments"

value="28"

growth="+18%"

<StatCard

title="Running Containers"

value="15"

growth="+8%"

<StatCard

title="Success Rate"

value="98%"

growth="+2%"

</div>

Recent Activity

</h2>

🚀 Deployment Started

</div>

✅ Docker Build Success

</div>

🔥 AI Generated Blueprint

</div>

<div>

📊 Monitoring Enabled

</div>

</Layout>

```

);

};

export default DashboardPage;

[08/06, 10:14 pm] Mauli Tcs: src/pages/ProjectsPage.jsx

import Layout from "../components/common/Layout";

const projects = [

{

id: 1,

name: "EstateFind",

tech: "React + Spring Boot",

status: "Running",

{

id: 2,

name: "Opsify",

tech: "React + Django",

status: "Development",

];

const ProjectsPage = () => {

return ( <Layout> <div className="flex justify-between items-center mb-6"> <h1 className="text-3xl font-bold">

Projects </h1>

```

New Project

</button>

</div>

<tr>

<th className="p-4 text-left">Project</th>

<th className="p-4 text-left">Stack</th>

<th className="p-4 text-left">Status</th>

</tr>

</thead>

<tbody>

{projects.map((project) => (

<tr

key={project.id}

className="border-t"

{project.name}

</td>

{project.tech}

</td>

{project.status}

</td>

</tr>

))}

</tbody>

</table>

</div>

</Layout>

```

);

};

export default ProjectsPage;

[08/06, 10:14 pm] Mauli Tcs: src/pages/CreateProjectPage.jsx

import Layout from "../components/common/Layout";

const CreateProjectPage = () => {

return ( <Layout> <div className="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow"> <h1 className="text-3xl font-bold mb-6">

Create New Project </h1>

```

<div>

Project Name

</label>

<input

type="text"

className="w-full border p-3 rounded-lg"

placeholder="Opsify"

</div>

<div>

Description

</label>

<textarea

rows="4"

className="w-full border p-3 rounded-lg"

placeholder="Enter project description"

</div>

<div>

Repository URL

</label>

<input

type="text"

className="w-full border p-3 rounded-lg"

placeholder="https://github.com/user/repo"

</div>

<div>

Tech Stack

</label>

<option>React</option>

<option>Spring Boot</option>

<option>Django</option>

</select>

</div>

<button

type="submit"

className="bg-blue-600 text-white px-6 py-3 rounded-lg"

Generate AI Blueprint

</button>

</form>

</div>

</Layout>

```

);

};

export default CreateProjectPage;

[08/06, 10:15 pm] Mauli Tcs: src/pages/ProjectDetailsPage.jsx

import Layout from "../components/common/Layout";

const FilesPage = () => {

return ( <Layout>

```

Project Files

</h2>

<li>Dockerfile</li>

<li>docker-compose.yml</li>

<li>Jenkinsfile</li>

<li>README.md</li>

<li>application.yml</li>

</ul>

</div>

Dockerfile

</h2>

<textarea

rows="20"

className="w-full border rounded-lg p-4 font-mono"

defaultValue={`FROM node:20

```

WORKDIR /app

COPY . .

RUN npm install

CMD ["npm","start"]`}

```

</div>

</Layout>

```

);

};

export default FilesPage;

[08/06, 10:16 pm] Mauli Tcs: src/pages/DeploymentPage.jsx

import Layout from "../components/common/Layout";

const DeploymentPage = () => {

return ( <Layout>

```

Deployments

</h1>

Deploy Now

</button>

</div>

Frontend

</h3>

Running

</p>

React Container

</p>

</div>

Backend

</h3>

Running

</p>

Django Container

</p>

</div>

Database

</h3>

Running

</p>

PostgreSQL

</p>

</div>

Start

</button>

Restart

</button>

Stop

</button>

Rollback

</button>

</div>

</Layout>

```

);

};

export default DeploymentPage;

[08/06, 10:17 pm] Mauli Tcs: src/pages/MonitoringPage.jsx

import Layout from "../components/common/Layout";

const MonitoringPage = () => {

return ( <Layout> <div className="space-y-6">

```

Monitoring

</h1>

<h3 className="text-gray-500">CPU Usage</h3>

</div>

<h3 className="text-gray-500">Memory</h3>

</div>

<h3 className="text-gray-500">Network</h3>

</div>

<h3 className="text-gray-500">Uptime</h3>

</div>

Active Containers

</h2>

<thead>

<th className="text-left py-3">Container</th>

<th className="text-left py-3">Status</th>

</tr>

</thead>

<tbody>

<tr>

<td className="py-3">frontend</td>

<td className="text-green-600">Running</td>

</tr>

<tr>

<td className="py-3">backend</td>

<td className="text-green-600">Running</td>

</tr>

<tr>

<td className="py-3">postgres</td>

<td className="text-green-600">Running</td>

</tr>

</tbody>

</table>

</div>

</Layout>

```

);

};

export default MonitoringPage;

[08/06, 10:17 pm] Mauli Tcs: src/pages/PipelinePage.jsx

import Layout from "../components/common/Layout";

const stages = [

"Git Checkout",

"Build",

"Test",

"Docker Build",

"Security Scan",

"Deploy"

];

const PipelinePage = () => {

return ( <Layout>

```

CI/CD Pipeline

</h1>

{stages.map((stage) => (

<div

key={stage}

className="bg-green-100 border border-green-300 p-5 rounded-xl text-center"

{stage}

</h3>

Success

</p>

</div>

))}

</div>

Pipeline Information

</h2>

<p>

Last Execution: 10 Minutes Ago

</p>

<p>

Duration: 4m 35s

</p>

<p>

Status: Successful

</p>

</div>

</Layout>

```

);

};

export default PipelinePage;

[08/06, 10:17 pm] Mauli Tcs: src/pages/LogsPage.jsx

import Layout from "../components/common/Layout";

const LogsPage = () => {

return ( <Layout>

```

System Logs

</h1>

Application Logs

</button>

Build Logs

</button>

Deployment Logs

</button>

</div>

```

{`[INFO] Starting application... [INFO] Database connected. [INFO] Redis connected. [INFO] Jenkins pipeline started. [INFO] Docker image built successfully. [INFO] Deployment completed. [SUCCESS] Service running on port 8000.`}

```

</div>

</Layout>

```

);

};

export default LogsPage;

[08/06, 10:18 pm] Mauli Tcs: src/pages/SecurityPage.jsx

import Layout from "../components/common/Layout";

const AiBlueprintPage = () => {

return ( <Layout>

```

AI Blueprint Generator

</h1>

Project Requirements

</h2>

<textarea

rows="15"

className="w-full border rounded-lg p-3"

placeholder="Describe your application..."

Generate Blueprint

</button>

</div>

Generated Architecture

</h2>

<div>Frontend → React</div>

<div>Backend → Django</div>

<div>Database → PostgreSQL</div>

<div>CI/CD → Jenkins</div>

<div>Deployment → Docker</div>

<div>Monitoring → Prometheus</div>

</div>

</Layout>

```

);

};

export default AiBlueprintPage;

[08/06, 10:19 pm] Mauli Tcs: src/pages/CodeGeneratorPage.jsx

import Layout from "../components/common/Layout";

const CodeGeneratorPage = () => {

return ( <Layout>

```

AI Code Generator

</h1>

<textarea

rows="12"

className="w-full border rounded-lg p-3"

placeholder="Generate Employee Management System..."

Generate Code

</button>

</div>

Generated Output

</h2>

```

{`public class Employee {

private Long id;

private String name;

}`} </pre>

```

</div>

</Layout>

```

);

};

export default CodeGeneratorPage;

[08/06, 10:19 pm] Mauli Tcs: src/pages/SettingsPage.jsx

import Layout from "../components/common/Layout";

const SettingsPage = () => {

return ( <Layout>

```

Settings

</h1>

<div>

Username

</label>

<input

type="text"

className="w-full border p-3 rounded-lg"

defaultValue="admin"

</div>

<div>

</label>

<input

type="email"

className="w-full border p-3 rounded-lg"

defaultValue="admin@opsify.com"

</div>

<div>

Jenkins URL

</label>

<input

type="text"

className="w-full border p-3 rounded-lg"

placeholder="http://localhost:8080"

</div>

<div>

Docker Host

</label>

<input

type="text"

className="w-full border p-3 rounded-lg"

placeholder="localhost"

</div>

Save Settings

</button>

</div>

</Layout>

```

);

};

export default SettingsPage;

[08/06, 10:20 pm] Mauli Tcs: src/routes/AppRoutes.jsx

import { Routes, Route } from "react-router-dom";

import LandingPage from "../pages/LandingPage";

import LoginPage from "../pages/LoginPage";

import RegisterPage from "../pages/RegisterPage";

import DashboardPage from "../pages/DashboardPage";

import ProjectsPage from "../pages/ProjectsPage";

import CreateProjectPage from "../pages/CreateProjectPage";

import ProjectDetailsPage from "../pages/ProjectDetailsPage";

import FilesPage from "../pages/FilesPage";

import DeploymentPage from "../pages/DeploymentPage";

import MonitoringPage from "../pages/MonitoringPage";

import PipelinePage from "../pages/PipelinePage";

import LogsPage from "../pages/LogsPage";

import SecurityPage from "../pages/SecurityPage";

import TerminalPage from "../pages/TerminalPage";

import AiBlueprintPage from "../pages/AiBlueprintPage";

import CodeGeneratorPage from "../pages/CodeGeneratorPage";

import SettingsPage from "../pages/SettingsPage";

const AppRoutes = () => {

return ( <Routes>

<Route path="/login" element=

Mauli

MHTCET MOCK TEST 2025

HSC BOARD EXAM 2026

Syllabus Links

Popular Posts