---
title: "Fixing Build Errors and Enhancing UI for JPQuiz App"
date: 2025-08-10
description: ""
tags: ["development notes", "CSS", "Next.js"]
Today, we tackled some critical build errors and made significant UI improvements to our JPQuiz application, ensuring a smoother and more visually appealing experience for our users.
THE CHALLENGE: UNEXPECTED BUILD FAILURES
Our recent development cycle hit a snag with persistent build errors in the JPQuiz app. The console was flooded with messages like Expression expected and Expected ',', got 'className', pointing to syntax issues within our JSX. Upon investigation, we discovered a common pitfall in React development: using class instead of className for CSS classes in JSX elements. This subtle oversight, while seemingly minor, caused the Next.js compiler to throw errors, halting our build process.
THE SOLUTION: A QUICK FIX AND A ROBUST APPROACH
The immediate fix involved systematically replacing all instances of class= with className= across the affected components in src/app/jpquiz/page.tsx. This resolved the syntax errors and allowed the build to complete successfully.
BEYOND THE FIX: UI ENHANCEMENTS FOR BETTER USER EXPERIENCE
With the build issues behind us, we turned our attention to refining the app's user interface. A noticeable problem was the left-alignment of the six feature images under the "App Features" section. While the parent container used CSS Grid, the images themselves weren't perfectly centered within their respective grid items.
To address this, we implemented a more robust centering solution using Flexbox. By applying display: flex; flex-direction: column; align-items: center; to the .feature-item class in our global stylesheet (src/app/globals.css), we ensured that each image, along with its associated text, was perfectly centered within its container. This small but impactful change significantly improved the visual balance and professionalism of the "App Features" section.
LOOKING AHEAD
These updates not only resolved critical build issues but also enhanced the visual appeal and user experience of the JPQuiz app. We are committed to continuously improving our applications, ensuring they are robust, user-friendly, and aesthetically pleasing.