Movie Night

Overview and Summary

Movie Night is a web-based social media application developed collaboratively by a four-person team using agile Scrum methodologies. The app enables users to search for films, write and share reviews, receive personalized recommendations, and connect with other movie enthusiasts. Built with JavaScript and HTML, Movie Night demonstrates team coordination, agile development practices, and the ability to implement complex features in a collaborative environment.

Project Information

Key Features

• Film Search and Discovery: Users can search for movies, view details, ratings, and cast information through integrated APIs
• Review System: Users can write, edit, and delete their own reviews, with ratings from 1-5 stars
• Personalized Recommendations: The app recommends films based on user viewing history and preferences
• Social Features: Users can follow other movie enthusiasts, see their reviews, and share recommendations with friends
• Responsive Design: Fully responsive interface that works seamlessly across desktop, tablet, and mobile devices

Technologies and Skills

Implementation Highlights

Learning Outcomes

• Developed strong collaborative software development skills through daily team interactions and code reviews
• Gained practical experience with Scrum methodology and agile development practices in a real-world team setting
• Enhanced ability to manage merge conflicts and coordinate code changes across multiple team members
• Improved API integration skills by working with third-party movie databases and services
• Strengthened problem-solving abilities by debugging issues that arose during collaborative development
• Learned to communicate technical ideas effectively to team members with varying levels of experience
• Developed a deeper understanding of responsive design principles and mobile-first development
• Gained experience in creating and maintaining clean, readable code that adheres to team standards

Future Enhancements and Features

• Implement a backend database to persist user accounts, reviews, and watchlists across sessions
• Add advanced filtering options including genre, year, rating range, and director/actor
• Create a watchlist feature allowing users to save movies they want to watch
• Develop a recommendation algorithm that provides smarter, more personalized suggestions
• Add social features including user profiles, follow/unfollow functionality, and direct messaging

Code Segments

Here are some key code examples from the Movie Night project:

HTML - Movie Search Component

<section class="movie-search">
    <div class="search-container">
        <input
            type="text"
            id="searchInput"
            placeholder="Search for movies..."
            class="search-bar"
        >
        <button id="searchBtn" class="search-button">Search</button>
    </div>
    <div id="movieResults" class="movie-grid">
        <!-- Results populated by JavaScript -->
    </div>
</section>

CSS - Responsive Movie Grid

.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.movie-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

JavaScript - Search Functionality

const searchBtn = document.getElementById('searchBtn');
const searchInput = document.getElementById('searchInput');
const movieResults = document.getElementById('movieResults');

searchBtn.addEventListener('click', async () => {
    const query = searchInput.value.trim();
    if (query === '') return;

    try {
        const response = await fetch(`/api/movies/search?q=${query}`);
        const movies = await response.json();
        displayMovies(movies);
    } catch (error) {
        console.error('Search error:', error);
        movieResults.innerHTML = '<p>Error fetching movies</p>';
    }
});

function displayMovies(movies) {
    movieResults.innerHTML = movies.map(movie => `
        <div class="movie-card">
            <img src="${movie.poster}" alt="${movie.title}">
            <div class="movie-info">
                <h3>${movie.title}</h3>
                <p>Rating: ${movie.rating}/10</p>
            </div>
        </div>
    `).join('');
}