Portfolio Site with Node JS & Express

Turbo 360

Since its introduction in 2009, Node JS has taken the web development world by storm. With a JavaScript based runtime, Node has made it possible to develop both the front end and backend using one primary language. Express JS is the industry preferred web framework for Node development and in this tutorial, we create a polished portfolio website using both Node and Express. As we create the site, we explore the key parts of a professional Node/Express website and how each piece works together. We also leverage a local persistent data storage system so our site can store data, upload images, and more. Throughout this tutorial, we cover:

  • Project Structure
  • Templating Engine
  • Request Routing
  • CRUD operations
  • File uploading
  • CMS for blogs and projects
  • AJAX with jQuery

This series is perfect for those looking to break into professional web development as a full stack developer. If you have been studying on your own for a few months by going through tutorials on Udemy, YouTube and more, this series ties together concept from several beginner areas (such as jQuery) to create a beautiful, professional portfolio site. And when you're done - you will have a portfolio!

Setup and Deploy

To begin, we install the necessary tools and libraries such as Node JS and the Turbo CLI. We then select a project base from the Turbo 360 code templates and download it to our local environment. From there, make sure the code runs locally and explore the package.json file. Next we create a staging environment on our Turbo account and deploy our source code to ensure everything works the same on a live server as it does on our local machine. We are now ready to begin our portfolio site!

Request Routing

Now that our project is set up locally and on the staging server, we explore the routing in Node/Express sites. Routes handle HTTP requests and generate responses based on the details of those requests. In this video, we set up a test route and render a view template using the Mustache templating engine. We then add small bit of dynamic data to the template to show how the rendering engine works. Finally, we deploy the site to our staging environment to ensure it works on staging just as it does on our local machine.

Templating Engine

In video 3, we do a deeper dive into the Mustache templating engine and explore how it enables us to render data dynamically across a variety of situations. We render blocks of html using "partials" as well as render a profile image and an array of objects.

Page Configuration

In order to make our code more modular, organized and reusable, we separate the page configuration data into individual JSON files for each page. This is made possible through a Turbo feature which automatically matches templates with their corresponding JSON file of the same name during the render process. We then explore the "global" configuration file which applies to all pages. This file is fed to all templates on render which makes our data organization much cleaner and well organized. Finally, we update the staging server with our configuration files and confirm that it looks the same on deployment as it does on localhost.

New Home Page

We start customizing the site by creating a new home page with corresponding route and importing a collection of UI blocks provided by the Turbo template. We then go through the UI blocks and select which ones we will use for the portfolio landing page which includes a hero section, project gallery, services section, blog and contact form. We remove the unneeded blocks and reorganize the home page with our desired configuration. Finally, we update the home JSON file with the contents imported from the UI blocks and redeploy our site to make sure it looks the same on staging as it does on local.

Database, Model-View-Controller

Now that the basic UI is set up for our home page, we explore the database layer of our site in order to work with dynamic data such as projects, blog posts and such. Turbo sites are equipped with a local database architecture which closely follow the Mongo Database APIs - a non relational document based storage platform. We show how the models and schemas work in this architecture and then explore the Model-View-Controller paradigm which drives much of modern web development today. Then we query the database to fetch projects for our home page to render which is covered in the next video.

Rendering Projects

In part 6, we fetched the projects from the database but we did not render them. In this video, we pass the projects array returned from the database the the context "data" object which is then fed to the template. Now that the template has access to the projects in the array, we can render them using the Mustache templating array iteration syntax covered in video 3.

Content Management System

Updating our data is easily done through the built-in content management system provided by Turbo. In this video, we explore the CMS by removing the default projects that come with the template and adding our own instead. We then explore the connection between the CMS and our codebase in order to sync our project data with the CMS data. We then deploy the changes and make sure the results look the same on staging.

Project Page

Now that we have our own projects showing up on the home page, we create an individual page to show each project in greater detail. To do so, we create a new route and use the req.params object provided by Node/Express in order to identify which project in particular to render. We then fetch that project using the ProjectController following the MVC principles. We also consider possible error scenarios such as typos. Finally, we render the specified project on a dedicated project page and deploy to our staging server.

Contact Form

In order for a portfolio site to be effective, there should be a way for visitors to contact you. In this video, we set that up on the landing page and fill out the page a bit more with a services section.

Submit Contact Form

In the final video, we submit the contact form data to our server via AJAX request using jQuery. The data is then received by a REST API which passes it the to data controller under the Model-View-Controller paradigm. We then create a separate Javascript file for the landing page login and deploy it to the built-in Content Delivery Network which is provided by Turbo for free.

Join Free

Join for free today and deploy your site in seconds

Already have an account? Sign in HERE