Tilt365: Case Study of Ingenious Development

Development processes have always presented these components: good planning, risk prevention, and learning!

Some key technologies you’ll find in the post are Ruby on Rails and Next.js, through a complex path migrating databases from PAA/DNN to Vercel.

Here, we present a case study from Effectus Software and Tilt365 to show how risk prevention and mitigation are paramount when developing.

“Everyone is talking about “agile.” Agile culture. Agile executive. Agile organization. Now that it’s reached popularity among the masses, the term has become muddled, overused, and distorted… without understanding what it means.

Yet, it is crucial to a team’s ability to move quickly and innovate to drive competitive relevance. Most leaders don’t know that it’s much more than “flexible” or “adaptive,” words often used interchangeably for agile.

What it requires of the people who drive agile behaviors is even more essential. Our research has demonstrated that strong internal character is the central ingredient of an agile culture where innovation is likely to occur.

Way beyond “soft skills,” being agile means showing up focused, influential, and driven towards a common goal. Specifically, it means operating from wisdom, courage, resilience, and humanity all at once. That’s no small feat.”

Pam Boney – Tilt365 founder

Problem solved with A-level development!

One of the biggest challenges we found was migrating PAA/DNN using Ruby on Rails at lightning speed.

Plus, we also chose Next.js because we were going to develop just the AGT (Agility Growth Tracker), so we needed to create a mono repo using Next.js backend using Vercel as a hosting provider.

Technologies used

Next.js is highly recommended for building interactive dashboards, so it came in really handy:

Using Next.js to build a dashboard is highly recommended because of its performance, flexibility, and developer-friendly features. Here are the key reasons why Next.js is a great choice for building dashboards:

Speed of Migration: Migrating the systems (PAA/DNN) “at lightning speed” implies a need for efficiency and speed in the transition process. This can be challenging due to potential technical debt, the complexity of the existing systems, and the necessity to ensure that the new Ruby on Rails implementation functions correctly and integrates seamlessly with other components.

Technology Integration: Using multiple technologies (Ruby on Rails and Next.js) within a mono repo can introduce challenges in maintaining coherence, ensuring compatibility, and managing dependencies. Ensuring that the development team is skilled in both technologies and can navigate their intricacies effectively is crucial.

Development of AGT: Focusing on developing the Agility Growth Tracker (AGT) within this framework means that there might be tight deadlines and a strong emphasis on feature delivery. Balancing the innate challenges of creating a new product while ensuring stability in the overall system can be difficult.

Environment Setup: Employing Vercel as a hosting provider requires knowledge of its specific configurations and optimizations for deploying Next.js applications. Ensuring that the development and deployment pipelines are efficient and support rapid iteration is essential.

Team Coordination: If multiple developers are working on different parts of the mono repo, ensuring clear communication and collaboration becomes critical. Working quickly can exacerbate coordination issues and lead to integration problems if not managed well.

Overall, the primary challenge lies in striking the right balance between speed, technical integration, and maintaining quality during the migration and development process. Addressing these issues may require robust planning, clear documentation, effective communication, and possibly increasing the team’s capacity to adapt to new tools and technologies.

🔥 Performance & Optimization

1. Automatic Code Splitting
   • Only loads the JavaScript needed for each page, reducing initial load times.
2. Server-Side Rendering (SSR) & Static Generation (SSG)
   • SSR ensures real-time data fetching, making dashboards fast and responsive.
   • SSG allows pre-rendering of pages for better performance when real-time updates are not needed.
3. API Routes for Backend Logic
   • You can create API endpoints directly in your Next.js app (/pages/api/), eliminating the need for a separate backend.

⚡️ Developer Experience & DX

1. Built-in Routing System
   • File-based routing makes it easy to create pages (/pages/dashboard.js → /dashboard route).
   • Dynamic routes (/pages/dashboard/[id].js) make it simple to handle different views.
2. Fast Refresh & Hot Reloading
   • Instantly see changes during development without losing component state.
3. Middleware for Authentication & Authorization
   • Easily implement authentication checks using Middleware (middleware.js) or API routes.

📊 Great for Data-Heavy Dashboards

1. Streaming & React Server Components
   • With React Server Components, you can stream data-heavy UI parts without blocking the page load.
2. Edge Functions & ISR (Incremental Static Regeneration)
   • Use Edge Functions for real-time updates.
   • ISR allows you to update only specific parts of a dashboard without rebuilding the whole app.

🔌 Seamless Integration with Tech Stack

1. Works Well with Tailwind CSS & Component Libraries
   • Supports Tailwind CSS, ShadCN, Material UI, or Chakra UI for beautiful UIs.
2. Supports GraphQL & REST APIs
   • Easily connect to Prisma, Supabase, Firebase, PostgreSQL, etc.

🚀 SEO & Accessibility (Bonus)

1. Better SEO Compared to SPAs
   • Since Next.js supports SSR, dashboards can be indexed better than single-page apps (important if the dashboard is public-facing).
2. Image Optimization
   • Built-in support for next/image reduces image loading times with automatic lazy loading.

Closure

Are you working on a specific dashboard project? We can help you set up the structure! 🚀

Next.js is a powerful, scalable, and developer-friendly choice for dashboards, especially if you need real-time updates, high performance, and easy backend integration. If your dashboard requires authentication, fast data loading, or dynamic content updates, Next.js provides a clean, modern way to build it efficiently.