Frontend-challenge

Rick & Morty Frontend Challenge - Tasks

Welcome to the Rick & Morty Frontend Challenge! You have 1 hour to complete as many of these tasks as possible. Focus on quality over quantity - it's better to complete fewer tasks well than to rush through all of them.

🎯 Your Mission

Build a character listing application that fetches and displays Rick & Morty characters using GraphQL.

📋 Task List

Phase 1: Analysis & Core Setup (Priority: HIGH)

Goal: Understand the requirements and set up the foundation

• Task 1.1: Analyze the project structure

  • Explore the existing codebase and understand the setup
  • Identify what components need to be created
  • Review the available GraphQL endpoint and data structure

• Task 1.2: Implement data fetching

  • Connect to the Rick & Morty GraphQL API
  • Fetch character data and handle the response
  • Implement proper error handling for API failures

• Task 1.3: Create the character display

  • Design and implement components to display character information
  • Ensure proper component hierarchy following atomic design principles
  • Display essential character details (image, name, status, etc.)

Phase 2: UI/UX & Responsive Design (Priority: MEDIUM)

Goal: Create a polished and responsive user interface

• Task 2.1: Implement responsive design

  • Ensure the layout works on mobile, tablet, and desktop
  • Create an appropriate grid system for character display
  • Test and optimize for different screen sizes

• Task 2.2: Enhance visual design

  • Style components with a clean, modern design using tailwind
  • Add visual indicators for different character statuses

• Task 2.3: Add loading and error states

  • Create loading indicators while data is being fetched
  • Design user-friendly error messages
  • Provide options for users to retry failed operations

Phase 3: Advanced Features (Priority: LOW)

Goal: Add enhanced functionality if time permits

• Task 3.3: Enhance user interactions
  • Add interactive elements (hover effects, animations)
  • Consider adding character detail views or modals
  • Implement smooth transitions and micro-interactions

⏰ Time Management Tips

• 0-15 min: Focus on Phase 1 - get the desing plan
• 15-40 min: Work on Phase 2 - get the basic listing working
• 40-60 min: Attempt Phase 3 if time permits, or polish existing work

🚀 Getting Started

1. Review the existing codebase and understand the structure
2. Start with Task 1.1 - get the character listing working
3. Test your implementation frequently
4. Ask questions if anything is unclear

Good luck! Remember, focus on doing fewer things well rather than rushing through everything. 🌟

---