🍿 Popcorn

Popcorn is a movie search and rating web app built with React.
You can search for your favorite movies, see details, and give your own rating — all stored locally in your browser.

🚀 Features

• 🔍 Search Movies — Find movies quickly using an external API or local data.
• ⭐ Rate Movies — Add your personal rating for any movie.
• 💾 Persistent Storage — Your ratings are saved with localStorage, so they stay even after you reload.

🧠 What I Learned

While building Popcorn, I learned how to:

• Structure a React app into reusable and composable components.
• Use React hooks effectively (useEffect, useRef, custom hooks).
• Store and retrieve user data using localStorage.
• Apply consistent visual design choices (colors, typography, and layout).

🛠️ Tech Stack

• React
• JavaScript (ES6+)
• CSS / Styled Components
• localStorage API

💻 Getting Started

1. Clone the repository

git clone https://github.com/your-username/popcorn.git
cd popcorn

2. Install dependencies

npm install

3. Start the development server

npm run start

Then open http://localhost:3000 to view the app in your browser.

🧩 Folder Structure

popcorn/
├── src/
│   ├── components/     # Reusable UI components
│   ├── hooks/          # Custom React hooks
│   ├── pages/          # Page-level components
│   ├── App.js          # Root component
│   ├── index.js        # Entry point
│   └── styles/         # Global styles, colors, fonts
└── public/
    └── index.html

🌈 UI Highlights

• Modern and minimal interface
• Thoughtful typography and color harmony

📸 Screenshots

🙋‍♂️ Author

Long Pham

Feel free to reach out or fork the project for your own practice.

📜 License

This project is open source and available under the MIT License.