ArchitectureQuote

Logo

ArchitectureQuote is a project I am most proud of, and the most advanced undertaking I have ever worked on. I dedicated countless hours and a lot of effort to it over the span of 2.5 years since I joined it.

ArchitectureQuote is startup based in Copenhagen that I founded together with a bunch of friends back in the end of 2018. Its product is a deal-flow and collaboration platform designed for architects.

ArchitectureQuote’s platform aims to help architects with finding projects by gathering leads from many different sources that are publicly available. The leads are categorized based on their type. The different types of projects that are listed on the platform include tenders (which are projects issued by governments), competitions, freelance projects (from sites like Guru, Upwork, and PeoplePerHour), and finally organic leads coming from the ArchitectureQuote’s website.

From another perspective, ArchitectureQuote aims to make it easier for people who need architectural services to find the right architects. By visiting the company’s website and filling a short form about their project, they can get a rough estimate of the cost of its design and construction. Later they can add their project on the platform and find an architect suitable for realizing it.

If you’d like to learn more or try out the platform, head to architecturequote.com.

Story

I joined the company at the very beginning of it, in September 2018. I was invited by my friends to work on it together, at the time just for the sake of the final project that we had at the end of AP degree education. However, I decided to stay because I really liked the idea and believed that it has a chance to succeed. Moreover, I was always dreaming of having my own company.

All of us had regular daily jobs and some of us have been also in education, so the time we could spend on our startup was limited. We were only working on it in our free time, meeting on the weekends for a few hours. We were consistently developing the platform but the progress was plodding.

Everything changed in January 2020. We managed to earn some money with a side company providing marketing services. It was enough to pay a small salary to one of us for a longer time. I decided I am ready for it, so I left my job as a web developer, to focus solely on ArchitectureQuote. January was also the month when I and the other student founders started an internship at our startup. Moreover, we also had some additional intern developers. Everyone was working very hard during this period. As a result, in the span of 10 weeks, we managed to get more work done than in the whole year before that. And at the end of April, we finally launched the minimum viable product (MVP) version of the platform.

I continued working on it throughout 2020. A lot has changed that year. Some founders left, we moved to a different office space, got some employees. In terms of development, we remade the whole infrastructure of the platform using various AWS services and enforced DevOps practices, creating CI/CD pipelines. A lot of new features where added, sorting and filtering of leads, welcoming tour, daily or weekly leads email, companies catalogue and portfolios. Existing features where polished as well, providing more information, better user experience, and eliminating various bugs.

Preview

Below are some screenshots of the front-end of the platform.

Dashboard

Main dashboard providing overview of the latest architectural projects

Tenders

A list of tenders with filters

Tender details

Tender details

Freelance projects

Freelance projects page

Competitions

Competitions page

Competition details

Competition details

Companies

Companies catalogue

Company profile

Company profile

Company project details

Company project details

Company profile edit form

Company profile edit form

User preferences

User preferences

System architecture

ArchitectureQuote’s platform is built as microservices, a modern software architecture style. It consists of many components with specific roles.

ArchitectureQuote’s system follows the microservice architectural style. It is an approach to development that is based on building an application as a set of small services, which run independently and communicate via lightweight protocols like HTTP.

The components of the system are self-contained and can be easily replaced, as long as the replacement implements the same API that is used by other services. This and usage of technology-agnostic protocols for intercommunication allows them to be built in different languages and frameworks. It also makes the system more reliable because the failure of one component would not necessarily make the rest fail as well.

System architecture diagram

System architecture diagram

The core of the ArchitectureQuote’s software product is made of these four crucial components that work together to provide value for the users:

Back-end - Node.js REST API

This is where most of the logic in the system happens. The back-end handles all requests of the users. The code is written in JavaScript and executed on the server with Node.js. It is directly connected to the MongoDB database and performs various operations on the data inside it.

It allows architects to retrieve tenders, competitions, and freelance projects from the database. It also lets them specify search filters, by setting parameters for keywords, project types, start and end dates, etc.

Clients who are looking for architectural services can add their project, give details about it, upload designs and documents, get a price estimate, and later also edit their project.

It also handles sign-ups, log-ins, changing of user information, updating the password, deleting the account, sending emails with cost estimate upon registration, and other automated messages. Files uploaded by users are sent to the Amazon S3 bucket and served from there.

Every request and response is sent in JSON format which is very easy to use and parse with JavaScript. There are protected routes that require the users to send an access token as a JSON Web Token in the Authorization HTTP header. Users receive the access token when logging in, along with a refresh token. An access token is valid for 15 minutes, after which, they need to request a new one with the refresh token, which is valid for one week.

Front-end - React web application

Front-end is a single-page web application that consumes the REST API and provides a friendly interface to the users. It allows them to use all the functionality of the platform just by opening its address in the browser, without having to install anything.

The web application is written mainly in JavaScript and SCSS. It is using React library for building user interfaces and some React modules for DOM manipulation, routing, internalization, and other tasks. The state management within the global scope of the application, i.e. saving user actions and changing the behavior of the app based on them, is done with Redux. It is mainly used for keeping the user profile and authentication tokens.

The layout of the application is based on the Bootstrap and Material UI frameworks, which have predefined elements like grids, buttons, and modals. The style of these components is defined in the Metronic theme used by the application.

Under the hood, when the user performs some actions, HTTP requests are made to the back-end with the access token. The response is raw data in JSON format that is then parsed and rendered in React components.

Scrapers - Node.js program

A program that automatically gathers tenders, freelance projects, and competitions from across 14 different websites where the data is publicly available. Later, they are displayed to architects on ArchitectureQuote’s platform.

There is a separate scraper for each of the websites. Depending on the source, it either uses an API exposed by it, gets and parses HTML documents with Cheerio, or downloads an archive with the data.

Then, it cleans up the raw information, creates new features, and normalizes all properties. It also downloads the featured competition images and uploads them to our AWS S3 bucket, so that they can be served from there. Lastly, it checks if there are any duplicates, and inserts unique leads into the database.

Outbound integration - Node.js utility

A program for synchronization of data between the database and AWS Pinpoint service that is used for sending the daily or weekly leads email.

Every day, it updates the audience by adding new users to it, updating preferences and emails of existing users, and removing ones that no longer exist in the database. It also updates the template of the email to be sent by populating it with the latest tenders, competitions, and freelance projects.

Database - MongoDB

We are using a MongoDB database to hold all the data that we have: scraped leads, client projects, and users.

As a document-oriented database, it is schema-less and thus allows us to insert data with very varied fields. For example, the competitions that we scrape have a few properties that are always there, like title, deadline, and description. There can be at least 9 other fields though that appear occasionally depending on the source. It would be tiresome to update the schema to match the data every time a new website is added.

In the projects that are connected to the database, i.e. back-end and scrapers, we are using the official MongoDB driver for Node.js and Mongoose which help us easily query and operate on the data.

There a few other components which are also essential parts of the system but do not make up the platform:

Website

The ArchitectureQuote website is a place where visitors can read about the company and its product. It also allows them to sign up for access to the platform and ask for a free cost estimate of their project. These requests are made to the back-end where they get processed and return a response. There is also a page where 20 latest scraped competitions are displayed and a catalogue of companies. The website is based on WordPress.

Analytics

A simple web application for displaying the contents of the database and visualizing it on charts. It has search functionality, filtering, specifying time range, and exporting to various formats. It is meant for internal use by less technical people. It is built with Node.js and Express.