I'll break down each step further and provide more explanation.
Step 1: Setting up the project structure
1. *Create a new folder*: Open your computer's file explorer and create a new folder. Name it `school-
management-portal`.
2. *Create subfolders*: Inside the `school-management-portal` folder, create four new subfolders:
- `client`: This folder will hold the frontend code (React.js).
- `server`: This folder will hold the backend code (Node.js with Express.js).
- `models`: This folder will hold the database schema (MongoDB).
- `public`: This folder will hold static assets (e.g., images, CSS files).
Step 2: Setting up the frontend (React.js)
1. *Create a new file*: Inside the `client` folder, create a new file called `index.html`.
2. *Add HTML code*: Copy the following HTML code and paste it into the `index.html` file:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Management Portal</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
```
This HTML file sets up the basic structure for the frontend.
Step 3: Setting up the backend (Node.js with Express.js)
1. *Create a new file*: Inside the `server` folder, create a new file called `server.js`.
2. *Add Node.js code*: Copy the following Node.js code and paste it into the `server.js` file:
```
const express = require('express');
const app = express();
const port = 3001;
app.use(express.json());
app.get('/', (req, res) => {
res.send('School Management Portal Backend');
});
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
```
This Node.js code sets up a basic Express.js server.
Step 4: Setting up the database (MongoDB)
1. *Install MongoDB*: Download and install MongoDB Community Server on your computer.
2. *Create a new database*: Open MongoDB Compass and create a new database called `school-
management-portal`.
3. *Create a new collection*: Inside the `school-management-portal` database, create a new collection
called `students`.
Step 5: Creating the student registration form
1. *Create a new file*: Inside the `client` folder, create a new file called `StudentForm.js`.
2. *Add React.js code*: Copy the following React.js code and paste it into the `StudentForm.js` file:
```
import React, { useState } from 'react';
function StudentForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
console.log('Student registered:', name, email, phone);
};
return (
<form onSubmit={handleSubmit}>
<label>Name:</label>
<input type="text" value={name} onChange={(event) => setName(event.target.value)} />
<br />
<label>Email:</label>
<input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
<br />
<label>Phone:</label>
<input type="text" value={phone} onChange={(event) => setPhone(event.target.value)} />
<br />
<button type="submit">Register</button>
</form>
);
export default StudentForm;
```
This React.js code creates a simple student registration form.
Step 6: Integrating the student registration form with the backend
1. *Create a new file*: Inside the `server` folder, create a new file called `api.js`.
2. *Add Node.js code*: Copy the following Node.js code and paste it into the `api.js` file:
```
const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const Student = mongoose.model('Student', {
name: String,
email: String,
phone: String
});
router.post('/register', (req, res) => {
const student = new Student(req.body);
student.save((err) => {
if (err) {
console.log(err);
} else {
res.send('Student registered successfully!');
});
});
module.exports = router;
```
This Node.js code sets up an API endpoint to handle student registration.
I hope this explanation helps clarify the steps. Let me know if you have any further questions or need
additional clarification!
Step-by-Step Guide to Building a School Management Portal
Step 1: Setting Up the Project Structure
Create a Main Folder for Your Project
First, open your computer’s file explorer and create a new folder called school-management-portal.
bash
Copy
mkdir school-management-portal
cd school-management-portal
Create Subfolders
Inside the school-management-portal folder, create the following subfolders:
client: This folder will hold the frontend code (React.js).
server: This folder will hold the backend code (Node.js with Express).
models: This folder will store MongoDB schema definitions.
public: This folder will contain static assets (like images or CSS files).
Example structure:
bash
Copy
school-management-portal/
├── client/
├── server/
├── models/
└── public/
Step 2: Setting Up the Backend (Node.js + Express)
Navigate to the server folder and initialize a Node.js project:
First, go to the server directory:
bash
Copy
cd server
Then, initialize the Node.js project:
bash
Copy
npm init -y
Install necessary packages:
bash
Copy
npm install express mongoose body-parser cors
Create server.js (Express Backend Setup):
Inside the server folder, create a file named server.js and add the following code to set up the basic
Express server.
js
Copy
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const studentRoutes = require('./api');
const app = express();
const port = 3001;
// Middleware
app.use(cors());
app.use(bodyParser.json());
// Routes
app.use('/api', studentRoutes);
// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/school-management-portal', { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => {
console.log('Connected to MongoDB');
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
})
.catch((err) => console.log('MongoDB connection error:', err));
Create API Routes (api.js):
Inside the server folder, create api.js to handle the student registration API.
js
Copy
const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();
// Student Model
const Student = mongoose.model('Student', {
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
phone: { type: String, required: true },
});
// POST request to register student
router.post('/register', async (req, res) => {
const { name, email, phone } = req.body;
// Simple validation
if (!name || !email || !phone) {
return res.status(400).json({ message: 'All fields are required' });
// Create new student
try {
const student = new Student({ name, email, phone });
await student.save();
res.status(201).json({ message: 'Student registered successfully!' });
} catch (error) {
console.log(error);
res.status(500).json({ message: 'Error registering student' });
}
});
module.exports = router;
Create a MongoDB Schema (student.js):
Inside the models folder, create student.js to define the MongoDB schema for the student.
js
Copy
const mongoose = require('mongoose');
// Student Schema
const studentSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
phone: { type: String, required: true },
});
mongoose.model('Student', studentSchema);
Run the Server:
Start the backend server by running:
bash
Copy
node server.js
Step 3: Setting Up the Frontend (React.js)
Navigate to the client folder and create a React app:
Go back to the school-management-portal folder and navigate to client.
bash
Copy
npx create-react-app client
cd client
Install Axios for API Requests:
Install axios to make HTTP requests to the backend.
bash
Copy
npm install axios
Create StudentForm.js (React Registration Form):
Inside the client/src folder, create a file named StudentForm.js and add the following code:
js
Copy
import React, { useState } from 'react';
function StudentForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [message, setMessage] = useState('');
const handleSubmit = async (event) => {
event.preventDefault();
const response = await fetch('/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, email, phone }),
});
const result = await response.json();
if (response.ok) {
setMessage('Student registered successfully!');
} else {
setMessage(`Registration failed: ${result.message}`);
};
return (
<div>
<h2>Student Registration</h2>
{message && <p>{message}</p>}
<form onSubmit={handleSubmit}>
<label>Name:</label>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} required />
<br />
<label>Email:</label>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
<br />
<label>Phone:</label>
<input type="text" value={phone} onChange={(e) => setPhone(e.target.value)} required />
<br />
<button type="submit">Register</button>
</form>
</div>
);
export default StudentForm;
Integrate the Form into App.js:
In the src/App.js file, import and use the StudentForm component.
js
Copy
import React from 'react';
import StudentForm from './StudentForm';
function App() {
return (
<div className="App">
<StudentForm />
</div>
);
export default App;
Start the React App:
In the client folder, start the React development server:
bash
Copy
npm start
Your React frontend will now run on http://localhost:3000.
