UsePopcorns 🎜🍿

UsePopcorns is a React-based movie rating app where you can browse, rate, and track movies you’ve watched. 🎥✨

While this app isn’t biotech-related (yet 👀), I decided to start with something fun and universal—movies! 🍿 Because, let’s face it, whether you’re decoding DNA or debugging JavaScript, we all need a little Scarface or Titanic moment now and then.

But hey, I’m crossing my fingers 🤞 that my next project will mix biotech and software development (think genes meet JavaScript 🧬💻). For now, this project helps me build my frontend skills and collect as much feedback as possible—so don’t hold back!

Learning in public is scary, but it’s the best way to grow. So here I am, sharing this work-in-progress, every line of code representing a step toward professionalism (and maybe, world domination... kidding! 😅).

Feel free to explore, break things, or drop feedback. I welcome collaboration, ideas, or even movie recommendations (because popcorn without movies is just sad 💔).

---

🛠️ Technologies Used

• React 18 (Functional Components + Hooks)
• JavaScript (ES6+)
• Custom Hooks (useMovies, useKey, useLocalStorageState)
• CSS with custom properties, glassmorphism & neon glow effects
• Google Fonts — Orbitron (headings) + Exo 2 (body)
• OMDb API — movie search and detail data
• Webpack (via react-scripts)
• Node.js & npm (dependency management)

---

🚀 Getting Started

These steps will help you set up and run the project locally.

---

Prerequisites

Make sure you have:

• Node.js (v16+): Download from nodejs.org
• npm (comes with Node.js)
• Git: Download from git-scm.com

Check versions with:

node -v
npm -v
git --version

---

Setup Instructions

1. Clone the repository:

git clone https://github.com/Misko22/usepopcorns.git
cd usepopcorns

2. Install dependencies:

npm install

3. Add your OMDb API key:

Create a .env file in the root of the project:

REACT_APP_OMDB_KEY=your_api_key_here

Get a free key at omdbapi.com.

4. Start the development server:

npm start

5. Open your browser at:

http://localhost:3000

Enjoy UsePopcorns in action! 🍿

---

📸 Screenshots

Here’s a sneak peek of the app in action:
Searching for "Scarface" and managing the watchlist.

---

✨ Recent Updates

• Futuristic UI overhaul — deep space background, neon cyan/purple glow, glassmorphism panels, Orbitron + Exo 2 fonts
• Component refactor — App.js split into NavBar, MovieList, MovieDetails, WatchedList under src/components/
• API key secured — moved to .env (REACT_APP_OMDB_KEY), removed hardcoded keys
• Search debounced — 300ms delay to reduce unnecessary API calls
• Search auto-focuses on page load and hints the 3-character minimum
• Error handling in movie details — shows an error message if the detail fetch fails
• Runtime crash fix — guards against OMDb returning "N/A" for runtime
• Empty watched list state — shows a friendly message instead of blank space
• Cleaner delete button — now shows × with a neon red glow

---

🗓️ Roadmap / Future Enhancements

• Enhance mobile responsiveness for all devices
• Add user authentication for personalized watchlists
• Switch to TMDb API for richer metadata (trailers, cast photos)
• Add sort & filter for the watched list
• And maybe… just maybe… a biotech dashboard in the next project 🧬😉

---

🙌 Acknowledgements

Special thanks to:

• Coffee ☕️
• YouTube tutorials 🎥
• Stack Overflow (our unofficial co-pilot)
• And my biotech roots for teaching me patience (because DNA sequencing takes longer than waiting for npm install! 😅)

This project is part of my journey blending biotechnology and software development. Currently, I’m studying Computer Programming at Seneca Polytechnic (Toronto, Canada) and bridging science with code one project at a time!

---