Project Objective:
Create a fully dynamic Node.js website with an admin dashboard where you can:
✅ Add/edit/delete Portfolio items
✅ Add/edit/delete Services with pricing
✅ Control meta tags for SEO per page
✅ Integrate Google Analytics
✅ Manage robots.txt and sitemap.xml
✅ Submit to Google Search Console (Webmaster Tool)
Tech Stack:
• Node.js (Backend)
• Express.js (Framework)
• MongoDB (Atlas) (Database)
• EJS / Pug / Handlebars (for server-side rendering) OR React (for frontend)
• Mongoose (DB ORM)
• Passport.js / JWT (Authentication)
• Multer / Cloudinary (Image uploads)
• Google Analytics, Search Console, robots.txt, sitemap.xml
Folder Structure Example:
/project-folder
/public
/css
/images
/js
/routes
admin.js
website.js
/controllers
adminController.js
websiteController.js
/models
service.js
portfolio.js
seo.js
/views
/admin
dashboard.ejs
manage-services.ejs
manage-portfolio.ejs
seo-settings.ejs
/website
index.ejs
services.ejs
portfolio.ejs
/config
db.js
app.js
package.json
sitemap.xml
robots.txt
Step-by-Step Development Guide:
✅ 1⃣ Project Setup
• Install Node.js, Express, Mongoose
• Setup MongoDB Atlas connection
• Install required packages:
pgsql
npm install express mongoose ejs multer cloudinary express-session passport jsonwebtoken
body-parser
✅ 2⃣ Create Models
• services.js
• portfolio.js
• seo.js
Each with elds like title, description, imageURL, price, metaTitle, metaDescription, etc.
fi
✅ 3⃣ Create Admin Dashboard
• Login authentication using Passport.js
• Admin routes for:
◦ Add/Edit/Delete Portfolio
◦ Add/Edit/Delete Services
◦ Update SEO meta tags for each page (store in DB)
◦ Update Pricing Pages
✅ 4⃣ Google Analytics Integration
• Create a Google Analytics property
• Get tracking code
• Embed it inside your views/partials/header.ejs:
html
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
• <script>
• window.dataLayer = window.dataLayer || [];
• function gtag(){dataLayer.push(arguments);}
• gtag('js', new Date());
• gtag('config', 'G-XXXXXXX');
• </script>
•
✅ 5⃣ Generate Sitemap.xml
• Create a sitemap.xml le dynamically via a route
Example: /routes/sitemap.js
• Use package:
nginx
npm install sitemap
✅ 6⃣ Create robots.txt
• Create a robots.txt in the root folder:
makefile
fi
User-agent: *
• Disallow:
• Sitemap: https://yourwebsite.com/sitemap.xml
•
✅ 7⃣ Submit to Google Webmaster Tools (Search Console)
• Verify your website via HTML meta tag or le upload
• Submit your sitemap.xml
• Track URL indexing and analytics reports
✅ 8⃣ SEO Module in Admin Panel
• Input elds for:
◦ Page Title
◦ Meta Description
◦ Meta Keywords
• Save in SEO collection in MongoDB
• Fetch dynamically in website pages
Example:
fi
fi
html
<title><%= seoData.title %></title>
<meta name="description" content="<%= seoData.description %>">
Bonus Features:
• Image optimization before upload via Sharp / Cloudinary
• Social media preview meta tags (OpenGraph)
• Blog management (optional)
• Contact form with email noti cation (using Nodemailer)
Deployment:
• Host on DigitalOcean, Vercel, or Render.com
• Use PM2 for production server management
• Enable HTTPS via Let’s Encrypt
fi
