grab/front-end-guide

★ 15,243JavaScriptAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((front-end-guide))
    Stack Covered
      JavaScript basics
      UI frameworks
      State management
      CSS and styling
    Tooling
      Linting formatting
      Build system
      Package management
    Quality
      Testing strategies
      Type checking
      CI integration
    Deployment
      Hosting CDN
      Monitoring
    Audience
      Frontend beginners
      Backend engineers

mindmap root((front-end-guide)) Stack Covered JavaScript basics UI frameworks State management CSS and styling Tooling Linting formatting Build system Package management Quality Testing strategies Type checking CI integration Deployment Hosting CDN Monitoring Audience Frontend beginners Backend engineers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Follow a structured path through the modern frontend ecosystem as a beginner or back-end engineer switching to frontend work.

USE CASE 2

Use as a template for your own team's frontend onboarding guide, with rationale for each tool choice already written.

USE CASE 3

Evaluate alternatives for each part of your frontend stack by reading Grab's comparisons of options they considered and why they chose what they did.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

This repository is a written study guide produced by Grab's web team to introduce newcomers to the modern front-end stack. Grab is described in the README as Southeast Asia's leading transportation platform. As their web team grew, new hires and back-end engineers kept getting overwhelmed by how many tools, libraries, and frameworks the modern JavaScript world expects you to know, so the team wrote this guide to explain why they make the choices they make and how to learn each piece. It is not a code library, it is a long, opinionated reading list with explanations. The README's table of contents walks through what a single-page app is (a web app where the page does not fully reload as the user navigates), then steps through the parts of a typical stack: modern JavaScript, the user interface layer, state management, styling, testing, linting JavaScript, linting CSS, formatting code, types, the build system, package management, continuous integration, hosting and CDN, deployment, and monitoring. For each topic the guide names what Grab uses, explains why, links to learning resources so you can pick it up on your own, and mentions alternatives that might suit other teams better. The authors say it is mildly opinionated and will be updated periodically as their choices evolve. You would use this guide if you are new to front-end work and want a structured path through the ecosystem instead of trying to learn everything at once, or if your own company is putting together a similar JavaScript stack and you want a model to adapt. The README lists prerequisites such as comfort with the command line, Git, and how the web works. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1

Based on the Grab front-end guide, what state management solution do they recommend and why? How should I apply it to a mid-sized React app?

Prompt 2

The Grab front-end guide covers linting and formatting. Walk me through setting up ESLint and Prettier in a new JavaScript project following their approach.

Prompt 3

What testing strategy does the Grab front-end guide recommend for a single-page app, and how do I set it up from scratch?

Prompt 4

I am a back-end developer starting front-end work. What does the Grab front-end guide say I should learn first, and what resources do they link for it?

Prompt 5

How does the Grab guide recommend handling CSS at scale, what tool do they pick and what alternatives did they consider?

Open on GitHub → Explain another repo

← grab on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.