A modern, responsive web application built with React 18, TypeScript, and GraphQL to explore characters from the Rick and Morty universe. Browse, search, filter, and manage your favorite characters with an intuitive and beautiful user interface.

• Character Listing: Browse all Rick and Morty characters with pagination
• Character Details: View detailed information including origin, location, and episodes
• Sorting: Sort characters alphabetically (A-Z / Z-A)
• Favorites System: Mark characters as favorites with persistent storage
• Comments: Add and view comments for each character
• Responsive Design: Fully responsive layout that works on mobile, tablet, and desktop

• TypeScript: Full TypeScript implementation for type safety
• Soft Delete: Temporarily remove characters from view (with restore option)
• Advanced Filters: Filter by Status (Alive/Dead/Unknown), Species, and Gender
• Unit Tests: Comprehensive test coverage for critical components
• Modern UI: Beautiful interface with Tailwind CSS and smooth animations

• Frontend Framework: React 18
• Language: TypeScript
• Architecture: Feature-Driven Design
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router DOM v6
• API: GraphQL with Apollo Client
• State Management: React Context API + LocalStorage
• Icons: Lucide React
• Testing: Vitest + React Testing Library

Before running this application, make sure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn package manager

1. Clone the repository

   git clone <your-repository-url>
   cd ricky-morty-app

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 (or the port shown in your terminal)

• npm run dev - Start the development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run test - Run unit tests
• npm run lint - Run ESLint

• The home page displays a grid of character cards
• Each card shows the character's image, name, species, and status
• Click on any character card to view detailed information

• Use the filter panel to search by name, status, species, or gender
• Use the sort dropdown to order characters alphabetically
• Filters and sorting work together for precise results

• Click the heart icon on any character card to add/remove from favorites
• Access your favorites from the navigation menu
• Favorites are persisted in browser storage

• Navigate to a character's detail page
• Type your comment in the input field
• Click "Send" to add the comment
• Comments are stored locally and persist across sessions

• Click the trash icon to temporarily remove a character from view
• Deleted characters can be restored by clicking the restore icon
• Soft-deleted characters are hidden but not permanently removed

This project follows a Feature-Driven Architecture for better scalability and maintainability:

ricky-morty-app/
├── src/
│   ├── features/            # Feature modules (self-contained)
│   │   ├── characters/      # Character listing feature
│   │   │   ├── components/  # CharacterCard, CharacterListHeader, etc.
│   │   │   ├── hooks/       # useCharacters, useCharacterFilters, etc.
│   │   │   └── index.ts     # Feature exports
│   │   ├── character-detail/  # Character detail feature
│   │   │   ├── components/  # CharacterDetailHeader, CharacterInfo, etc.
│   │   │   ├── hooks/       # useCharacterDetail
│   │   │   └── index.ts
│   │   ├── favorites/       # Favorites management feature
│   │   │   ├── components/  # FavoritesHeader, EmptyFavorites
│   │   │   ├── hooks/       # useFavoritesPage
│   │   │   ├── context/     # FavoritesContext
│   │   │   └── index.ts
│   │   └── comments/        # Comments feature
│   │       ├── components/  # CommentSection
│   │       ├── hooks/       # useComments, useCharacterComments
│   │       └── index.ts
│   ├── shared/              # Shared resources across features
│   │   ├── components/      # Layout, CharacterDetails
│   │   ├── graphql/         # Apollo client, queries
│   │   ├── types/           # TypeScript type definitions
│   │   ├── utils/           # localStorage utilities
│   │   └── index.ts
│   ├── pages/               # Route pages
│   │   ├── Home.tsx
│   │   ├── CharacterDetailPage.tsx
│   │   └── FavoritesPage.tsx
│   ├── test/                # Test configuration and tests
│   │   ├── components/      # Component tests
│   │   │   ├── CharacterCard.test.tsx
│   │   │   └── CommentSection.test.tsx
│   │   └── setup.ts
│   ├── App.tsx              # Main App component
│   ├── main.tsx             # Application entry point
│   └── index.css            # Global styles
├── public/                  # Static assets
├── index.html               # HTML template
├── package.json             # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
├── tailwind.config.js       # Tailwind CSS configuration
└── README.md                # This file

• Feature Isolation: Each feature is self-contained with its own components, hooks, and logic
• Scalability: Easy to add new features without affecting existing ones
• Maintainability: Changes to one feature don't impact others
• Clear Boundaries: Shared code is explicitly placed in shared/
• Better Imports: Barrel exports (index.ts) provide clean import paths

Characters Feature (features/characters/)

• Character listing and grid display
• Search and filtering functionality
• Sorting capabilities
• Character cards with actions

Character Detail Feature (features/character-detail/)

• Individual character detail pages
• Episode information
• Character metadata display

Favorites Feature (features/favorites/)

• Favorites management
• Favorites context and state
• Favorites page and empty states

Comments Feature (features/comments/)

• Comment system for characters
• Comment storage and retrieval
• Comment UI components

This application uses the Rick and Morty GraphQL API.

Get Characters List

query GetCharacters($page: Int, $filter: FilterCharacter) {
  characters(page: $page, filter: $filter) {
    info {
      count
      pages
      next
      prev
    }
    results {
      id
      name
      status
      species
      type
      gender
      image
      origin {
        name
      }
      location {
        name
      }
    }
  }
}

Get Character Details

query GetCharacter($id: ID!) {
  character(id: $id) {
    id
    name
    status
    species
    type
    gender
    origin {
      name
      dimension
    }
    location {
      name
      dimension
    }
    image
    episode {
      id
      name
      episode
    }
    created
  }
}

• name: String - Filter by character name
• status: "Alive" | "Dead" | "unknown"
• species: String - Filter by species (e.g., "Human", "Alien")
• gender: "Male" | "Female" | "Genderless" | "unknown"

The application uses browser LocalStorage to persist data:

{
  "rickmorty_favorites": ["1", "2", "3"],
  "rickmorty_comments": {
    "1": [
      {
        "id": "uuid",
        "text": "Great character!",
        "timestamp": "2024-02-04T10:00:00.000Z"
      }
    ]
  },
  "rickmorty_deleted": ["5", "10"]
}

The application includes unit tests for critical components:

• CharacterCard: Tests rendering, favorite toggle, and delete functionality
• CommentSection: Tests comment addition, display, and validation

All tests have been updated to work with the new feature-driven architecture.

Run tests with:

npm run test

For interactive test UI:

npm run test:ui

The UI design follows the mockup provided in the Figma design.

Key design elements:

• Modern card-based layout
• Clean typography with Inter font
• Consistent spacing and padding
• Intuitive navigation
• Smooth animations and transitions
• Accessible color contrast

• Mobile: < 640px (1 column)
• Tablet: 640px - 1024px (2 columns)
• Desktop: > 1024px (3-4 columns)

No environment variables are required. The application uses the public Rick and Morty GraphQL API.

You can customize the theme colors in tailwind.config.js:

theme: {
  extend: {
    colors: {
      primary: {
        // Your custom colors
      },
    },
  },
}

• None at the moment

• Add character comparison feature
• Implement infinite scroll
• Add dark mode support
• Export favorites list
• Share character profiles
• Add episode details page

This project is open source and available under the MIT License.

Created as a technical assessment project.

• Rick and Morty API for providing the data
• Lucide for the beautiful icons
• Tailwind CSS for the utility-first CSS framework

Note: This application is for educational and demonstration purposes only. All Rick and Morty content is owned by Adult Swim and Justin Roiland.