### Title: Building a Microblogging Site with MERN Stack in JavaScript
### Description:
This article explores the process of building a microblogging site using the MERN stack, which includes MongoDB for data storage, Express.js for web server framework, React.js for frontend development, and Node.js for backend operations. It covers key aspects such as setting up the project, creating user authentication, implementing real-time updates, and deploying the application.
### Content:
In today＇s digital age, microblogging platforms have become increasingly popular. These platforms allow users to share short messages or posts on their social media feeds. In this article, we will walk through the process of building a simple microblogging site using the MERN stack, which consists of MongoDB, Express.js, React.js, and Node.js.
#### Setting Up the Project
To start, we need to set up our environment. First, install Node.js and MongoDB on your local machine. Then, initialize a new Node.js project using npm:
```bash
mkdir microblogging-site
cd microblogging-site
npm init -y
```
Next, install the necessary dependencies:
```bash
npm install express mongoose bcryptjs jsonwebtoken react react-dom axios dotenv
```
#### Database Setup
For the backend, we＇ll use MongoDB. Install the `mongoose` package:
```bash
npm install mongoose
```
Create a `db.js` file to handle database connections:
```javascript
const mongoose = require(＇mongoose＇);
mongoose.connect(＇mongodb://localhost/microblogging＇, {
useNewUrlParser: true,
useUnifiedTopology: true
});
module.exports = mongoose.connection;
```
Create a `User.js` model for user authentication:
```javascript
const mongoose = require(＇mongoose＇);
const bcrypt = require(＇bcryptjs＇);
const userSchema = new mongoose.Schema({
username: { type: String, required: true, unique: true },
password: { type: String, required: true }
});
userSchema.pre(＇save＇, async function(next) {
if (!this.isModified(＇password＇)) return next();
const salt = await bcrypt.genSalt(10);
this.password = await bcrypt.hash(this.password, salt);
});
userSchema.methods.comparePassword = async function(candidatePassword) {
return await bcrypt.compare(candidatePassword, this.password);
};
const User = mongoose.model(＇User＇, userSchema);
module.exports = User;
```
#### Backend API Development
Create an `api.js` file to handle API routes:
```javascript
const express = require(＇express＇);
const User = require(＇../models/User＇);
const jwt = require(＇jsonwebtoken＇);
const router = express.Router();
router.post(＇/register＇, async (req, res) =＞ {
const user = new User(req.body);
try {
await user.save();
res.status(201).send(user);
} catch (e) {
res.status(400).send(e.message);
}
});
router.post(＇/login＇, async (req, res) =＞ {
const { username, password } = req.body;
const user = await User.findOne({ username });
if (!user || !(await user.comparePassword(password))) {
return res.status(400).send(＇Invalid Credentials＇);
}
const token = jwt.sign({ _id: user._id }, ＇mysecretkey＇);
res.send({ token });
});
module.exports = router;
```
#### Frontend Development
Create a `src` directory and inside it, create `App.js` for the main component and `Login.js`, `Register.js`, and `Post.js` for individual pages.
**App.js**
```javascript
import React, { useState } from ＇react＇;
import Login from ＇./Login＇;
import Register from ＇./Register＇;
import Post from ＇./Post＇;
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const loginHandler = () =＞ {
setIsLoggedIn(true);
};
const logoutHandler = () =＞ {
setIsLoggedIn(false);
};
return (
＜div＞
{isLoggedIn ? (
＜＞
＜h1＞Welcome Back!＜/h1＞
＜Post /＞
＜button onClick={logoutHandler}＞Logout＜/button＞
＜/＞
) : (
＜＞
＜h1＞Microblogging Site＜/h1＞
＜Login loginHandler={loginHandler} /＞
＜Register /＞
＜/＞
)}
＜/div＞
);
}
export default App;
```
**Login.js**
```javascript
import React, { useState } from ＇react＇;
import axios from ＇axios＇;
const Login = ({ loginHandler }) =＞ {
const [username, setUsername] = useState(＇＇);
const [password, setPassword] = useState(＇＇);
const handleSubmit = async (e) =＞ {
e.preventDefault();
try {
const response = await axios.post(＇http://localhost:3001/login＇, { username, password });
loginHandler();
} catch (error) {
console.error(error);
}
};
return (
＜form onSubmit={handleSubmit}＞
＜input
type=＂text＂
placeholder=＂Username＂
value={username}
onChange={(e) =＞ setUsername(e.target.value)}
/＞
＜input
type=＂password＂
placeholder=＂Password＂
value={password}
onChange={(e) =＞ setPassword(e.target.value)}
/＞
＜button type=＂submit＂＞Login＜/button＞
＜/form＞
);
};
export default Login;
```
**Register.js**
```javascript
import React, { useState } from ＇react＇;
import axios from ＇axios＇;
const Register = () =＞ {
const [username, setUsername] = useState(＇＇);
const [password, setPassword] = useState(＇＇);
const handleSubmit = async (e) =＞ {
e.preventDefault();
try {
await axios.post(＇http://localhost:3001/register＇, { username, password });
alert(＇Registration successful!＇);
} catch (error) {
console.error(error);
}
};
return (
＜form onSubmit={handleSubmit}＞
＜input
type=＂text＂
placeholder=＂Username＂
value={username}
onChange={(e) =＞ setUsername(e.target.value)}
/＞
＜input
type=＂password＂
placeholder=＂Password＂
value={password}
onChange={(e) =＞ setPassword(e.target.value)}
/＞
＜button type=＂submit＂＞Register＜/button＞
＜/form＞
);
};
export default Register;
```
**Post.js**
```javascript
import React, { useState } from ＇react＇;
import axios from ＇axios＇;
const Post = () =＞ {
const [message, setMessage] = useState(＇＇);
const handleSubmit = async (e) =＞ {
e.preventDefault();
try {
await axios.post(＇http://localhost:3001/post＇, { message });
setMessage(＇＇);
} catch (error) {
console.error(error);
}
};
return (
＜form onSubmit={handleSubmit}＞
＜input
type=＂text＂
placeholder=＂Write a post...＂
value={message}
onChange={(e) =＞ setMessage(e.target.value)}
/＞
＜button type=＂submit＂＞Post＜/button＞
＜/form＞
);
};
export default Post;
```
#### Final Steps
Now that we have the basic structure in place, we need to configure our front-end to connect to the backend API. This involves making HTTP requests to the server endpoints.
#### Deployment
Once everything is working locally, you can deploy your application to a cloud platform like Heroku or Vercel.
By following these steps, you can build a functional microblogging site using the MERN stack. This project not only demonstrates the capabilities of each technology but also provides a solid foundation for more complex applications.
