CASE STUDY // 02

PETROLIFE

A production-ready landing page with full authentication for an oil, gas, and street services company. Built with React, Express, and Firebase.

STATUS

LIVE / PRODUCTION

STACK

REACT + FIREBASE

METRIC

FULL AUTH SYSTEM

THE_BRIEF

> CHALLENGE: Petrolife required a robust digital entry point for industrial partners. The primary obstacle was creating a secure environment that maintained high-speed performance while handling sensitive user authentication across multiple service branches.

> GOAL: Develop a high-impact, single-page interface that bridges corporate credibility with modern web performance. Must include a seamless Firebase-backed authentication bridge and comprehensive legal documentation architecture.

STACK_BREAKDOWN
MODULE_01

REACT

FRONTEND / UI LIBRARY

MODULE_02

EXPRESS

SERVER / API LAYER

MODULE_03

FIREBASE

AUTH / DATABASE

MODULE_04

TAILWIND

UTILITY ENGINE

RESOURCES

JavaScript (ES6+)Git/GitHubPostman

ARCHITECTURE

UI
React SPA
API
Express Layer

DELIVERABLES

  • [X] Single-page landing
  • [X] Cross-bridge auth
  • [X] Form validation
Modern high-tech oil refinery silhouette at sunset with sharp industrial lines and high contrast lighting

INDUSTRIAL IDENTITY

Visualizing the core of Petrolife operations through high-impact imagery and structural typography.

AUTH_SERVICE.JS
const authenticateUser = async (credentials) => {// INITIALIZING FIREBASE PROVIDERtry {const res = await firebase.auth() .signInWithEmailAndPassword( credentials.email, credentials.password );return { status: 'SUCCESS', uid: res.user.uid };} catch (err) {throw new Error('AUTH_FAILED');}};

PRODUCTION METRICS

2PAGES DELIVERED
100%RESPONSIVE
NEXT PROJECT

TITAN ARRAY // V5.0