AI prompts
base on Dive straight into React—from basic JSX to advanced hooks—and build a real, modern app in this hands-on crash course! <div align="center">
<br />
<a href="https://www.youtube.com/watch?v=dCLhUialKPQ" target="_blank">
<img src="public/readme/hero.png" alt="Project Banner">
</a>
<br />
<div>
<img src="https://img.shields.io/badge/-React_JS-black?style=for-the-badge&logoColor=white&logo=react&color=61DAFB" alt="react.js" />
<img src="https://img.shields.io/badge/-Appwrite-black?style=for-the-badge&logoColor=white&logo=appwrite&color=FD366E" alt="appwrite" />
<img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" />
</div>
<h3 align="center">A Movie Application</h3>
<div align="center">
Build this project step by step with our detailed tutorial on <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b>JavaScript Mastery</b></a> YouTube. Join the JSM family!
</div>
</div>
## 📋 <a name="table">Table of Contents</a>
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)
## 🚨 Tutorial
This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b>JavaScript Mastery</b></a>.
If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
<a href="https://www.youtube.com/watch?v=dCLhUialKPQ" target="_blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/1736fca5-a031-4854-8c09-bc110e3bc16d" /></a>
## <a name="introduction">🤖 Introduction</a>
Built with React.js for the user interface, Appwrite for backend services, and styled with TailwindCSS, this Movie App lets users browse trending movies, search titles, and explore content using the TMDB API. It features a responsive layout and a sleek, modern design.
If you're getting started and need assistance or face any bugs, join our active Discord community with over **50k+** members. It's a place where people help each other out.
<a href="https://discord.com/invite/n6EdbFJ" target="_blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e" /></a>
## <a name="tech-stack">⚙️ Tech Stack</a>
- **[Appwrite](https://appwrite.io/)** is an open-source Backend-as-a-Service (BaaS) platform that provides developers with a set of APIs to manage authentication, databases, storage, and more, enabling rapid development of secure and scalable applications.
- **[React.js](https://react.dev/reference/react)** is a JavaScript library developed by Meta for building user interfaces. It allows developers to create reusable UI components that manage their own state, leading to more efficient and predictable code. React is widely used for developing single-page applications (SPAs) due to its virtual DOM that improves performance and ease of maintenance.
- **[React-use](https://github.com/streamich/react-use)** is a collection of essential React hooks that simplify common tasks like managing state, side effects, and lifecycle events, promoting cleaner and more maintainable code in React applications.
- **[Tailwind CSS](https://tailwindcss.com/)** is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing custom CSS, enabling rapid and responsive UI development.
- **[Vite](https://vite.dev/)** is a modern build tool that provides a fast development environment for frontend projects. It offers features like hot module replacement (HMR) and optimized builds, enhancing the development experience and performance.
## <a name="features">🔋 Features</a>
👉 **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
## <a name="quick-start">🤸 Quick Start</a>
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/adrianhajdin/react-movies.git
cd react-movies
```
**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_TMDB_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.
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the project.
## <a name="snippets">🕸️ Snippets</a>
<details>
<summary><code>index.css</code></summary>
```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-full 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;
}
}
```
</details>
<details>
<summary><code>components/Spinner.jsx</code></summary>
```jsx
import React from 'react'
const Spinner = () => {
return (
<div role="status">
<svg aria-hidden="true"
className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-indigo-600"
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"/>
</svg>
<span className="sr-only">Loading...</span>
</div>
)
}
export default Spinner
```
</details>
## <a name="links">🔗 Assets</a>
Assets and snippets used in the project can be found in the **[video kit](https://jsm.dev/react25-kit)**.
<a href="https://jsm.dev/react25-kit" target="_blank">
<img src="public/readme/videokit.png" alt="Video Kit Banner">
</a>
## <a name="more">🚀 More</a>
**Advance your skills with Next.js Pro Course**
Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with
detailed explanations, cool features, and exercises to boost your skills. Give it a go!
<a href="https://jsm.dev/react25-jsmpro" target="_blank">
<img src="public/readme/jsmpro.png" alt="Project Banner">
</a>", Assign "at most 3 tags" to the expected json: {"id":"13995","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"