docs(readme): update readm

README.md

@@ -1,38 +1,63 @@
-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).
+# Building a Fullstack Netflix Clone with React, NextJS, TailwindCSS & Prisma
 
-## Getting Started
+![Untitled design (1)](https://user-images.githubusercontent.com/23248726/219093382-a1874751-a2f0-4be6-8bed-3c266276b57c.png)
 
-First, run the development server:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+This is a repository for a FullStack Netflix Clone tutorial using React, NextJS, TailwindCSS & Prisma.
+
+VIDEO COMING SOON
+
+Features:
+
+- Environment, Typescript, NextJS Setup
+- MongoDB & Prisma connect, Database creation
+- Authentication with NextAuth, Google & Github Login
+- Full responsiveness on all pages
+- Cookie based authentication
+- API and Controllers creation
+- Detail-oriented effects and animations using TailwindCSS
+- React SWR data fetching
+- Zustand state management
+
+### Prerequisites
 
-Open [https://localhost:3000](https://localhost:3000) with your browser to see the result.
+**Node version 14.x**
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+### Cloning the repository
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [https://localhost:3000/api/hello](https://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+```shell
+git clone https://github.com/AntonioErdeljac/next-netflix-tutorial.git
+```
+
+### Install packages
 
-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.
+```shell
+npm i
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+### Setup .env file
 
-## Learn More
 
-To learn more about Next.js, take a look at the following resources:
+```js
+DATABASE_URL=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GITHUB_ID=
+GITHUB_SECRET=
+NEXTAUTH_JWT_SECRET=
+NEXTAUTH_SECRET=
+```
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### Start the app
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```shell
+npm run dev
+```
 
-## Deploy on Vercel
+## Available commands
 
-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.
+Running commands with npm `npm run [command]`
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+| command | description |
+| :-------------- | :--------------------------------------- |
+| `dev` | Starts a development instance of the app |

components/InfoModal.tsx

@@ -15,7 +15,7 @@ const InfoModal: React.FC<InfoModalProps> = ({ visible, onClose }) => {
  const [isVisible, setIsVisible] = useState<boolean>(!!visible);
 
  const { movieId } = useInfoModalStore();
- const { data } = useMovie(movieId);
+ const { data = {} } = useMovie(movieId);
 
  useEffect(() => {
  setIsVisible(!!visible);
@@ -59,17 +59,11 @@ const InfoModal: React.FC<InfoModalProps> = ({ visible, onClose }) => {
  New
  </p>
  <p className="text-white text-lg">
- 2023
+ {data?.duration}
  </p>
- <div className="border-[1px] border-slate-300 p-1 text-[8px] lg:text-xs text-gray-300">
- 13+
- </div>
  <p className="text-white text-lg">
- 6 episodes
+ {data?.genre}
  </p>
- <div className="border-[1px] border-slate-300 p-1 text-[6px] lg:text-[8px] text-gray-300">
- HD
- </div>
  </div>
  <p className="text-white text-lg">
  {data?.description}

components/MovieCard.tsx

@@ -79,16 +79,14 @@ const MovieCard: React.FC<MovieCardProps> = ({ data }) => {
  <ChevronDownIcon className="text-white group-hover/item:text-neutral-300 w-4 lg:w-6" />
  </div>
  </div>
+ <p className="text-green-400 font-semibold mt-4">
+ New <span className="text-white">2023</span>
+ </p>
  <div className="flex flex-row mt-4 gap-2 items-center"> 
  <p className="text-white text-[10px] lg:text-sm">{data.duration}</p>
- <div className="border-[1px] border-slate-300 p-1 text-[6px] lg:text-[8px] text-gray-300">
- HD
- </div>
  </div>
  <div className="flex flex-row items-center gap-2 mt-4 text-[8px] text-white lg:text-sm">
- <p>Witty</p>
- <p>Irrevent</p>
- <p>Sitcom</p>
+ <p>{data.genre}</p>
  </div>
  </div>
  </div>