A responsive prototype that recreates Quash’s Test Case Generation experience, simulating the process from workflow generation to editable test case review. The project uses mock data and API stubs to replicate realistic interactions such as loading states, progress updates, and error handling, while avoiding backend implementation. The focus is on delivering high-fidelity UX, clear state management with a deterministic state machine, responsive layouts across devices, and smooth user interactions, ensuring the flow feels close to a production environment.
https://www.loom.com/share/d5eea011b752452c9c81e02bb3097607?sid=be8dca72-279a-4c97-86bb-61a7eca23293
- Clone the repository:
git clone <repository-url>
cd assignment-quash- Install dependencies:
npm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 with your browser to see the result.
- Navigate to the application and perform normal operations
- Success states are triggered by default for valid inputs
- To trigger error states, you can:
- Provide invalid inputs
- Use specific test parameters that simulate errors
- Check the browser console for error demonstrations
- Retry functionality can be triggered by:
- Failing operations that have retry mechanisms
- Using specific UI controls designed for retry scenarios
- Network failures that automatically trigger retry logic
- Built with Next.js for modern React development
- Component-based architecture for reusability
- State management using React hooks
- Responsive design
- Error handling and retry mechanisms
- Mock state demonstrations
Screen.Recording.2025-09-24.at.2.27.33.AM.mov
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.