Why I Chose Next.js for the Frontend

I picked Next.js for its simplicity and performance benefits. It makes handling routing, data fetching, and server-side rendering easy, which improves both user experience and SEO. Here’s why it works well for this project:

• Server-Side Rendering (SSR) – Pages load faster and are better optimized for search engines.

• Static Site Generation (SSG) – For parts of the app that don’t need frequent updates, SSG helps reduce load times.

• API Routes – Next.js allows setting up backend endpoints directly within the frontend project.

• Easy Routing – File-based routing makes it easier to manage pages without extra configuration.

Next.js simplifies the development process and improves the app’s overall speed and efficiency.

Designing the UI with Figma

Before writing any code, I planned out the UI in Figma. Starting with low-fidelity wireframes, I focused on the structure and user flow — making sure navigation is simple and intuitive.

Once the flow was clear, I refined it into a high-fidelity design, adding consistent colors, typography, and spacing. My goal was to keep the interface minimal and clean while ensuring it’s easy to use.

Key design decisions:

• Simple Navigation – Users should quickly find what they need.

• Consistent Color Palette – Ensuring a visually cohesive look.

• Accessible Design – Making sure the app is easy to use for everyone.

Figma made it easy to adjust the design and test different layouts before starting development.

Using Tailwind CSS for Styling

For styling, I went with Tailwind CSS because it allows me to apply consistent styles directly in the JSX code. Its utility-first approach makes it easier to customize and maintain styles across the app.

Why Tailwind works well:

• Reusable Styles – Used Tailwind’s class-based system to create consistent buttons and forms.

• Dark Mode Support – Enabled dark mode with Tailwind’s built-in support.

Tailwind reduces the need for writing custom CSS files and keeps the code organized.