What will we need
- NodeJS and NPM installed
- Express and EJS
- Your Social Media Accounts
Setting up Project
First create a folder named all_in_one_social_media and initialize node project there with npm init. Now open this folder and install express and ejs module with npm i express ejs.
Open Visual Studio Code and Let’s create index.js file and create views and public directory.
publicDirectory will hold your /assets files likecssandjsfiles that are required by your html fileviewsdirectory will hold your ejs files you want to render on your server.
Open up the package.json file and create two scripts.
{
"name": "social_media_all_in_one",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node .",
"dev": "nodemon ."
},
"keywords": [],
"author": "Naman Baranwal",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.6",
"express": "^4.17.1"
}
}
Creating a Server
Open up the index.js file in your code editor or IDE and type the following code.
const express = require('express');
const app = express();
const fs = require('fs');
const PORT = process.env.PORT || 3000;
app.set('view engine', 'ejs');
app.use(express./assets('public'));
app.get('*', (req, res) => {
return res.status(404).send("<h1>404 Page not Found!</h1>");
});
app.listen(PORT, () => {
console.log(`Server is listening on http://localhost:${PORT}/`);
});
If you did everything correctly. Open up the powershell or Terminal in your project and type npm run dev. Now open the browser and paste this in the URL. http://localhost:3000.
Creating Views
Open the views directory and create file named index.ejs. This will contain all the Front End for your website. Type the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Media</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<div class="container">
<div class="avatar">
</div>
<div class="name"></div>
<div class="links">
</div>
</div>
</body>
</html>
Now open up the public directory and create file named styles.css and Type the Following code.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&display=swap");
body {
margin: 0;
padding: 0;
background: radial-gradient(rgb(0, 174, 255), cyan);
font-family: "Montserrat", sans-serif;
user-select: none;
height: 100%;
}
.container {
width: 40%;
margin: 5% auto;
display: grid;
place-items: center;
background: white;
border-radius: 15px;
padding: 2%;
}
.avatar img {
height: 150px;
width: 150px;
border-radius: 50%;
border: 5px rgb(172, 172, 172) solid;
}
.name {
font-weight: 900;
font-size: 45px;
color: rgb(99, 99, 99);
margin-bottom: 5%;
}
.links {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.links .link{
width: 50%;
height: 50px;
background: white;
color: rgb(71, 71, 71);
border-radius: 15px;
margin: 15px;
display: grid;
place-items: center;
border: 1px solid black;
transition-duration: 0.2s;
cursor: pointer;
text-decoration: none;
}
.link:hover{
background: blue;
color: white;
border: 1px solid blue;
}
@media screen and (max-width: 768px) {
.container{
width: 75%;
}
}
Building Links for users
Let’s open the index.js once again and Create two routes. / and /:username Like below.
const express = require('express');
const app = express();
const fs = require('fs');
const PORT = process.env.PORT || 3000;
app.set('view engine', 'ejs');
app.use(express./assets('public'));
app.get('/', (req, res) => {
let users = fs.readFileSync('./users.json').toString('utf-8');
users = JSON.parse(users);
return res.render('index', {
"user": users["prgmaz"],
});
});
app.get('/:username', (req, res) => {
let users = fs.readFileSync('./users.json').toString('utf-8');
users = JSON.parse(users);
return res.render('index', {
"user": users[req.params.username],
});
});
app.get('*', (req, res) => {
return res.status(404).send("<h1>404 Page not Found!</h1>");
});
app.listen(PORT, () => {
console.log(`Server is listening on http://localhost:${PORT}/`);
});
Now open the index.ejs and Display the user, you passed to your views.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Media</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<div class="container">
<div class="avatar">
<img src="<%= user.avatar %>" alt="Avatar">
</div>
<div class="name"><%= user.name %></div>
<div class="links">
<% Object.keys(user.links).forEach((key) => { %>
<a class="link" target="_blank" href="<%= user.links[key] %>">
<%= key %>
</a>
<% }) %>
</div>
</div>
</body>
</html>
Your Project is finished.
