Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hi-dear-486/movie-flix-app
MovieFlix is a dynamic movie browsing application built with Next.js, leveraging Redux Toolkit for state management and Firebase for data storage. The app features infinite scrolling to enhance user experience, allowing seamless browsing of movies without interruptions.
https://github.com/hi-dear-486/movie-flix-app
automatic-updates-on-refresh bestpractice data-fetching-from-api dynamic-routing firebase-integration infinite-scroll nextjs redux-toolkit sass
Last synced: 19 days ago
JSON representation
MovieFlix is a dynamic movie browsing application built with Next.js, leveraging Redux Toolkit for state management and Firebase for data storage. The app features infinite scrolling to enhance user experience, allowing seamless browsing of movies without interruptions.
- Host: GitHub
- URL: https://github.com/hi-dear-486/movie-flix-app
- Owner: Hi-Dear-486
- Created: 2024-10-11T21:37:45.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-10-27T19:55:11.000Z (2 months ago)
- Last Synced: 2024-11-05T13:36:11.671Z (2 months ago)
- Topics: automatic-updates-on-refresh, bestpractice, data-fetching-from-api, dynamic-routing, firebase-integration, infinite-scroll, nextjs, redux-toolkit, sass
- Language: JavaScript
- Homepage:
- Size: 657 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Movie flix App
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🕸️ [Snippets (Code to Copy)](#snippets)
6. 🔗 [Assets](#links)
7. 🚀 [More](#more)
MovieFlix is a dynamic movie browsing application built with Next.js, leveraging Redux Toolkit for state management and Firebase for data storage. The app features infinite scrolling to enhance user experience, allowing seamless browsing of movies without interruptions
If you're getting started and need assistance or face any bugs, join our active Discord community with over **34k+** members. It's a place where people help each other out.
- Next.js
- Firebase
- JavaScript
- TailwindCSS
- ShadCN
## 🔋 Features
👉 **Movie Listings**: Display a list of movies with details like title, poster, release year, rating, and genre.
👉 **Trailer Display**: When a user clicks on a movie, a modal or separate section should show the movie trailer.
👉 **Skeleton Loading**: Implement skeleton loading screens (placeholders) while the movie data is being fetched.
👉 **Complete Responsiveness**: The application works seamlessly on all device types and screen sizes.
👉 **File Upload Using Firebase Storage**: Users can upload and store files securely within the app using firebase storage services.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/Hi-Dear-486/Movie-flix-App.git
cd Movie-flix-App
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env.local` in the root of your project and add the following content:
```env
#Firebase
NEXT_PUBLIC_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID
```
Replace the placeholder values with your actual Firebase credentials. You can obtain these credentials by signing up on the [Firebase website (https://firebase.google.com/).
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
## 🕸️ Snippets
tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
};
```
src/app/globals.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ========================================== TAILWIND STYLES */
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 500;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
--black: #04152d;
--black2: #041226;
--black3: #020c1b;
--black-lighter: #1c4b91;
--black-light: #173d77;
--pink: #da2f68;
--orange: #f89e00;
--gradient: linear-gradient(98.37deg, #f89e00 0.99%, #da2f68 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--black);
}
::-webkit-scrollbar {
display: none;
}
.skeleton {
position: relative;
overflow: hidden;
background-color: #0a2955;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(#193763, 0) 0,
rgba(#193763, 0.2) 20%,
rgba(#193763, 0.5) 60%,
rgba(#193763, 0)
);
animation: shimmer 2s infinite;
content: "";
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
}```
src/utils/page.js
```javascript
"use client ";
import axios from "axios";
// this url base key when we will search then it will be provide BASE_URL
// search example api request
const BASE_URL = "https://api.themoviedb.org/3";
const TMDB_TOKEN =
"eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmNzI0MzkxZGQ2ZjEzMjIxZDZhMzZkYmQwOGUwYTk5ZCIsInN1YiI6IjY1ZTc0Mjk1NTY4NDYzMDE4NmE4ZmYyNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.jIEuSlvLAODr3bGtkU-vWyvuOPQFqwv3g4fgCA4h6pc";
const headers = {
// dont forget space in 'bearer '
Authorization: "bearer " + TMDB_TOKEN,
};
// fetch data from api
export const fetchDatafromApi = async (url, params) => {
try {
const { data } = await axios.get(BASE_URL + url, {
headers,
params,
});
return data;
} catch (error) {
return error;
}
};
```
src/store/Homeslice.js
```javascript
"use client";
import { createSlice } from "@reduxjs/toolkit";
const Homeslice = createSlice({
name: "counter",
initialState: {
url: {},
genres: {},
},
reducers: {
getApiConfiguration: (state, action) => {
state.url = action.payload;
},
getGenres: (state, action) => {
state.genres = action.payload;
},
},
});
export const { getApiConfiguration, getGenres } = Homeslice.actions;
export default Homeslice.reducer;
```
src/hooks/page.js
```javascript
import { useEffect, useState } from "react";
import { fetchDatafromApi } from "@/utils/page";
const useFetch = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
setLoading("loading...");
setData(null);
setError(null);
fetchDatafromApi(url)
.then((res) => {
setLoading(false);
setData(res);
})
.catch((err) => {
setLoading(false);
setError("Something went wrong!");
});
}, [url]);
return { data, loading, error };
};
export default useFetch;
```
## 🔗 Assets
Public assets used in the project can be found [here](https://github.com/Hi-Dear-486/Movie-flix-App/tree/master/public/assets)
## 🚀 More
**Advance your skills with Next.js**
Enjoyed creating this project? Dive deeper for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
#