About

Note: This project has been taken offline as it was only live for demonstration purposes.

This project is a SvelteKit MongoDB WebApp that aggregates the latest popular PC parts and prices from popular Malaysian E-Commerce sites for users to configure and create their own PC parts lists. If you've heard of PCPartPicker, it's very similar to that though on a hobby scale.

Note: This is just one of multiple repositories that contribute to the PCPartsTool project. Here are all the related repositories:

Features

• Authentication
• Savings Parts Lists to Account
• Sharing Parts Lists through Unique URLs
• Learning Centre for PC Parts

Cloud Architecture

Installation

Prerequisites

There are some prerequisites before you can start working on this project:

1. Docker
2. Node and npm

Consult their official websites for advice on how to install them on your system.

Installation

This installation guide walks you through how to completely mimic my setup for development and deployment.

1. Fork this repo.

2. In your desired project folder, run the following command in your terminal:

   git clone https://github.com/yourUsername/PCPartsTool
   

3. Add a .env file to the root directory of your project. You may refer to .env.example. It's for the app to point to the desired database.

4. Ensure pnpm is installed globally on your dev system. If not, run the following command in your terminal:

   npm i -g pnpm
   

5. Finally, install all dependencies:

   pnpm i
   

Developing

Before you can develop, you'll need to get a Dockerized MongoDB instance running. Run the following command in your terminal:

sudo docker run -p 4600:27017 -v /your/database/path/here/:/data/db --name mongodb -d mongo

where the -v flag specifies the path of your MongoDB on your host system. Place the backup files here if you have one.

If you need data for MongoDB, use PCPartsTool-Scraper - refer to its README.

To start a development server:

pnpm dev

Testing

PCPartsTools uses Playwright as its E2E testing framework.

Tests are configured to run on port 4173, the port that pnpm preview uses.

To run tests:

pnpm test # you will need to have a preview server running

# run tests without having to start up a preview server
pnpm test:ci

# show test results
pnpm test-report

Building

To compile the app, run the following:

pnpm build

# you can preview the production build
pnpm preview

To create a Docker container, you may use the included Dockerfile:

sudo docker build -t PCPartsTool .

Deployment

Cloud Deployment

This section talks about deploying the Dockerised app to a domain using Jenkins CI/CD and Ansible.

Since my infrastructure has two servers (a build server and a web server), the included Jenkinsfile, Docker Compose files and Ansible Playbooks are catered towards that. As such, these instructions are catered towards my infrastructure.

If other repositories are mentioned, refer to their READMEs on how to set up and use them.

1. Provision AWS and Cloudflare resources using terraform-infra's .tf files.
2. Configure AWS EC2 servers using ansible-ec2's Playbooks.
3. Modify ansible/inventory's target web server to the IP address of your own web server.
4. Setup a GitHub Webhook on your forked repository to point to your Jenkins instance.
5. Add a new Jenkins Pipeline job and point it to your forked repo with the following enabled:
   • Do not allow concurrent builds
   • GITScm polling
   • Pipeline Script from SCM
   • Repository URL should be whatever your forked repository's URL is
   • Branches to build: */main
   • Additional Behaviours:
     • Polling ignores commits in certain paths: README.md in Excluded regions

If all was configured well, a new Docker Compose build should automatically be deployed from your CICD build server to your Web server after each push or merge to the main branch.

Local Deployment

This section details how to locally deploy the Docker Compose on your own dev machine.

1. First, you will need to Dockerize and create and image for the PCPartsTool-Scraper. Refer to its README for instructions.
2. Ensure the PCPartsTool-Scraper image is locally stored in your Docker Engine - you can verify with the docker images command.
3. Run the build command to compile the source code, as detailed in the Building section.
4. Run the following command in the root directory of this project:

   docker compose -f docker-compose.local.yml up -d --build
   

   What this command does is instruct docker compose to use the docker-compose.local.yml file and simultaneously build the PCPartsTool app before composing and starting the MongoDB container, PCPartsTool-Scraper and PCPartsTool web app itself.