Aidan Vidal

Building a Web App for Anime Enthusiasts

As someone who likes watching anime and coding, I recently embarked on an exciting journey to create a project that combines the two. There is a website called MyAnimeList (MAL) which holds a database of all the anime ever made and allows you to create your own list and rank them. I have decided to use their API along with openAI's API to create an assisant which will help you easily navigate the site's API using natural language. This web application aims to streamline the way users manage their anime and manga lists on MAL. Here, I will share my experiences, challenges, and insights from developing this project.

The MAL Project is a Django-based web application that allows users to search for anime and manga, add them to personal lists, and track their progress. It offers a user-friendly interface with functionalities like user registration, authentication, and detailed information views about each anime or manga.

Development Challenges and Solutions

User Registration and Authentication

One of the first hurdles was implementing a secure and efficient user registration and authentication system. Using Django's built-in authentication framework was a lifesaver, but integrating it seamlessly required some work. Here's a snippet from my views.py for user creation:

def create(request):
    if request.user.is_authenticated:
        return HttpResponseRedirect('/home/')
    
    if request.method == "POST":
        username = request.POST["username"]
        user = User.objects.filter(username=username)
        if user.exists():
            return render(request, 'MAL_app/create.html', {'error_message': 'Username already exists. Please try again.'})
        password = request.POST["password"]
        email = request.POST["email"]
        
        user = User.objects.create_user(username, email, password)
        UserProfile.objects.create(user=user, refresh_token='', access_token='')
        login(request, user)
        
        return HttpResponseRedirect('/token/')
    return render(request, 'MAL_app/create.html')

This code handles user creation, checks for existing usernames, and manages user sessions. One challenge was ensuring the form data was correctly validated and errors were gracefully handled.

Search Functionality and Personal Lists

Creating a responsive and efficient search functionality was crucial for the app. The search feature allows users to find anime and manga and add them to their personal lists. Handling user input and processing it required careful consideration of security and efficiency:

def process_input(request):
    if request.method == 'POST' and 'input_text' in request.POST:
        print(request.POST['input_text'])
        if request.user.is_authenticated:
            token = UserProfile.objects.get(user=request.user).access_token
            output_text = helper.process_message(request.POST['input_text'], token=token)
        else:
            output_text = helper.process_message(request.POST['input_text'])
        return JsonResponse({'output_text': output_text})
    else:
        return JsonResponse({'error': 'Invalid request'})

Here, handling the user's input and providing real-time feedback was a significant challenge. Ensuring the search was both fast and accurate required optimizing queries and effectively managing tokens for authenticated users.

Token Management

Managing tokens securely for API interactions was another critical aspect. Generating and verifying tokens involved running subprocesses and handling sensitive information:

def generate_token_link(request):
    if request.method == 'POST':
        client_id = request.POST.get('clientId')
        code_verifier = subprocess.check_output(['python', 'MAL_app/MAL_Helper/code_verifier.py']).decode('utf-8')
        
        output = subprocess.check_output(['python', 'MAL_app/MAL_Helper/link_generator.py', client_id, code_verifier]).decode('utf-8')
        
        return JsonResponse({'output_link': output, 'code_verification': code_verifier})
    else:
        return JsonResponse({'error': 'Invalid request'})

This snippet highlights the complexity of managing OAuth tokens and ensuring secure interactions with external APIs.

Features

Here's a quick rundown of the features I've implemented::

• User Registration and Authentication: Securely register and log in users.
• Search Functionality: Easily find anime and manga.
• Personal Lists: Add titles to personalized lists.
• Progress Tracking: Mark episodes or chapters as watched or read.
• Detailed Information Views: Get comprehensive details about each title.

These features provide a seamless and intuitive user experience, making it easy for anime enthusiasts to manage their lists and explore new titles.

Conclusion

Developing the MAL Project was a rewarding experience that honed my skills in Django and web development. The process was filled with challenges, from user authentication to API management, each providing valuable lessons. This project not only reinforced my coding skills but also taught me the importance of security and efficiency in web applications.

I have not published this website as it is a dynmaic website and requries it to be hosted on a paid server

Thank you for reading, and happy coding! The entire code for this project can be found here.

Posted by: Aidan Vidal

Posted on: May 30, 2024