CloudFactory - Front-end Developer Assessment

Welcome to our code refinement assessment! You'll evaluate and improve React code generated by AI from an UI design. This simulates real-world tasks where you'll validate AI outputs against quality standards.

🔍 What We're Assessing

Your ability to:

• Implement pixel-perfect UI from designs
• Apply accessibility best practices
• Write clean, maintainable React/TypeScript
• Apply React best practices and hooks correctly
• Optimize component reusability
• Improve code structure
• Communicate technical decisions

🛠️ Tech Stack

• React 18 + TypeScript
• Tailwind CSS v4
• shadcn/ui components
• Vite build system

📐 Evaluation Criteria

1. Accessibility

2. Code Best Practices

   • React Hooks
   • Component Patterns
   • Performance

3. TypeScript Quality

4. Reusability & Maintainability

5. UI Implementation

   • Pixel-perfect design matching
   • Responsive behavior (mobile/desktop)
   • Consistent styling system

You can find the design in the assets folder.

📋 Task Instructions

1.Setup the project

git clone https://github.com/cloudfactory/cw-fe-assestment-task-1.git
cd cw-fe-assestment-task-1
npm install
npm run dev

2. Start editing the code

Open src/App.tsx file and start editing the code following the general guidelines.

3. Describe your changes

Describe the changes you made in the OUTPUT.md file. it should be brief and to the point, the same way you would put a code review comment. we will look at how well you communicate ideas about coding and development, as this is an important part of collaborative development.

4.Commit and push your files

commit all your changes (including the OUTPUT.md file) and push to the repository to your github account.

5. Send the link to the repository