Movie Watchlist

Welcome to the Movie Watchlist project! This application is designed to help users manage and track movies they wish to watch. It showcases a wide array of modern web development technologies and practices. I've included for you below the detailed documentation on the setup, structure, and features of this full-stack application.

Table of Contents

• Overview
• Technologies Used
• Client Side Setup
• Server Side Setup
• Running the Application
• Project Structure
• Key Features
• Contributing

Overview

The Movie Watchlist is a full-stack web application that allows users to search for movies, add them to their watchlist, and manage their movie viewing preferences. It leverages both client-side and server-side technologies to deliver a seamless user experience.

Technologies Used

Frontend

• Next.js: React framework for server-side rendering and static site generation.
• TypeScript: Superset of JavaScript that adds static types.
• TMDB API: Used for fetching movie data.

Backend

• Node.js: JavaScript runtime for building server-side applications.
• GraphQL: Query language for APIs, providing a more efficient, powerful, and flexible alternative to REST.
• Prisma: Next-generation ORM for database interaction.
• PostgreSQL: Relational database management system.

Additional Tools

• ESLint: Linting utility to ensure code quality.
• Prettier: Code formatter for consistent style.

Client Side Setup

To set up the client side of the application, follow these steps:

• Navigate to the client directory: cd client

• Install Dependencies: npm install

Configure Environment Variables:

• Create a .env.local file in the client directory and add: NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key

• Replace your_tmdb_api_key with your actual TMDB API key.

• Run the Development Server: npm run dev

The client-side application will run on http://localhost:3000.

Server Side Setup

To set up the server side of the application, follow these steps:

• Navigate to the server directory: cd server

• Install Dependencies: npm install

Configure Environment Variables:

• Create a .env file in the server directory and add:

DATABASE_URL=postgresql://user:password@localhost:5432/moviedb

• Replace user, password, and moviedb with your PostgreSQL credentials and database name.

• Set Up the Database:

npx prisma migrate dev

This will set up the database schema based on the Prisma schema defined in prisma/schema.prisma.

• Start the Server:

npm run dev

The server will run on http://localhost:4000 by default.

Running the Application

To run the fullstack application, ensure both the client and server are set up and running:

• Start the Server:

cd server
npm run dev

• Start the Client:

npm run dev

You can now access the application through the client interface, which interacts with the server-side API for data operations.

Project Structure

Client Side

• app/: Next.js pages are automatically routed based on the file structure.
• components/: Reusable React components for UI elements.
• styles/: CSS modules and global styles.
• utils/: Utilities and helper functions.

Server Side

• src/: Contains the main source code for the server.
• schema/: Defines the GraphQL schema and resolvers.
• prisma/: Prisma client setup for database interactions.

Key Features

• Watchlist Management: Users can add movies to their watchlist, mark movies as watched, and remove them as needed.
• Movie Search and Details: Utilize the TMDB API to search for movies and view detailed information, including ratings, cast, and crew.
• Responsive UI: The application is designed to be fully responsive and works seamlessly on both desktop and mobile devices.
• GraphQL API: Efficient data fetching and mutations using GraphQL.
• Database Management: Use Prisma ORM for database schema management and interactions with PostgreSQL.

Contributing

I welcome contributions to the Movie Watchlist project! Feel free to create an issue or submit a pull request if you have suggestions for improvements or new features. Please ensure your code follows the existing style and passes all tests.

• Steps to Contribute
• Fork the repository.
• Create a new branch.
• Make your changes.
• Submit a pull request.

By leveraging a wide array of modern web development technologies and adhering to best practices, the Movie Watchlist project not only delivers a functional and user-friendly application but also showcases the potential and versatility of fullstack development.