Building a React Anime Characters Database

Welcome to the journey of creating my React CRUD application! This project integrates with AWS API Gateway and external anime APIs to create a comprehensive anime character database. Here's a detailed breakdown of how I built this project from scratch.

🔗 Live Demo: Anime Characters Database

Project Overview

This web application serves as a comprehensive anime character database with:

1. Integration with my AWS API Gateway backend for character storage and management
2. External data fetching from the Jikan API for popular anime information
3. Complete CRUD (Create, Read, Update, Delete) functionality for character management

Key features include:

• Character management with detailed information (stats, voice actors, abilities)
• Category filtering (hero, villain, support)
• Popular anime showcase with ratings and episode information
• Dynamic character search

Tech Stack

• Frontend: React.js with Webpack
• Backend: AWS API Gateway with Lambda functions
• API Integration: Custom AWS API and Jikan API (MyAnimeList)
• Deployment: Vercel for frontend hosting
• State Management: React Hooks (useState, useEffect, useCallback)

User Interface

Application Layout:

• A responsive navbar with search functionality and category filtering
• A character creation form with detailed fields for comprehensive character data
• A character grid displaying all characters with edit and delete functionality
• A popular anime section showing current top-rated series

Highlights:

The application features a clean, intuitive interface with an anime-inspired design that makes character management enjoyable and visually appealing.

Project Structure

Here's how the app is organized:

ReactJSMobileApp/
├── src/
│   ├── App.js            # Main application component 
│   ├── App.css           # Application styling
│   ├── api.js            # API integration functions
│   ├── index.js          # Application entry point
│   ├── setupProxy.js     # API proxy configuration
│   ├── hooks/            # Custom React hooks
│   │   ├── useFetch.js   # Data fetching hook
│   ├── components/       # UI components
├── webpack.config.js     # Webpack configuration
├── package.json          # Dependencies and scripts
├── vercel.json           # Vercel deployment configuration

AWS API Integration

I built a custom RESTful API using AWS API Gateway and Lambda functions:

• GET /api/characters - Fetch all characters
• GET /api/characters/:id - Fetch specific character
• POST /api/characters - Create a new character
• PUT /api/characters/:id - Update an existing character
• DELETE /api/characters/:id - Remove a character

The API is secured with an API key and handles complex character data including nested objects for stats, voice actors, and relationships.

React Features Implemented

Efficient Data Fetching with AbortController:

useEffect(() => {
  let isMounted = true;
  
  const fetchData = async () => {
    try {
      setLoading(true);
      const data = await getCharacters();
      
      // Only update state if component is still mounted
      if (isMounted) {
        setCharacters(data);
        setLoading(false);
      }
    } catch (error) {
      if (isMounted) {
        console.error('Error fetching characters:', error);
        setError('Failed to load characters. Please try again later.');
        setLoading(false);
      }
    }
  };
  
  fetchData();
  
  // Cleanup function to prevent state updates after unmounting
  return () => {
    isMounted = false;
  };
}, []);

Character Update Functionality:

const handleUpdate = async (updatedCharacter) => {
  try {
    // First update in local state for immediate UI feedback
    setCharacters(prevChars => 
      prevChars.map(char => 
        char.id === updatedCharacter.id ? updatedCharacter : char
      )
    );
    
    // Close the modal BEFORE the API call
    setShowUpdateModal(false);
    
    // Then make the API call
    await updateCharacter(updatedCharacter.id, updatedCharacter);
    
  } catch (error) {
    console.error('Error updating character:', error);
  }
};

Custom Filter Logic:

const filterCharacters = useCallback(() => {
  if (selectedCategory === 'all') {
    return characters;
  } else {
    // Check both category and role fields
    return characters.filter(character => 
      (character.category && character.category.toLowerCase() === selectedCategory.toLowerCase()) ||
      (character.role && character.role.toLowerCase() === selectedCategory.toLowerCase())
    );
  }
}, [characters, selectedCategory]);

Dynamic Form with Complex Data Structure:

The form handles complex nested data including:

• Character stats with sliders
• Voice actor information
• Comma-separated abilities lists
• Japanese and English name variations

Deployment

The application is deployed using Vercel with a custom configuration to handle API proxying:

{
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "https://i0p044nu8c.execute-api.us-east-1.amazonaws.com/prod/$1",
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Accept, Authorization, x-api-key",
        "x-api-key": "w5nPK8oNtVjhowDldi276O0dKa1BuyMcfZf8z960"
      }
    }
  ]
}

This configuration ensures seamless communication between the React frontend and AWS API Gateway backend.

The application is live at:

• Primary URL: https://cruddemo-one.vercel.app/
• Alternate URL: https://cruddemo-9g7w9btyn-bradleymateras-projects.vercel.app

Challenges Overcome

1. CORS Configuration: I implemented a robust solution for handling cross-origin requests between my frontend and AWS API.

2. Complex Data Handling: Created a system for managing nested character data with proper validation and error handling.

3. API Security: Implemented API key authentication to secure backend endpoints while maintaining frontend accessibility.

4. Webpack Configuration: Customized the webpack setup to handle proxying, build optimization, and development experience.

5. Error Handling: Built comprehensive error handling with fallbacks for network issues and API failures.

Future Improvements

1. Authentication System: Add user accounts for personalized character collections.

2. Advanced Filtering: Implement multi-criteria filtering and sorting options.

3. Character Relationships: Create visual relationship maps between characters.

4. Image Upload: Add direct image upload functionality instead of URL references.

5. Offline Support: Implement service workers for offline data access.

Conclusion

Building this React application was an exciting journey into full-stack development with AWS services. The project demonstrates how modern React can be leveraged with cloud services to create responsive, dynamic web applications with complex data requirements.

The combination of React hooks for state management, AWS API Gateway for backend services, and Vercel for deployment created an efficient development workflow that allowed me to focus on building features rather than infrastructure.

Feel free to explore the live application and check out the GitHub repository for the complete source code!

Bradley Matera

Next Steps for Gatsby:

• Use Gatsby's Image API to optimize character images
• Add MDX for interactive code samples
• Implement GraphQL to fetch blog metadata dynamically