Skip links

Chipotle Mexican Grill website uses .Net Core & Azure

Chipotle Mexican Grill website uses .Net Core & Azure

Chipotle Mexican Grill is a big name in the food industry known for its Mexican Dishes. This company is vocal about serving local produced, sourced, cooked, without artificial colors, or preservatives. By 2020 Chipotle have more than 2,600 restaurants in the US, Canada, UK, France & Germany, all of which are company owned & operated.

Chipotle-Ecommerce-Azure-dotnetcore

Scenario

Steve Ells, owner of Chipotle started first restaurant in Denver, Colorado in 1993. In 2018, company decided to move its headquarter including the software development division to California. Soon Mike Smith, joined Chipotle as a lead software developer. The first project he got assigned was to create a Fresh Customer-facing website which makes company agile. They assign Steve to serve Chipotle’s fast growing online customer base.

Prior to Mike, Chipotle had 3 differently looking customer-facing websites for: a Main Presentation Website, Online Ordering, and Catering. All 3 were built on AngularJS and all content on the sites was static with old standards, including Menus, Pricing, and Item availability. They had to write new code for each small change request. This followed with subsequent mandatory testing and deployment processes. The sites were self-hosted. So Chipotle had to assign resources for day-to-day operation of all three sites. All this was required to keep everything running smoothly.

The company decided to start from scratch a new, unified web presence. The website would need to connect to existing back-end systems for ordering, preferences, authentication, and so on. It also had to integrate with the company’s recently purchased, cloud-based content management system, which drives menu content and item availability for displays in the company’s 2,500 stores.

Solution

First they started choosing which Tech-stack and Framework to go with. As per the requirements, the new site would have to support content changes in minutes or hours, without any developer assistance. Menus and menu item availability needed more configurability along with modification on the fly. They also had to make a feature to push notification for addressing scenarios like a local store running out of a menu item/ingredient.

Building everything within a CMS(content management system), seemed risky for case like integration with existing back-end systems. The main motive was  to deliver a state of art and responsive user experience with an agile architecture. So they decided to follow a single-page application pattern, which dynamically rewrites the current web-page as needed rather than loading an entire new set of pages from a server.

Smith’s team decided to go with  following:

  • C# – Already Chipotle Mexican Grill’s favorite language for other existing back-end services for its features like LINQ, Generics, Async/await, and NuGet for sharing code. They shared NuGet packages internally for code reusability and achieving consistency across teams.
  • TypeScript – Team chose Typescript for client-side scripting for features like object orientation and strong type checking. It made easy for JS developers to  write better code with more language features & built-in compile-time safety.
  • .Net Core – Chose Asp.Net Core as it offered more platform options as well as hosting options—like deploying Docker containers on Linux
  • VS Code – They use VS Code for frontend development. It works across OS like MAC, Linux, Windows so becomes easy to sync.

Azure CDN

Today, when customers go to chipotle.com, the first page loads from Azure Content Delivery Network. Browser then requests the single web page (.js, .css & image files) from CDN, backed by Azure Blob storage.  All back-end API calls (for ordering, delivery, and account management and preferences) happen via Azure API Management, giving Chipotle a single, easily managed endpoint into its various back-end services. Due to this other development teams at Chipotle could work to modernize the APIs behind the gateway remained transparent to Smith’s front-end app.

Azure Cosmos DB

A Separate team is working to replace some relational data stores with Azure Cosmos DB. Their data has needs of both document storage as well as relational, so  switched to Azure Cosmos DB. With Cosmos DB they can easily achieve scalability, availability and futuristic geographic distribution. For instance, we can store a customer’s order as a single, unstructured JSON document, instead of in multiple different relational tables. Features like Time to Live also prove helpful in providing a convenient way to automatically delete an order that’s not completed within a certain amount of time.

Other Azure services that play a role in the solution include:

  • Azure Event Hubs, for collecting/procecssing events and identify bottlenecks which brought the company’s website down in the past.
  • Cache for Redis, improve website performance by providing in-memory caching for certain important info.
  • Azure App Service, provide an auto-scaling hosting environment for each back-end service: order, tax, payment, and so on.
  • Azure Functions, which runs event-triggered code in cases where a full-blown hosted service isn’t needed. For example, a Serverless function used to provide an API using which stores can adjust their local menus if they run out of an item.
  • Azure Key Vault, which provides a means of safeguarding cryptographic keys and other secrets used by Chipotle’s cloud apps and services.Following the above combination helped them achieve developer productivity, scalability ,reliability and Devops
    If you also are looking to make a website as good as Chipotle Mexican Grill, lets talk. Send us your requirement at shalin@ncoresoft.com or
    skype
    at shalin.jirawla