Let's Build Peter 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! 🎉

શ્રદ્ધાનું જોર

શ્રીરામકૃષ્ણ - (કેદારને) શ્રદ્ધાનું જોર કેટલું છે તે તો સાંભળ્યું છે ને? પુરાણમાં કહ્યું છે કે રામચંદ્ર કે જે સાક્ષાત્ પૂર્ણ બ્રહ્મ નારાયણ, તેમને લંકામાં પહોંચવા સારુ પુલ બાંધવો પડ્યો, પણ હનુમાન રામનામમાં શ્રદ્ધા રાખીને એક જ છલાંગે સમુદ્રની પેલી પાર કૂદી પડયા. તેમને પુલની જરૂર નહિ. (સૌનું હાસ્ય)

~ શ્રીરામકૃષ્ણ કથામૃતમાંથી

Let's Build Peter Pt. 3

Inside the backend folder, let’s create an app.js file and write some base code to test our setup.

touch app.js

We will use the modern import...from syntax. We’ll update the necessary configuration in the package.json file shortly.

import express from "express";

const app = express();

Now, let’s define a /ping route that returns "pong" as a JSON response.

import express from "express";

const app = express();

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

💡 Tip: Always use return when you want to stop the execution of a function after sending a response.

We will use port 3000 because the React application created using Vite runs on port 5173 by default.

import express from "express";

const app = express();

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

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

Finally, let’s start the server and print the URL for future reference and debugging.

import express from "express";

const app = express();

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

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

We need to make the following changes in the package.json file:

• Change "type" from "commonjs" to "module" to support the import...from syntax.
• Change "main" from index.js to app.js.

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "type": "module",
    "dependencies": {
        "compression": "1.8.1",
        "cors": "2.8.6",
        "express": "5.2.1",
        "helmet": "8.1.0",
        "morgan": "1.10.1",
        "postgres": "3.4.8"
    }
}

I almost forgot — we also need nodemon to automatically restart the server when files change during development.

💡 Tip: This is an example of a non-perfect setup. You will always miss something — and that’s completely fine.

Install nodemon as a development dependency:

npm i -E -D nodemon

Now, let’s add two scripts to package.json:

• dev → runs nodemon app.js
• start → runs node app.js

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "dev": "nodemon app.js",
        "start": "node app.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "type": "module",
    "dependencies": {
        "compression": "1.8.1",
        "cors": "2.8.6",
        "express": "5.2.1",
        "helmet": "8.1.0",
        "morgan": "1.10.1",
        "postgres": "3.4.8"
    },
    "devDependencies": {
        "nodemon": "3.1.11"
    }
}

With these changes, we are ready to run the application. Both scripts will start the server, but during development, we usually use:

npm run dev

Now open your browser and visit http://localhost:3000/ping. You should see { "data": "pong" } And yup — it’s working! 🎉 If everything works on your side, you’re ready to head over to the next article.

Let's Build Peter Pt. 2

Let’s create a folder named peter and navigate into it.

mkdir peter
cd peter

Now, create two folders — frontend and backend. As the names suggest, the frontend folder will contain the React code, and the backend folder will contain the Node.js code.

mkdir frontend backend

Inside the frontend folder, let’s create a React application using Vite with the JavaScript template.

cd frontend
npm create vite@latest . -- --template react

While the process is running, open a new terminal tab (or window), navigate to the backend folder, and perform some initial setup such as creating a package.json file and installing the required dependencies.

cd ../backend

Let’s create a package.json file:

npm init -y

Now, install the express and postgres packages:

npm i -E express postgres

Next, install a few middleware packages:

• morgan for logging
• helmet for security
• cors to allow API calls from the React application
• compression to compress responses

npm i -E morgan helmet cors compression

Great! The initial setup is complete, and we’re ready to get started.

સર્વભૂતમાં નારાયણ

શ્રીરામકૃષ્ણ (નરેન્દ્રને) - નરેન્દ્ર! તું શું કહે છે? સંસારી લોકો તો કેટલુંય બોલે! પણ જો, હાથી જ્યારે રસ્તામાં હોય, ત્યારે કેટલાંય પ્રાણીઓ તેની પાછળ પડે, પણ હાથી તેની સામું જુએ પણ નહિ. તારી જો કોઈ નિંદા કરે, તો તને કેવું લાગે?
 

નરેન્દ્ર - હું માનું કે કૂતરાં હાઉ હાઉ કરે છે.
 

શ્રીરામકૃષ્ણ (હસીને) – ના રે ના, એટલું બધું નહિ. (સૌનું હાસ્ય) ઈશ્વર પ્રાણી માત્રમાં છે. પણ સારા માણસોની સાથે હળવું મળવું ચાલે; જ્યારે નરસા માણસોથી દૂર રહેવું જોઈએ. એમ તો વાઘની અંદર પણ નારાયણ છે; એટલે કંઈ વાઘને ભેટી પડાય નહિ! (સૌનું હાસ્ય). જો એમ કહો કે વાઘ તો નારાયણ છે, તો પછી ભાગી શા માટે જવું? તેનો જવાબ એ કે જેઓ કહે છે કે ‘ભાગી જાઓ' તેઓ પણ નારાયણ છે, તો તેમની વાત કેમ ન સાંભળવી?
 

'એક વાત સાંભળો. એક જંગલમાં એક સાધુ રહેતો હતો. તેને અનેક શિષ્યો. તેણે એક દિવસે શિષ્યોને ઉપદેશ આપ્યો કે સર્વભૂતમાં નારાયણ છે, એમ જાણીને સૌને નમસ્કાર કરવા. એક દિવસ એક શિષ્ય હોમ માટે લાકડાં વીણવા જંગલમાં ગયો. એ લાકડાં વીણતો હતો એટલામાં બૂમ સંભળાઈ કે ‘જે કોઈ રસ્તામાં હો તે નાસી જજો, એક ગાંડો હાથી આવે છે!' આજુબાજુમાંથી બધા નાસી ગયા, પણ શિષ્ય નહીં! તેણે વિચાર્યું કે હાથી પણ નારાયણ છે, તો પછી નાસવું શા માટે? એમ વિચારીને તે ઊભો રહ્યો; અને નમસ્કાર વગેરે કરીને સ્તુતિ કરવા લાગ્યો. આ બાજુ મહાવત ઉપરથી બૂમો પાડી રહ્યો. છે કે ‘ભાગી જાઓ, ભાગી જાઓ!' તોય શિષ્ય હક્યો નહિ. છેવટે હાથી તેને સૂંઢમાં પકડી એક બાજુ ફેંકી દઈને ચાલ્યો ગયો. શિષ્ય લોહીલુહાણ અને બેભાન થઈને પડ્યો. રહ્યો.

આ ખબર આશ્રમમાં પહોંચતાં ગુરુ અને શિષ્યો તેને ઉપાડીને આશ્રમમાં લઈ આવ્યા, અને સારવાર કરવા લાગ્યા. થોડીવારે તેને ભાન આવ્યું ત્યારે કોઈએ તેને પૂછ્યું: 'હાથી આવે છે તે સાંભળવા છતાં તમે નાસી ગયા નહિ?' તે બોલ્યો, 'ગુરુદેવે કહ્યું છે કે નારાયણ જ માણસ, જીવ, જંતુ, બધું થઈ રહેલા છે. એટલે હાથી-નારાયણને આવતા દેખીને હું ત્યાંથી ખસ્યો નહિ.' ત્યારે ગુરુએ કહ્યું, 'બાપુ, હાથી-નારાયણ આવતા હતા એ ખરું, એ સત્ય; પણ મહાવત-નારાયણે તો નાસી જવાનું કહ્યું હતું ને? જો બધાંય નારાયણ છે તો પછી તેનું કહેવું કેમ સાંભળ્યું નહિ? મહાવત-નારાયણનું પણ સાંભળવું જોઈએ ને?' (સૌનું હાસ્ય)

‘શાસ્ત્રમાં કહે છે આપો નારાયણ; જળ નારાયણનું સ્વરૂપ છે! પરંતુ કોઈક જળ ભગવાનની પૂજામાં ચાલે; તો કોઈક જળથી હાથ-મોં ધોવાનું, વાસણ માંજવાનું, કપડાં ધોવાનું માત્ર ચાલે, પણ પીવામાં અથવા ઠાકોરજીની સેવામાં ન ચાલે. તેમ સાધુ, અસાધુ, ભક્ત અને અભક્ત - સૌના અંતરમાં નારાયણ છે, પણ અસાધુ, અભક્ત, દુષ્ટ માણસની સાથે વ્યવહાર રાખવો ચાલે નહિ. હળવું મળવું ચાલે નહિ. કોઈકની સાથે કેવળ મોઢાની વાતચીતનો જ વ્યવહાર પરવડે; તો વળી કોઈકની સાથે એ પણ ચાલે નહિ. એવા માણસથી દૂર રહેવું જોઈએ.'

~ શ્રીરામકૃષ્ણ કથામૃતમાંથી

Let's Build Peter Pt. 1

Welcome!

In this article series, we are going to build a project management system (or an issue tracking system) called Peter. The tech stack we will use includes Express for the back end and React for the front end. Along the way, we will also use GraphQL. The database will be PostgreSQL.

Please install the following software before we proceed:

1. Node v24+
2. npm v11+
3. PostgreSQL 17+
4. Insomnia (or any API client)
5. VS Code (or any text-editor)
6.  Terminal (I guess you already have one!)

Take your time to install this software. Once you're ready, head over to the next article.

The Great Man

Although, this quote is from The Will to Power, I copied it from cat-v.org website.

‘The Great Man … is colder, harder, less hesitating, and without respect and without the fear of “opinion”; he lacks the virtues that accompany respect and “respectability”, and altogether everything that is the “virtue of the herd”. If he cannot lead, he goes alone. … He knows he is incommunicable: he finds it tasteless to be familiar. … When not speaking to himself, he wears a mask. There is a solitude within him that is inaccessible to praise or blame.’

– Friedrich Nietzsche, The Will to Power

નાક વાટે શ્વાસ લેવો

મનુષ્યની છાતીમાં જે ફેફસાં છે તેનું રક્ષણ કરનારાં નાકા કે નાકનાં બે છિદ્રો છે. હવાને ખેંચીને તેને શુદ્ધ કરીને તે ફેફસાંને પુરી પાડવી એ નાકનું કર્તવ્ય છે. હવામાં જે કાંઈ ધૂળ કે અનિષ્ટ રજકણો હોય તે નાકની અંદરના વાળમાં ભરાઈ રહે છે અને તે ઉપરાંત નાકની ઉષ્ણતા વડે હવા સ્વચ્છ થાય છે અને પછી જ તે ફેફસાંસુધી પહોંચે છે. ગંદી હવામાં કે દુર્ગંધવાળે સ્થળે માણસ જઈ ચડે છે, ત્યારે નાક પોતાની ગંધનિરીક્ષક શક્તિથી માણસને ખબર આપે છે કે અહીં ફેફસાંને ચોખ્ખી હવા પૂરી પાડવાનું કામ કરવું મારે માટે મુશ્કેલ છે...નાક એ એક કોમળ ઇંદ્રિય છે. કેટલાકો મ્હોંવાટે શ્વાસ લે છે પરન્તુ તે નુકસાનકારક છે. કારણકે નાકદ્વારા જે હવાશુદ્ધિ થાય છે તે મ્હોંદ્વારા થતી નથી. વળી નાકનો માર્ગ ફેફસાંસુધી પહોંચવા માટે લાંબો છે એટલે હવાને વધારે ઉષ્ણતા મળે છે અને એ રીતે હવાશુદ્ધિ વિશેષ થાય છે.