Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
10 views3 pages

MERN Ticketing System Solution

The document outlines the structure and code for a MERN stack ticketing system, including the frontend built with React and the backend using Node.js and Express. It details the project structure, key components like authentication middleware, and provides deployment instructions for both the frontend and backend. The system includes routes for user and ticket management, with MongoDB as the database.

Uploaded by

Vedant Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views3 pages

MERN Ticketing System Solution

The document outlines the structure and code for a MERN stack ticketing system, including the frontend built with React and the backend using Node.js and Express. It details the project structure, key components like authentication middleware, and provides deployment instructions for both the frontend and backend. The system includes routes for user and ticket management, with MongoDB as the database.

Uploaded by

Vedant Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

MERN Stack Ticketing System - Full

Code
1. Project Structure
/client
/src
/components
/pages
/styles
App.js
index.js
/server
/controllers
/models
/routes
/middleware
server.js

2. Frontend (React)
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-
dom';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';
import Register from './pages/Register';

function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Router>
);
}
export default App;

3. Backend (Node.js + Express)


// server.js
import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import userRoutes from './routes/userRoutes.js';
import ticketRoutes from './routes/ticketRoutes.js';

dotenv.config();
const app = express();
app.use(express.json());

mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true
}).then(() => console.log('MongoDB connected'));

app.use('/api/users', userRoutes);
app.use('/api/tickets', ticketRoutes);

const PORT = process.env.PORT || 5000;


app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

4. Authentication
// authMiddleware.js
import jwt from 'jsonwebtoken';
import User from '../models/userModel.js';

const protect = async (req, res, next) => {


let token;
if (req.headers.authorization &&
req.headers.authorization.startsWith('Bearer')) {
try {
token = req.headers.authorization.split(' ')[1];
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = await User.findById(decoded.id).select('-password');
next();
} catch (error) {
res.status(401).json({ message: 'Not authorized, token failed' });
}
}
if (!token) {
res.status(401).json({ message: 'Not authorized, no token' });
}
};

export default protect;

5. Deployment Instructions
Frontend:
- Push React app to GitHub
- Connect GitHub repo to Vercel or Netlify
- Set build command as `npm run build`

Backend:
- Push Node.js app to GitHub
- Deploy using Render or Heroku
- Add environment variables (MONGO_URI, JWT_SECRET)

You might also like