Mobile Compatibility Tester

Description

This project involves creating a Mobile Compatibility Tester App that allows users to test website layouts for responsiveness. By emulating mobile views, users can check for design compatibility across different device screens, ensuring a seamless user experience.

Requirements

The Mobile Compatibility Tester App should include the following features:

• Input field for users to enter website URLs.
• Options to emulate different mobile device screens.
• Display the website layout under various screen resolutions.
• Responsive design and interactive UI using Tailwind CSS.

Key Concepts

• Utilizing React components to manage user inputs and UI state.
• Implementing iframe or similar methods to display website layouts.
• Enhancing user experience with responsive design techniques using Tailwind CSS.

Learning Objectives

After completing this project, students will be able to:

• Create a mobile compatibility testing application with React.
• Manage visual elements dynamically based on user interaction.
• Emulate different viewing scenarios to test design responsiveness.
• Use Tailwind CSS to build a responsive and interactive application interface.

$ npm create vite@latest mobile-compatibility-tester -- --template react-ts

$ yarn create vite mobile-compatibility-tester --template react-ts

$ bun create vite mobile-compatibility-tester --template react-ts