Full-Stack-Movie-Application

KO | EN

gitlite — search

#javascript #python #android #linux #docker #macos #windows #awesome #cli #kubernetes #vue #awesome-list #security #open-source

Full-Stack-Movie-Application

(★ 118)

Full Stack Movie Application with NEXT.JS 13!(Next.js 13, mongodb, node js, NextAuth.js v4, Tailwind CSS, framer-motion, TMDB Api, Google Authentication, primary information about a movies, Users can Add Bookmark in favorite actors and movies)

Full-Stack-Movie-Application 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1>Full Stack Movie Application with NEXT.JS 13!</h1>

<p>
Full Stack Movie Application with NEXT.JS 13!(Next.js 13, mongodb, node js, NextAuth.js v4, Tailwind CSS, framer-motion, TMDB Api, Google Authentication, primary information about a movies, Users can Add Bookmark in favorite actors and movies)
  </p>

<a href="https://movie-sapp.netlify.app" target="_blank">![](https://img.shields.io/website-up-down-green-red/http/monip.org.svg)</a>
![](https://img.shields.io/badge/Maintained-Yes-indigo)
![](https://img.shields.io/github/forks/SashenJayathilaka/Full-Stack-Movie-Application.svg)
![](https://img.shields.io/github/stars/SashenJayathilaka/Full-Stack-Movie-Application.svg)
![](https://img.shields.io/github/issues/SashenJayathilaka/Full-Stack-Movie-Application)
![](https://img.shields.io/github/last-commit/SashenJayathilaka/Full-Stack-Movie-Application)

<h4>
    <a href="https://movie-sapp.netlify.app">View Demo</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/Movie-App/blob/master/README.md">Documentation</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/Movie-App/issues">Report Bug</a>
  <span> · </span>
    <a href="https://github.com/SashenJayathilaka/Movie-App/issues">Request Feature</a>
  </h4>
</div>

<br />

## :notebook_with_decorative_cover: Table of Contents

- [About the Project](#star2-about-the-project)
  - [Screenshots](#camera-screenshots)
  - [Tech Stack](#space_invader-tech-stack)
  - [Environment Variables](#key-environment-variables)
- [Getting Started](#toolbox-getting-started)
  - [Prerequisites](#bangbang-prerequisites)
  - [Installation](#gear-installation)
  - [Run Locally](#running-run-locally)
  - [Deployment](#triangular_flag_on_post-deployment)
- [Contact](#handshake-contact)

## :star2: About the Project

### :camera: Screenshots

- Application Home page & Demo

<br />

- Movie Details Page

<br />

- User Profile Page

## <a href="https://movie-sapp.netlify.app" target="_blank">LIVE DEMO 💥</a>

![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
![forthebadge](https://forthebadge.com/images/badges/for-you.svg)
![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)

### :space_invader: Tech Stack

<details>
  <summary>Client</summary>
  <ul>
    <li><a href="https://#/">Typescript</a></li>
    <li><a href="https://nextjs.org/">Next.js</a></li>
    <li><a href="https://reactjs.org/">React.js</a></li>
    <li><a href="https://tailwindcss.com/">TailwindCSS</a></li>
    <li><a href="https://www.themoviedb.org">The Movie Database (TMDB)</a></li>
  </ul>
</details>

<details>
  <summary>Server</summary>
  <ul>
    <li><a href="https://nodejs.org/en/">Node Js</a></li>
    <li><a href="https://expressjs.com/">express</a></li>
    <li><a href="https://www.mongodb.com/">mongoDB</a></li>
    <li><a href="https://railway.app/">Railway</a></li>
  </ul>
</details>

<br />

## :toolbox: Getting Started

### :bangbang: Prerequisites

- Sign up for a The Movie Database (TMDB) account <a href='https://www.themoviedb.org'>HERE</a>
- Install Node JS in your computer <a href='https://nodejs.org/en/'>HERE</a>
- Create Account mongoDB <a href='https://www.mongodb.com/'>HERE</a>
- Create Account Railway <a href='https://railway.app/'>HERE</a>
- Get Lookup APi Key <a href='https://extreme-ip-lookup.com/'>HERE</a>
- Pusher JS <a href='https://pusher.com/'>HERE</a>

### :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`

`USHER_SECRET`

### :gear: Installation

Install my-project with npm

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

```
cd my-project
```

Install dependencies

### :test_tube: Install Tailwind CSS with Next.js

#### Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.

```bash
npm install -D tailwindcss postcss autoprefixer
```

```bash
npx tailwindcss init -p
```

#### Configure your template paths

Add the paths to all of your template files in your `tailwind.config.js` file.
<br>

```ts
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

#### Add the Tailwind directives to your CSS

Add the `@tailwind` directives for each of Tailwind’s layers to your `./styles/globals.css` file.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Install dependencies

<a href="https://github.com/SashenJayathilaka/Full-Stack-Movie-Application/blob/master/package.json" target="_blank">🔶 Other Dependency Info</a>

### :running: Run Locally

Clone the project

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

```bash
cd Full-Stack-Movie-Application
```

Install dependencies
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

```bash
  npm install
```

Start the server
First, run the development server:

```bash
  npm run dev
```

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

### Learn More

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

### :triangular_flag_on_post: Deployment

To deploy this project run

##### Frontend

##### Deploy on Netlify

The easiest way to deploy your Next.js app is to use the [Netlify Platform](https://app.netlify.com/) from the creators of Next.js.

Check out our [Netlify deployment documentation](https://docs.netlify.com/) for more details.

##### Backend (server)

##### Deploy on Railway

The easiest way to deploy your server is to use the [Railway Platform](https://railway.app/) from the creators of Next.js.

Check out our [Railway deployment documentation](https://docs.railway.app/deploy/deployments) for more details.

## :handshake: Contact

Your Name - [@twitter_handle](https://twitter.com/SashenHasinduJ) - sashenjayathilaka95@gmail.com

Project Link: [https://github.com/SashenJayathilaka/Full-Stack-Movie-Application.git](https://github.com/SashenJayathilaka/Full-Stack-Movie-Application.git)

<div align="center">Don't forget to leave a star ⭐️</div>

Full-Stack-Movie-Application

Full-Stack-Movie-Application 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Full-Stack-Movie-Application

Full-Stack-Movie-Application 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README