<span class="text-[2.4rem] uppercase tracking-[4px] sm:text-[3rem] lg:text-[3.7rem] xl:text-[4rem] "> Ari Mercado

Junior's Construction Inc

Junior's Construction Inc is a commercial and residential construction company based in Los Angeles, California. I'm collaborating with the company for feature requirements and updates.

Tech Stack:

Sass and CSS modules

Sass combined with CSS modules is used instead of regular CSS. CSS modules help prevent class name collisions and unintended side effects by scoping CSS at the component level.

Gatsby

Gatsby, a reactive site generator based on React and GraphQL, helps the site load quickly to enhance a user's experience. The site leverages helpful Gatsby plugins such as SEO, image optimization for performance, and CMS support for Contentful.

GraphQl

GraphQL is a the query language that Gatsby uses as their data layer. On this website, the main projects page queries for all project images from Contentful. Then, upon user selection, each project page queries for images that pertain to that project. Queries are performed for the site's blog and services pages as well.

Contentful

A requirement is that the administrator can add blog posts and projects with their respective images using a system(CMS). I chose a headless Contentful CMS because it integrates seamlessly with Gatsby's GraphQL data layer.

IMG: CREATING A REUSABLE BUTTON WITH STORYBOOK
IMG: THE KANBAN BOARD
IMG: CREATING A REUSABLE BUTTON WITH STORYBOOK
IMG: THE KANBAN BOARD

1 of 2

ProLog

ProLog is an error logging and monitoring tool. As part of the React Job Simulator program, the ProLog codebase offered the opportunity to work in a professional dev environment by fixing bugs and implementing new features based on Kanban tasks and Figma designs.

Tech Stack:

NextJS and TypeScript

We use NextJS and TypeScript(TS) for the entire app. NextJS features like Static Site Generation(SSG), Image Optimization, and prefetching to make the app very fast for the user. For example, the landing page uses SSG to pre-render all the data from a custom CMS in order to quickly serve the page's content. Soon after, the header prefetches the data for the dashboard so when a user visits the dashboard to view their projects, all the data is already cached and the transition is fast as instant.

Styled-Components

Styled-Components(SC) was the main styling implementation. This was ideal for us because the app has a custom styled-system with a collection of utility functions that are ubiquitously used for a consistent, brand-oriented styling solution. Another benefit of using SC's was how practical is it to do conditional styling. This was important as we have a collection of highly reusable and customizable UI components(e.g. buttons, badges, form elements).

Cypress Testing

We used Cypress to test out most features. Personally I had not used Cypress before this project but I really enjoyed working with it. We did have some issues with 'flaky' tests but overall it wasn't too complex to test with Cypress.

React Query

We implemented data fetching with the help of React Query. Most of the data fetching functionality was already built before I worked on this project, but one of the more challenging tasks was to create filters to sort out issues based on users' input. On top of that, the filters had to be added to the URL as query parameters. This feature took a while for me to think through and figure how to implement all this and use React Query to fetch the filtered issues. On a separate note, I got to see first hand how much faster the app was when prefetching issues with RQ; before clicking the 'Next' button, the data is already prefetched and the 'Previous' data is cached!

Figma

Most tasks included Figma design files. I didn't use Figma to create my own designs. I did, however, use Figma to export components and images; gathered measurements and colors; and used a chrome extension called 'Pixel Perfect' to transform the designs into highly accurate, functional product features.

StoryBook

We used storybook to test out the reusable UI components. Storybook was very helpful because some of these UI components have many different states such as size, color, icon, icon location, error state, error message, selected, focused, disabled, and more. Storybook made it so much simpler to test all these UI components in their own environment.

USER FILLS OUT TAXI FORM
USER RECEIVES AN ESTIMATE
USER FILLS OUT TAXI FORM
USER RECEIVES AN ESTIMATE

1 of 2

Coastal Yellow Cabs

Coastal Yellow Cab enables customers to book a taxi and receive an instant estimate that is calculated by the distance and the rate of the cab requested. The main purpose of this project is to practice using various technologies and techniques that I come across.

Tech Stack:

TomTom Map API

The TomTom Map API and autocomplete was integrated as an alternative to the Google Maps API. A user is able to select a starting point and a destination on a map with the convenience of auto-completion. Based on the distance between the starting point and destination, a user is instantly given a taxi rate. In addition to getting a rate, the user is able to book the taxi by providing a few more details including the desired time and date of the booking.

NextJS & TypeScript

React hooks are used mainly for local component UI state management. On the other hand, Redux is mostly used for business logic. Components and redux are written in TypeScript

Redux

As the app grew more complex, Redux with TypeScript was introduced to easily share state and track state changes among various components that would otherwise be tricky without deep prop drilling. The three main redux modules are trips, book, and auth; they're colocated in their respective feature folders. These redux modules manage global state that involves user & admin authentication, the main map, the booking form, the admin panel, and asynchronous API requests with Redux Thunks. If you're interested in reading more about how redux is used then click on 'Source Code', where I explain in depth on how redux is implemented

Authentication

The admin is able to login in and view every trip submitted by users. In the admin dashboard, the admin is authorized to change the status of any trip to 'confirm', 'complete', or 'archive'. The admin can also delete any trip. On the other hand, users may only register and/or login in to view their own trips and their statuses

Node & Express

Node and Express are used to create, read, update, and delete(CRUD) trips by leveraging an SQLite database. The database consists of two tables: trips and users. An admin can perform all CRUD operations on both tables. Users may only create trips against the trips table by booking a taxi.

IMG: MOBILE VIEW
IMG: DESKTOP VIEW
IMG: TABLET VIEW
IMG: MOBILE VIEW
IMG: DESKTOP VIEW

1 of 3

Radio Talk Show

This is a client's website for a Spanish radio talk show that consists of dozens of podcast episodes. Currently, we are in the early stages of rebuilding most of the site with NextJS to include authentication, SEO, and over 40 hours of additional audio content.

Tech Stack:

React

This website is built with React Hooks. Considering this app isn't very complex at the moment, most state management is done in the App component; from there, properties(props) are passed down the component tree. Future directions for this app include a switch to Next.js with a state management solution such as Redux Tool Kit or Zustand.

SASS

Syntactically Awesome Stylesheets(SASS) is the styling implementation. The most used feature is nested media queries for a fully responsive website.

React Audio Player

React Audio Player is a wrapper for the browser's default audio player, which is accessed via the HTML5 audio tag. RAP allows the ability to interact with the player and listen to user-triggered events.

Netlify Large Media Storage

This website consists of dozens of large audio files, with many more to be added. Netlify Large Media prevents bloating the remote repository with large audio files. Instead, these audio files are uploaded directly to Netlify's media servers. Furthermore, Git only tracks versions with text pointer files instead of actual audio files. The advantages are faster local developments and faster builds.

MOBILE VIEW
Desktop View
Tablet View
MOBILE VIEW
Desktop View

1 of 3

CineView

CineView allows movie fans to rate movies, write reviews, watch trailers, make subscriptions and read reviews on thousands of movies. The app was created by five developers in a period of five weeks.