/React-Developer-Roadmap-assesment-1

Frontend Test Assessment Project Requirements

Title: Frontend Test Assessment

Technologies and Skills Required:

  • React: Utilize React to build the application components.
  • React-Hook: Implement hooks to manage state and side effects within the application.
  • CSS (Tailwind is mandatory): Use Tailwind CSS for styling the application.
  • TypeScript
  • Responsive Design: Ensure the application is responsive and works well on different screen sizes and devices.

Project Objective:

  • Mimic the Upwork signup and signin pages, providing a similar user experience and interface design.

Detailed Requirements:

  1. React Components:

    • Create reusable and modular React components.
    • Implement functional components using React-Hook.

  2. State Management:

    • Use React-Hook for managing the state within the application.
    • Ensure proper handling of form inputs and validation.

  3. Styling:

    • Use Tailwind CSS for all styling purposes.
    • Ensure a clean, modern, and professional look that closely mimics the Upwork signup and signin pages.

  4. TypeScript

    • Use TypeScript to enhance code quality and maintainability.
    • Define appropriate types and interfaces for props and state.

  5. Responsive Design:

    • Implement responsive design principles to ensure the application looks and functions well on various devices, including desktops, tablets, and mobile phones.

  6. Forms and Validation:

    • Create forms for signup and signin with appropriate input fields (e.g., email, password, name, etc.).
    • Implement client-side validation to provide immediate feedback to users.

  7. User Experience:

    • Mimic the Upwork user experience, focusing on intuitive navigation and ease of use.
    • Ensure that the signup and signin process is smooth and user-friendly.

  8. Accessibility:

    • Ensure the application is accessible to users with disabilities.
    • Follow best practices for web accessibility, including proper use of ARIA attributes and keyboard navigation support.

Deliverables

  • Source code hosted in a public repository (e.g., GitHub, GitLab).
  • A deployed version of the application accessible via a public URL.
  • Documentation detailing the project setup, structure, and any necessary instructions for running the application.

Evaluation Criteria

  • Code quality and adherence to best practices.
  • Use of React and React-Hook for state management.
  • Effective use of Tailwind CSS for styling.
  • Responsiveness and cross-device compatibility.
  • Proper implementation of TypeScript (if used).
  • Overall user experience and similarity to the Upwork signup and signin pages.

Good luck with your assessment! If you have any questions or need further clarifications, feel free to ask.