Let's Build Project Management System Pt. 4

Since the backend is working, we can now start using the middleware packages we installed earlier.

Let's begin with morgan.

import express from "express";
import morgan from "morgan";

const app = express();

app.use(morgan("tiny"));

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

Now that logging is in place, the next middleware we will configure is cors. We will whitelist the React application's URL: http://localhost:5173.

import express from "express";
import morgan from "morgan";
import cors from "cors";

const app = express();

app.use(morgan("tiny"));
app.use(
    cors({
        origin: "http://localhost:5173",
    }),
);

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

Finally, let's add helmet and compression.

import express from "express";
import morgan from "morgan";
import cors from "cors";
import helmet from "helmet";
import compression from "compression";

const app = express();

app.use(morgan("tiny"));
app.use(
    cors({
        origin: "http://localhost:5173",
    }),
);
app.use(helmet());
app.use(compression());

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

Perfect! Now visit http://localhost:3000/ping. It should return the same output as before. However, this time you will also see the request being logged in the terminal.

Yes — it’s working for me 👍

Now is a good time to open Insomnia (or any other API client). Send a request to the same endpoint and confirm that you receive: { "data": "pong" }

Cleaning Up the Frontend

On the frontend side, let’s clean up the scaffolded application:

• Remove the public folder
• Remove the src/assets folder
• Remove the App.css file

After cleaning up, your folder structure should look minimal and clean.

Now open the App.jsx file and replace its content with the following:

const App = () => {
    return <h1>hello, world</h1>;
};

export default App;

Run the React application using:

npm run dev

Within a few seconds, the application should be available at: http://localhost:5173. Visit the URL and confirm that you see: hello, world.

Both applications are now running — yay! 🎉

---