Case Study: Bank Grader

Full website build with Dato CMS and Next.js


Client: Bank Grader

Visit their site

US-based Bank Grader is a tool that analyzes the best private student loan options and gives students a personalized recommendation based on their location.

  • Scope and challenges

    • Create a new site based on Dato CMS 
    • Build a modern frontend based on Next.js
    • Serve static content using APIs
    • Google analytics implementation
  • Solutions and results

    • Implement Dato CMS and build hand-crafted content models
    • Create an easy-to-use setup they could manage on their own
    • Build a mobile-friendly website 

Website rebuild with Dato CMS, Next.js, and Vercel

Our team worked with Bank Grader to build a brand-new website based on headless architecture. Building a headless website on Dato CMS allowed us to provide Bank Grader with greater mobile-friendliness and faster loading speeds.

We created a next-gen
website for a student loan finder

  • Mobile-friendly

    user experience

    Bank Grader's previous website was slow and almost impossible to use for mobile users. We changed that. with Next.js' help. We built a snappy, mobile-friendly website that students without computers could benefit from.

  • +3,000

    monthly users

    Thanks to Next.js and Vercel, Bank Grader is now capable of handling thousands of requests and visitors per month without breaking, helping more students get the best loans than ever. 

A next-generation website
for a student loan application

Building a website capable of handling thousands of visitors at a time requires careful planning and execution. Here's how we did it: 

  • 1. Model content in Dato CMS

    The first step in the migration process was to model content in Dato CMS based on the existing website structure. We did this by going through the website pages and different content types to re-create them as modular content models in Dato CMS.

  • 2. API implementation

    We created a service that fetches student loan data from colleges and banks using a third-party API that gives the loan data to the student based on the college they chose. Next.js provides several built-in API methods, making it easy to fetch data from external sources and manipulate it within your application. 

  • 3. Front-end development with Next.js

    Now that all data was modeled and migrated, it was convenient to start working on the front-end software code with Next.js as provides an excellent architecture for creating modular, highly customizable, efficient page layouts when used in conjunction with headless CMSs.

  • 4. QA and publication

    The final step involved extensive quality assurance, where we ensured all pages contained correct data from SEO tags to H tag ordering. After extensive QA the site was published on Vercel.

Get in touch

Looking to build something like this?

Let’s talk about your ideas, no charge, no obligations.

Contact Sales

* Submitting this form will not sign you up for any marketing lists. Your information is strictly used and stored for contacting you. Privacy Policy