Case Study: Bank Grader
Full website build with Dato CMS and Next.js
Client: Bank GraderVisit 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 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
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.
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.