Welcome to your go-to guide for building a Full Stack Movie Application using Next.js 13! With powerful tools at your disposal, including MongoDB, Node.js, NextAuth.js v4, Tailwind CSS, Framer Motion, and the TMDB API, you’ll be able to create an interactive movie application where users can explore movie details, add bookmarks of their favorite actors and movies, and authenticate through Google.

:notebook_with_decorative_cover: Table of Contents

• About the Project
• Screenshots
• Tech Stack
• Environment Variables
• Getting Started
• Prerequisites
• Installation
• Run Locally
• Deployment
• Contact

:star2: About the Project

This project is a full-fledged movie application that allows users to browse movies, view details, and bookmark their favorites. The clean and modern UI is built with Tailwind CSS, ensuring a responsive design.

:camera: Screenshots

Check out the following glimpses of the application:

:space_invader: Tech Stack

Client

• TypeScript
• Next.js
• React.js
• TailwindCSS
• The Movie Database (TMDB)

Servers

• Node.js
• Express
• MongoDB
• Railway

:toolbox: Getting Started

:bangbang: Prerequisites

• Sign up for a The Movie Database (TMDB) account HERE.
• Install Node JS on your computer HERE.
• Create an account with MongoDB HERE.
• Create an account with Railway HERE.

:key: Environment Variables

To run this project, you will need to add the following environment variables to your .env file:

• Frontend
  • NEXT_PUBLIC_API_KEY
  • GOOGLE_CLIENT_ID
  • GOOGLE_CLIENT_SECRET
  • NEXT_PUBLIC_SECRET
  • NEXTAUTH_URL
  • NEXT_PUBLIC_SERVER_URL
  • NEXT_PUBLIC_LOOKUP_KEY
• Server
  • MONGODB_URL
  • PUSHER_APPID
  • PUSHER_KEY
  • PUSHER_SECRET

:gear: Installation

To install the application, run these commands:

npx create-next-app@latest my-project --typescript

cd my-project

Next, install the necessary dependencies.

:test_tube: Install Tailwind CSS with Next.js

Install Tailwind CSS and its peer dependencies via npm, and then run the init command to generate the configuration files.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Then, configure your template paths in the tailwind.config.js file.

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Lastly, add the Tailwind directives to your .styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

:running: Run Locally

Clone the project using:

git clone https://github.com/SashenJayathilaka/Full-Stack-Movie-Application.git

cd Full-Stack-Movie-Application

Install the dependencies:

npm install

Start the server:

npm run dev

Open http://localhost:3000 in your browser to see the application in action!

Learn More

This project uses next/font for automatic font optimization.

:triangular_flag_on_post: Deployment

To deploy this project:

Frontend

The easiest way to deploy your Next.js app is to use the Netlify Platform. Check out the Netlify deployment documentation for more details.

Backend (server)

For backend deployment, consider using the Railway Platform. Check out the Railway deployment documentation for more details.

:handshake: Contact

For inquiries or collaborations, reach out to:

• Your Name – @twitter_handle
• Email: sashenjayathilaka95@gmail.com
• Project Link: GitHub Repository

Troubleshooting

If you encounter any issues during installation or while running the application, consider the following troubleshooting steps:

• Ensure all environment variables are correctly set up in your .env file.
• Confirm that all necessary dependencies are installed without any errors.
• Try restarting your development server to see if that resolves any issues.
• Check the browser console for any error messages that can help identify the problem.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.