Skip to content

Commit 101747c

Browse files
SashenJayathilakaSashenJayathilaka
committed
🔧 Added Demo File
1 parent 2211010 commit 101747c

File tree

2 files changed

+254
-12
lines changed

2 files changed

+254
-12
lines changed

‎README.md

+254-12
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,280 @@
1+
<div align="center">
2+
3+
<img src="https://user-images.githubusercontent.com/99184393/223372256-b3feebc0-cb0b-4dd1-99a3-b4b8a978af74.png" alt="logo" width="250" height="auto" />
4+
5+
<h1>Full Stack Movie Application with NEXT.JS 13!</h1>
6+
7+
<p>
8+
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)
9+
</p>
10+
11+
<!-- Badges -->
12+
13+
<a href="https://movie-sapp.netlify.app" target="_blank">![](https://img.shields.io/website-up-down-green-red/http/monip.org.svg)</a>
14+
![](https://img.shields.io/badge/Maintained-Yes-indigo)
15+
![](https://img.shields.io/github/forks/SashenJayathilaka/Full-Stack-Movie-Application.svg)
16+
![](https://img.shields.io/github/stars/SashenJayathilaka/Full-Stack-Movie-Application.svg)
17+
![](https://img.shields.io/github/issues/SashenJayathilaka/Full-Stack-Movie-Application)
18+
![](https://img.shields.io/github/last-commit/SashenJayathilaka/Full-Stack-Movie-Application)
19+
20+
<h4>
21+
<a href="https://movie-sapp.netlify.app">View Demo</a>
22+
<span> · </span>
23+
<a href="https://github.com/SashenJayathilaka/Movie-App/blob/master/README.md">Documentation</a>
24+
<span> · </span>
25+
<a href="https://github.com/SashenJayathilaka/Movie-App/issues">Report Bug</a>
26+
<span> · </span>
27+
<a href="https://github.com/SashenJayathilaka/Movie-App/issues">Request Feature</a>
28+
</h4>
29+
</div>
30+
31+
<br />
32+
33+
<!-- Table of Contents -->
34+
35+
## :notebook_with_decorative_cover: Table of Contents
36+
37+
- [About the Project](#star2-about-the-project)
38+
- [Screenshots](#camera-screenshots)
39+
- [Tech Stack](#space_invader-tech-stack)
40+
- [Environment Variables](#key-environment-variables)
41+
- [Getting Started](#toolbox-getting-started)
42+
- [Prerequisites](#bangbang-prerequisites)
43+
- [Installation](#gear-installation)
44+
- [Run Locally](#running-run-locally)
45+
- [Deployment](#triangular_flag_on_post-deployment)
46+
- [Contact](#handshake-contact)
47+
48+
<!-- About the Project -->
49+
50+
## :star2: About the Project
51+
52+
<!-- Screenshots -->
53+
54+
### :camera: Screenshots
55+
56+
<div align="center">
57+
<a href="https://movie-sapp.netlify.app" target="_blank"><img src='./demo/ezgif-2-b23fb77da9.gif' alt='image'/></a>
58+
</div>
59+
60+
## <a href="https://movie-sapp.netlify.app" target="_blank">LIVE DEMO 💥</a>
61+
62+
![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
63+
![forthebadge](https://forthebadge.com/images/badges/for-you.svg)
64+
![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)
65+
66+
### :space_invader: Tech Stack
67+
68+
<details>
69+
<summary>Client</summary>
70+
<ul>
71+
<li><a href="https://#/">Typescript</a></li>
72+
<li><a href="https://nextjs.org/">Next.js</a></li>
73+
<li><a href="https://reactjs.org/">React.js</a></li>
74+
<li><a href="https://tailwindcss.com/">TailwindCSS</a></li>
75+
</ul>
76+
</details>
77+
78+
<!--<details>
79+
<summary>Database</summary>
80+
<ul>
81+
<li><a href="https://firebase.google.com">Firebase</a></li>
82+
</ul>
83+
</details>-->
84+
85+
<details>
86+
<summary>Api</summary>
87+
<ul>
88+
<li><a href="https://www.themoviedb.org">The Movie Database (TMDB)</a></li>
89+
</ul>
90+
</details>
91+
92+
<br />
93+
94+
<table>
95+
<tr>
96+
<td>
97+
<a href="#"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg" alt="" width="30" height="30" /></a>
98+
</td>
99+
<td>
100+
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/183096870-fdf58e59-d78c-44f4-bd1c-f9033c16d907.png" alt="Google" width="30" height="30" /></a>
101+
</td>
102+
<td>
103+
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/179383376-874f547c-4e6f-4826-850e-706b009e7e2b.png" alt="" width="30" height="30" /></a>
104+
</td>
105+
<td>
106+
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/180462270-ea4a249c-627c-4479-9431-5c3fd25454c4.png" alt="" width="30" height="30" /></a>
107+
</td>
108+
<td>
109+
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/177784603-d69e9d02-721a-4bce-b9b3-949165d2edeb.png" alt="" width="30" height="30" /></a>
110+
</td>
111+
<td>
112+
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/204170976-0e5c6e2a-2b41-483d-adbd-d5d1e40b8d15.png" alt="" width="30" height="30" /></a>
113+
</td>
114+
<td>
115+
<a href="#"><img src="https://user-images.githubusercontent.com/99184393/210160017-d4ded1e1-49d8-424d-b14c-a284856e730c.png" alt="" width="30" height="30" /></a>
116+
</td>
117+
</tr>
118+
</table>
119+
120+
## :toolbox: Getting Started
121+
122+
### :bangbang: Prerequisites
123+
124+
- Sign up for a The Movie Database (TMDB) account <a href='https://www.themoviedb.org'>HERE</a>
125+
- Install Node JS in your computer <a href='https://nodejs.org/en/'>HERE</a>
126+
127+
<!-- Env Variables -->
128+
129+
### :key: Environment Variables
130+
131+
To run this project, you will need to add the following environment variables to your .env file
132+
133+
`NEXTAUTH_URL`
134+
135+
`GOOGLE_CLIENT_ID`
136+
137+
`NEXT_PUBLIC_SECRET`
138+
139+
`NEXT_PUBLIC_BASE_URL`
140+
141+
`GOOGLE_CLIENT_SECRET`
142+
143+
`NEXT_PUBLIC_FIREBASE_APP_ID`
144+
145+
`NEXT_PUBLIC_FIREBASE_API_KEY`
146+
147+
`NEXT_PUBLIC_FIREBASE_PROJECT_ID`
148+
149+
`NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`
150+
151+
`NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`
152+
153+
`NEXT_PUBLIC_FIREBASE_MESSAGING_SET`
154+
155+
### :gear: Installation
156+
157+
Install my-project with npm
158+
159+
```bash
160+
npx create-next-app@latest my-project --typescript
161+
```
162+
163+
```
164+
cd my-project
165+
```
166+
167+
Install dependencies
168+
169+
### :test_tube: Install Tailwind CSS with Next.js
170+
171+
#### Install Tailwind CSS
172+
173+
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.
174+
175+
```bash
176+
npm install -D tailwindcss postcss autoprefixer
177+
```
178+
179+
```bash
180+
npx tailwindcss init -p
181+
```
182+
183+
#### Configure your template paths
184+
185+
Add the paths to all of your template files in your `tailwind.config.js` file.
186+
<br>
187+
188+
```js
189+
module.exports = {
190+
content: [
191+
"./pages/**/*.{js,ts,jsx,tsx}",
192+
"./components/**/*.{js,ts,jsx,tsx}",
193+
],
194+
theme: {
195+
extend: {},
196+
},
197+
plugins: [],
198+
};
199+
```
200+
201+
#### Add the Tailwind directives to your CSS
202+
203+
Add the `@tailwind` directives for each of Tailwind’s layers to your `./styles/globals.css` file.
204+
205+
```css
206+
@tailwind base;
207+
@tailwind components;
208+
@tailwind utilities;
209+
```
210+
211+
Install dependencies
212+
213+
<a href="https://github.com/SashenJayathilaka/NETFLIX-Clone/blob/master/package.json" target="_blank">🔶 Other Dependency Info</a>
214+
215+
<!-- Run Locally -->
216+
217+
### :running: Run Locally
218+
219+
Clone the project
220+
221+
```bash
222+
git clone https://github.com/SashenJayathilaka/NETFLIX-Clone.git
223+
```
224+
225+
```bash
226+
cd NETFLIX-Clone
227+
```
228+
229+
Install dependencies
1230
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).
2231

3-
## Getting Started
232+
```bash
233+
npm install
234+
```
4235

236+
Start the server
5237
First, run the development server:
6238

7239
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
240+
npm run dev
13241
```
14242

243+
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).
244+
15245
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16246

17-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
247+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
18248

19249
[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`.
20250

21251
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.
22252

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

25-
## Learn More
257+
<!-- Deployment -->
26258

27-
To learn more about Next.js, take a look at the following resources:
259+
### :triangular_flag_on_post: Deployment
28260

29-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
261+
To deploy this project run
31262

32-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
263+
##### Deploy on Vercel
33264

34265
## Deploy on Vercel
35266

36267
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37268

38269
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
270+
271+
## :handshake: Contact
272+
273+
Your Name - [@twitter_handle](https://twitter.com/SashenHasinduJ) - [email protected]
274+
275+
Project Link: [https://github.com/SashenJayathilaka/NETFLIX-Clone.git](https://github.com/SashenJayathilaka/NETFLIX-Clone.git)
276+
277+
<hr />
278+
<br />
279+
280+
<div align="center">Don't forget to leave a star ⭐️</div>

‎demo/ezgif-2-b23fb77da9.gif

23.2 MB
Loading

0 commit comments

Comments
 (0)