Developing a Portfolio website using MERN stack (Portfolio for a full-stack developer) — Arunabharjun.com

Are you a full stack developer & planning to develop your portfolio website?

(Develop a web application complete with backend and frontend with SSR / Develop a full-stack web application / Develop a MERN stack website)

arunabharjun.com
arunabharjun.com
www.arunabharjun.com

What is ArunabhArjun.com?

It is my new portfolio website. I developed it using MERN stack along with Next.js. This project is complete with an admin dashboard to manage the website. Like I already said, I had one earlier, which I made four years ago, from the day this blog is posted. Back then, I only used to do frontend development. Since then, I have picked up full-stack development and I realised that arunabharjun.com needed a revamp. Also, one very important thing that I had in mind while planning to develop this is that this time, I needed a Content Management System (CSM) styled website. So, instead of a revamp, I ended up developing a whole new full-stack application.

  • Mongo DB with Mongoose

Why have an admin dashboard?

Generally, portfolios are static websites, which can fall under a lot of categories, like one explaining why the person should be hired with all their work till that time showcased, or can be a story like or a timeline like depiction of work experience with projects to showcase, etc. And to be frank, I believe there is no right or wrong way. Only the most important thing according to me is that whatever way one chooses to go, the result should reflect that individual well.

The Backend

In the backend part, I used Mongo DB for the database and Node.js & Express.js with Mongoose.js to implement the APIs, which is why it is a MERN stack project. The reason is very similar to what I said in my earlier blog — Blogaroo — Developing a blogging platform using MERN stack. This whole stack is heavily dependent on JavaScript. And having to write code in the same environment for about most of the project makes the whole development process much easier. So, now with that out of the way, what we need next is database modals. Following are the exact database models I implemented.

  • Projects have their images, description, tools used, project link and another link to add anything if required other than the project link
  • They all have some meta properties, like the project is featured project or not, a sort order value according to which the projects will be sorted
  • These tools get referenced in the PROJECT modal

Why the unconventional approach?

Now the thing to understand here is that I already had an older version of my portfolio, so I already kind of had an idea what all elements I was going to have in the website. Also, this project was not like other consumer products where there was a through a need to pre conceptualize the whole product with UI mock-ups, etc. And the reason why I wanted to approach the project like this is again what I said earlier, that a portfolio website should reflect the one, whose it is, well. And I thought it was for the best that I wing it and let the UI/UX take shape as I approach it when I do. This way the UX stays very original and honest to what I am. And since I was developing the backend and frontend simultaneously, I thought it would leave me with a good window to slide my creative freedom in. And while talking about the front end, let’s discuss it in more detail, shall we?

The Frontend

Like I have already mentioned earlier, this is a MERN stack project, and along with that, I used Next.js as the frontend framework. And again, the reason is very similar to what I said in my earlier blog — Blogaroo — Developing a blogging platform using MERN stack. Although at first, I thought I would simply use React.js without Next.js, then who was I kidding, Next.js simply brings so much to the table along with the awesomeness that is React.js, Next.js was the way to go. Like I said earlier, this was the part where I just went with the flow while developing. I believe that this is the reason I was able to express a lot about myself through the website UI design, and frankly, I was quite happy with the outcome. While I believe there are so many places where things could improve, and I am going to work on them and keep updating the UI & UX. I also included a bunch of static content in the website along with static assets, and let me explain why.

{
// other stuff

"dependencies": {
"@sendgrid/mail": "^7.2.0",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-jwt": "^5.3.3",
"express-validator": "^6.4.1",
"formidable": "^1.2.2",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"mongoose": "^5.9.12",
"morgan": "^1.10.0",
"shortid": "^2.2.15",
"slugify": "^1.4.0",
"string-strip-html": "^4.4.2",
"validator": "^13.0.0"
}
}
{
// other stuff
"dependencies": {
"@material-ui/core": "^4.10.2",
"@material-ui/lab": "^4.0.0-alpha.56",
"babel-plugin-transform-remove-console": "^6.9.4",
"browser-image-compression": "^1.0.12",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"moment": "^2.26.0",
"next": "9.4.4",
"next-cookies": "^2.0.3",
"react": "16.13.1",
"react-device-detect": "^1.13.1",
"react-dom": "16.13.1",
"react-github-calendar": "^1.0.6",
"react-pdf": "^4.1.0",
"react-sidebar": "^3.0.2",
"react-tooltip": "^4.2.7",
"react-web-share": "^1.0.7",
"smoothscroll-anchor-polyfill": "^1.3.2",
"smoothscroll-polyfill": "^0.4.4"
}
}

A product manager and a skilled full-stack developer. Know more @ www.arunabharjun.com