PC Parts List

An application for first-time PC builders to plan out their builds - modeled after PCPartPicker and made entirely in Node.js with the Pug template engine.

Device mockup of PC Parts List

PC Parts List is a full-stack application built entirely in Node.js and is based on PCPartPicker. The goal of the application is to provide the user with a way of planning out their PC builds without the need to create an account and show them off to other users.

Features

PC Parts List aims to provide users the ability to:

  1. Create PC build lists (with a thumbnail) without having the need to create an account.
  2. Update or delete PC builds they have posted (by using the save password provided when creating a build).
  3. Add manufacturers and products to our database.

Planning and Implementation

The base of this application will start from the template generated with express-generator, with the templating engine being Pug instead of EJS. MongoDB was used to store the textual data while Multer was used for storing images locally.

One of the key challenges I faced when creating this application was how I could save client-side data in "memory". The key feature of the application is allowing users to create builds. The problem is that we do not have any web APIS (ie: localStorage) to keep track of the components the user selects. The solution ended up being to use cookies for storing local data. To keep track of the data stored in the cookies, I created custom functions to add and parse data in the cookies.

Image upload is a key feature that allows the user to display their builds for others to see. Luckily, the Multer documentation provided a guide on how we could accomplish this:

const { v4: uuidv4 } = require("uuid");
// Multer Logic
const multer = require("multer");
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "./public/data/uploads");
},
filename: (req, file, cb) => {
cb(null, `${uuidv4()}.${file.mimetype.split("/")[1]}`);
},
});

exports.upload = multer({ storage: storage });

However, the images will vary in size and that is bad from a practical sense as storage costs money. To solve this, I decided to compress the image and change the file format to .webp in order to save space. The code will end up becoming:

// Multer Logic
const multer = require("multer");
// Save file data into buffer instead of creating it (for efficiency)
exports.upload = multer({ storage: multer.memoryStorage() });

This only keeps the image in a buffer instead of instantly saving it. To save the image, we need to run some additional functions on that image buffer to convert it to .webp and then save it to our drive.

One last thing that I have added to this application was some PWA ("Progressive Web Apps") features such as offline support. One of the ways we can implement PWA support is to use Workbox. Implementing offline support requires creating service workers and having them cache pages and images in our browser.