Frontend Track 30 min

Challenge F-00: Project Setup & UI Analysis

Description

Before you redesign anything, you need to see what you're working with. In this challenge, you'll get the Juice Shop application running locally and take a hard look at the current Angular frontend.

The app works, but "works" and "looks good" are two different things. Your job is to explore every page, click every button, and document what's dated, what's clunky, and what could use a modern touch. Think about layout, color, typography, spacing, responsiveness, and accessibility. The issues you identify here become your roadmap for the challenges ahead.

Objectives

  • Get the Juice Shop application running in your development environment
  • Navigate through the entire frontend — every major page and user flow
  • Identify and document current design issues and areas for modernization
  • Note specific UI/UX problems: layout issues, inconsistent styling, poor responsiveness, accessibility gaps

Success Criteria

  • Application is running locally and accessible in the browser
  • All major pages and user flows have been explored
  • At least 5 specific design improvements documented (with page/component and what's wrong)
  • Improvement list is prioritized by impact

Learning Resources