📄 Add LEARN

Author: SashenJayathilaka

LEARN.md

@@ -0,0 +1,306 @@
+<div align="center">
+
+  <img src="https://user-images.githubusercontent.com/99184393/223374639-56c53106-86d4-4a36-be0b-6507ce869119.png" alt="logo" width="200" height="auto" />
+
+  <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>
+
+<!-- Badges -->
+
+<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 />
+
+<!-- Table of Contents -->
+
+## :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)
+
+<!-- About the Project -->
+
+## :star2: About the Project
+
+<!-- Screenshots -->
+
+### :camera: Screenshots
+
+- Application Home page & Demo
+
+<div align="center">
+<a href="https://movie-sapp.netlify.app" target="_blank"><img  src='./demo/ezgif-2-b23fb77da9.gif' alt='image'/></a>
+</div>
+
+<br />
+
+- Movie Details Page
+
+<div align="center">
+<a href="https://movie-sapp.netlify.app" target="_blank"><img  src='https://user-images.githubusercontent.com/99184393/223381897-a4e2a6bc-dda5-4c94-a79f-b12708dc57eb.png' alt='image' width='800'/></a>
+</div>
+
+<br />
+
+- User Profile Page
+
+<div align="center">
+<a href="https://movie-sapp.netlify.app" target="_blank"><img  src='https://user-images.githubusercontent.com/99184393/223382847-4e1000b5-1ae4-4ffd-a521-3ed95f616f38.png' alt='image' width='800'/></a>
+</div>
+
+## <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 />
+
+<table>
+    <tr>
+        <td>
+<a href="#"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg" alt="" width="30" height="30" /></a>
+        </td>
+                        <td>
+<a href="#"><img src="https://user-images.githubusercontent.com/99184393/183096870-fdf58e59-d78c-44f4-bd1c-f9033c16d907.png" alt="Google" width="30" height="30" /></a>
+        </td>
+                        <td>
+<a href="#"><img src="https://user-images.githubusercontent.com/99184393/179383376-874f547c-4e6f-4826-850e-706b009e7e2b.png" alt="" width="30" height="30" /></a>
+        </td>
+                        <td>
+<a href="#"><img src="https://user-images.githubusercontent.com/99184393/180462270-ea4a249c-627c-4479-9431-5c3fd25454c4.png" alt="" width="30" height="30" /></a>
+        </td>
+                                <td>
+<a href="#"><img src="https://user-images.githubusercontent.com/99184393/181918664-569af962-756c-438c-b350-294f042e6f61.png" alt="" width="30" height="30" /></a>
+        </td>
+                                            <td>
+<a href="#"><img src="https://user-images.githubusercontent.com/99184393/204170976-0e5c6e2a-2b41-483d-adbd-d5d1e40b8d15.png" alt="" width="30" height="30" /></a>
+        </td>                                              
+    </tr>
+</table>
+
+## :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>
+
+<!-- Env Variables -->
+
+### :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>
+
+<!-- Run Locally -->
+
+### :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.
+
+<!-- Deployment -->
+
+### :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) - [email protected]
+
+Project Link: [https://github.com/SashenJayathilaka/Full-Stack-Movie-Application.git](https://github.com/SashenJayathilaka/Full-Stack-Movie-Application.git)
+
+<hr />
+<br />
+
+<div align="center">Don't forget to leave a star ⭐️</div>