Initial Commit

PrathameshDhande22 · Nov 28, 2023 · e817713 · e817713
commit e817713
Show file tree

Hide file tree

Showing 48 changed files with 6,181 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.env
diff --git a/Images/img1.png b/Images/img1.png
diff --git a/README.md b/README.md
@@ -0,0 +1,40 @@
+# Film Fiesta
+
+![TypeScript](https://img.shields.io/badge/-TypeScript-007ACC?style=for-the-badge&logo=typescript&color=blue&logoColor=white)
+![React](https://img.shields.io/badge/-React-61DAFB?style=for-the-badge&logo=react&logoColor=white&color=blue)
+![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
+![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=blue&color=black)
+![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)
+![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)
+
+Film Fiesta is a movie information web app that fetches data from The Movie Database (TMDB) API. It provides details on trending, upcoming, top-grossing, popular, and top-rated movies. The UI is enhanced with beautiful animations using Framer Motion, and images are rendered using React-Image library. A loading spinner powered by React-Spinner is displayed during data fetching. The project includes an infinite scroll data fetcher for a seamless user experience. This project is built with Vite, React, and TypeScript, styled with Tailwind CSS.
+
+Create your Account in [TMDB API](https://developer.themoviedb.org/reference/intro/getting-started)
+
+### How to Run Locally
+
+1. Clone the repository.
+2. Install dependencies: `npm install`.
+3. Create a `.env` file with the following details:
+
+```
+VITE_API_KEY=your_tmdb_api_key
+VITE_API_ACCESS_TOKEN=your_tmdb_api_access_token
+VITE_IMAGE_URL=https://image.tmdb.org/t/p/original
+VITE_API_URL=https://api.themoviedb.org/3
+```
+
+Replace `your_tmdb_api_key` and `your_tmdb_api_access_token` with your TMDB API key and access token.
+
+4. Run the project: `npm run dev`.
+
+
+### Screenshots
+![HomePage](./Images/img1.png)
+
+
+### License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Author : Prathamesh Dhande
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+  <title>Film Fiesta - A Web app to search your Favourite Movie</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>