https://github.com/mid9coward/moodflix-react
Dive straight into React—from basic JSX to advanced hooks—and build a real, modern app
https://github.com/mid9coward/moodflix-react
appwrite reactjs tailwindcss
Last synced: 4 months ago
JSON representation
Dive straight into React—from basic JSX to advanced hooks—and build a real, modern app
- Host: GitHub
- URL: https://github.com/mid9coward/moodflix-react
- Owner: mid9coward
- Created: 2025-02-21T03:48:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-21T05:50:28.000Z (over 1 year ago)
- Last Synced: 2025-09-07T07:36:16.821Z (10 months ago)
- Topics: appwrite, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://moodflix-react.netlify.app/
- Size: 2.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A Movie Application
## 📋 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)
Built with React.js for the user interface, Appwrite for the Trending Movies Algorithm, and styled with TailwindCSS, Moodflix is a website project designed to help beginners get started with learning React.js. The platform offers a sleek and modern experience for browsing and discovering movies.
- React.js
- Appwrite
- Tailwind CSS
## 🔋 Features
👉 **Browse All Movies**: Explore a wide range of movies available on the platform.
👉 **Search Movies**: Easily search for specific movies using a search function.
👉 **Trending Movies Algorithm**: Displays trending movies based on a dynamic algorithm.
👉 **Modern UI/UX**: A sleek and user-friendly interface designed for a great experience.
👉 **Responsiveness**: Fully responsive design that works seamlessly across devices.
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/mid9coward/moodflix-react.git
cd moodflix-react
```
**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
VITE_IMDB_API_KEY=
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_COLLECTION_ID=
```
Replace the placeholder values with your actual **[TheMovieDatabase API](https://developer.themoviedb.org/reference/intro/getting-started)** and **[Appwrite](https://apwr.dev/JSM050)** credentials. You can obtain these credentials by signing up on the [TheMovieDatabase](https://developer.themoviedb.org/reference/intro/getting-started) and creating a new project on the [Appwrite](https://apwr.dev/JSM050)
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## 🕸️ Snippets
index.css
```css
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import "tailwindcss";
@theme {
--color-primary: #030014;
--color-light-100: #cecefb;
--color-light-200: #a8b5db;
--color-gray-100: #9ca4ab;
--color-dark-100: #0f0d23;
--font-dm-sans: DM Sans, sans-serif;
--breakpoint-xs: 480px;
--background-image-hero-pattern: url("/hero-bg.png");
}
@layer base {
body {
font-family: "DM Sans", serif;
font-optical-sizing: auto;
background: #030014;
}
h1 {
@apply mx-auto max-w-4xl text-center text-5xl font-bold leading-tight tracking-[-1%] text-white sm:text-[64px] sm:leading-[76px];
}
h2 {
@apply text-2xl font-bold text-white sm:text-3xl;
}
main {
@apply min-h-screen relative bg-primary;
}
header {
@apply sm:mt-10 mt-5;
}
header img {
@apply w-full max-w-lg h-auto object-contain mx-auto drop-shadow-md;
}
}
@layer components {
.pattern {
@apply bg-hero-pattern w-screen h-screen bg-center bg-cover absolute z-0;
}
.wrapper {
@apply px-5 py-12 xs:p-10 max-w-7xl mx-auto flex flex-col relative z-10;
}
.trending {
@apply mt-20;
& ul {
@apply flex flex-row overflow-y-auto gap-5 -mt-10 w-full hide-scrollbar;
}
& ul li {
@apply min-w-[230px] flex flex-row items-center;
}
& ul li p {
@apply fancy-text mt-[22px] text-nowrap;
}
& ul li img {
@apply w-[127px] h-[163px] rounded-lg object-cover -ml-3.5;
}
}
.search {
@apply w-full bg-light-100/5 px-4 py-3 rounded-lg mt-10 max-w-3xl mx-auto;
& div {
@apply relative flex items-center;
}
& img {
@apply absolute left-2 h-5 w-5;
}
& input {
@apply w-full bg-transparent py-2 sm:pr-10 pl-10 text-base text-gray-200 placeholder-light-200 outline-hidden;
}
}
.all-movies {
@apply space-y-9;
& ul {
@apply grid grid-cols-1 gap-5 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;
}
}
.movie-card {
@apply bg-dark-100 p-5 rounded-2xl shadow-inner shadow-light-100/10;
& img {
@apply rounded-lg h-auto w-full;
}
& h3 {
@apply text-white font-bold text-base line-clamp-1;
}
& .content {
@apply mt-2 flex flex-row items-center flex-wrap gap-2;
}
& .rating {
@apply flex flex-row items-center gap-1;
}
& .rating img {
@apply size-4 object-contain;
}
& .rating p {
@apply font-bold text-base text-white;
}
& .content span {
@apply text-sm text-gray-100;
}
& .content .lang {
@apply capitalize text-gray-100 font-medium text-base;
}
& .content .year {
@apply text-gray-100 font-medium text-base;
}
}
}
@utility text-gradient {
@apply bg-linear-to-r from-[#D6C7FF] to-[#AB8BFF] bg-clip-text text-transparent;
}
@utility fancy-text {
-webkit-text-stroke: 5px rgba(206, 206, 251, 0.5);
font-size: 190px;
font-family: "Bebas Neue", sans-serif;
}
@utility hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
```
## 🔗 Assets
Public assets used in the project can be found [here](https://drive.google.com/file/d/1v_r4sFD8Veuj3TBEbNUjWdzLn-upaqwt/view)