Building the frontend for the Endpoints project

Arnelle Balane
Feb 17, 2018 · 4 min read

We recently built a side-project with Emmanuel Lodovice and Aldrin Navarro named Endpoints, a Web application that allows you to generate a mock endpoint where you can send HTTP requests to, view a log of these requests, and set a customized HTTP response. You can check out the live application at endpoints.uncaughtexception.wtf or the source code at GitHub.

Endpoints allows you to see a log of request logs and set a response

This post gives an overview of how the application’s frontend was built and the different technologies that we used. If you’re interested in knowing how the backend was built, you can read Emmanuel Lodovice’s article about it:

JavaScript Framework

We used VueJS’ Single File Components (SFCs). These components define their templates, styles, and JavaScript behavior and other dependencies all in one file. This allows us to quickly update a component’s functionality since all the code related to it are all in one place. SFCs also gives us scoped styling among other things, which basically means that a component’s styles are not going to affect the styles of another components.

Routing

Vue-router also supports lazy-loading the components, which means that the components are only downloaded by the browser only when they are the ones that are going to be rendered. This is helpful for reducing our bundle size, allowing the browser to download them faster and rendering our app faster. We used this feature for the Vue components representing each page, which makes Vue download the code for that component only when its URL is visited.

State Management

Using a vuex store as our single source of truth for our application state makes it easier to synchronize data across different components, since we only need to read or modify it in one location. Additionally, all our code that interact with our backend are also placed inside the vuex store.

Web APIs

Fetch API

WebSockets

Build Tool

Webpack uses “loaders” to process modules, and there are different loaders for processing specific types of modules. In the case of the Endpoints app, here are the ones that we used:

Code Splitting

Production Build


So that’s the quick overview of how we built the frontend part of the Endpoints project. We tried to keep the setup and configurations as minimal as possible, and I think we did a decent job at doing that. You are welcome to dig deeper into the code in the GitHub repository.

Thanks for reading!

Uncaught Exception

Stories, experiences, and insights on technology and…

Arnelle Balane

Written by

Web Developer at ChannelFix.com, Co-organizer at Google Developers Group Cebu.

Uncaught Exception

Stories, experiences, and insights on technology and software engineering.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade