Introduction

Welcome to the Dev Center for the Red Line Awards website. This document serves as the official developer documentation, detailing the technologies, implementation methods, and design considerations used to build the site.

Technology Stack

The Red Line Awards website leverages a modern tech stack to deliver a dynamic and interactive experience.

  • Vue.js 3: Used for building the reactive user interface and managing application state with components.
  • Vue Router: Manages client-side routing and navigation.
  • Supabase: Provides backend services including a PostgreSQL database, real-time subscriptions, and authentication.
  • GSAP: GreenSock Animation Platform for smooth animations and transitions.
  • Swiper.js: Implements sliders and carousels for main content and movie stills.
  • CSS3: Custom styling with fonts like Galmuri11, Free License, Righteous, Asap Condensed, and Open Sans, alongside responsive layouts.

Component Structure

The site is built using Vue.js components, organized modularly for reusability and maintainability. Vue Router is used for navigation between different pages, each with its own component.

  • Routing: Routes are defined with meta tags for dynamic SEO.
  • Dynamic Meta Tags: Meta tags are updated using Vue Router's `beforeEach` hook.
  • App: Root component managing layout and global state.
  • Navbar: Navigation bar with dropdown functionality.
  • Sidebar: Displays now-playing movies.
  • MainSlider: Main slider on the homepage using Swiper.js.
  • MovieGrid: Grid layout for movie posters.
  • MovieExpanded: Detailed view of a selected movie.
  • AwardSection: Displays award-winning movies.
  • ChatWindow: Live support chat window integrated with Supabase.
  • SideBanners: Dynamic side banners adjusting position on scroll.
  • Footer: Footer with links to Dev Center and other pages.

Example of route configuration: 

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home, meta: { title: 'Home', description: 'Home page' } },
    // Other routes
  ]
});
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'Default Title';
  const metaDescription = document.querySelector('meta[name="description"]');
  if (metaDescription) metaDescription.setAttribute('content', to.meta.description || 'Default Description');
  next();
});

Database Integration

Supabase is used as the backend, managing data with real-time capabilities. Key tables include:

  • main_slider: Stores images for the main slider (image_url).
  • rla_recommendations: RLA recommended movies (id, title, poster_url, description, is_ad).
  • rla_stills: Movie still images (movie_id, still_url).
  • movie_awards: Award-winning movies (id, movie_title, award_type, award_date, poster_url, short_description, still_cuts).
  • nominees: Nominee data for voting (id, movie_title, award_category, rating).
  • nominee_votes: Records votes for nominees (nominee_id, ip_address, rating).
  • notices: Notice board posts (id, title, content, created_at).
  • events: Event posts (id, title, content, created_at).
  • discussions: Movie discussion posts (id, title, content, created_at, updated_at). Updated with comments for floating post system.
  • discussion_comments: Comments on discussions (id, discussion_id, comment_text, unique_id, created_at, parent_id).
  • soundtrack: Soundtrack posts (id, title, content, created_at, views).
  • masters_pick: Master’s pick movies (id, title, content, poster_url, views, created_at, is_ad).
  • sidebanner: Side banner images (sidebanner_image).
  • chat_sessions: Chat session data (id, ip_address, last_user_read_at, last_admin_read_at, status).
  • chat_messages: Chat messages (id, session_id, message_text, is_admin, created_at).

Real-time updates are implemented using Supabase subscriptions: 

this.supabase.channel('discussion-changes')
  .on('postgres_changes', { event: 'INSERT', table: 'discussion_comments' }, payload => {
    this.fetchDiscussions();
  })
  .subscribe();

Animations

GSAP powers the site’s animations, enhancing user interaction. Notable animations include:

  • Intro Overlay: Fades out on site entry. 
    gsap.to("#intro-overlay", { duration: 1, opacity: 0 });
  • Page Transitions: Scales the page container during navigation. 
    gsap.to("#page-container", { duration: 0.5, scale: 0 });
  • Navbar Dropdown: Slides down/up on toggle. 
    gsap.to(nav, { duration: 0.3, height: 340 });
  • Movie Expanded View: Scales in from the left. 
    gsap.fromTo("#movie-expanded-wrapper", { scaleX: 0 }, { duration: 0.5, scaleX: 1 });
  • Poster Rotation: Rotates award posters on hover. 
    @keyframes posterRotate {
  0% { transform: perspective(1000px) rotateY(0deg); }
  50% { transform: perspective(1000px) rotateY(15deg); }
}

UI/UX Considerations

The site ensures consistent usability and accessibility. Key UI/UX features include:

  • Sidebar and Hamburger Menu: Sidebar with now-playing movies and a hamburger menu for mobile navigation.
  • Responsive Design: Adapts to various screen sizes using media queries.
  • Clear Navigation: Navbar and sidebar for easy section access.
  • Interactive Elements: Styled buttons and links for clarity.

Language Support

The Dev Center and Business pages support English and Korean, toggled via a button.

Implementation uses data attributes and JavaScript: 

<p data-en="English text" data-kr="한국어 텍스트">English text</p>
<script>
button.addEventListener('click', function() {
  const lang = this.textContent === 'EN' ? 'kr' : 'en';
  document.querySelectorAll('[data-en][data-kr]').forEach(el => {
    el.innerHTML = el.getAttribute(`data-${lang}`);
  });
});
</script>

Chat System

A live support chat system is integrated using Supabase for real-time messaging. Features include:

  • Session Management: Each user has a unique session based on IP address.
  • Real-time Updates: Messages update in real-time via Supabase subscriptions. 
this.supabase.channel(`chat-${this.chatSession.id}`)
  .on('postgres_changes', { event: 'INSERT', table: 'chat_messages' }, payload => {
    this.chatMessages.push(payload.new);
  })
  .subscribe();

Side Banners

Dynamic side banners adjust position based on scroll to avoid footer overlap, implemented with JavaScript. 

function adjustBannerPosition() {
  const footerRect = footer.getBoundingClientRect();
  if (footerRectAch.top < windowHeight) {
    const overlap = windowHeight - footerRect.top;
    leftSidebanner.style.bottom = `${overlap + 260}px`;
  } else {
    leftSidebanner.style.bottom = 'max(20vh,10rem)';
  }
}
window.addEventListener('scroll', adjustBannerPosition);

Additional Features

Nominee Voting System

Users can vote for nominees with a rating system. Each user votes once per movie, with no modifications allowed. 

async submitVote() {
  const { data: existingVotes } = await this.supabase
    .from('nominee_votes')
    .select('*')
    .eq('nominee_id', nomineeId)
    .eq('ip_address', ipAddress);
  if (existingVotes.length === 0) {
    await this.supabase.from('nominee_votes').insert([{ nominee_id, ip_address, rating }]);
  }
}

Warning Modal

A modal warns users about voting rules when accessing the Nominee List.

Floating Post System

In Movie Discussion, posts with recent comments float to the top based on the 'updated_at' field. 

sortedBoard() {
  return this.boardData.boardSub3.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
}

Loading Overlay

A loading screen with progress bar displays during resource loading. 

startLoading() {
  const updateProgress = () => {
    const progress = Math.min((loadedResources / totalResources) * 100, 100);
    document.getElementById("loading-bar").style.width = `${progress}%`;
  };
  requestAnimationFrame(updateProgress);
}