Flickster Movies Blog

**Building a Full-Featured Movie App with React: A Developer’s Journey
**As a developer passionate about crafting user-focused applications, I recently embarked on an exciting journey to build a full-fledged Movie App using React. This project combines everything from search and sorting features to user authentication and favorite tracking—all wrapped in a clean and responsive UI. In this post, I’ll walk you through the process, design decisions, challenges faced, and how I implemented the major features.

**Project Overview
**Flickster Movie App is a React-based frontend project that allows users to explore movies, rate them, leave comments, and manage personal favorites and watchlists. It emphasizes:

• A modern UI with dark/light mode
• Seamless interactivity using React state and events
• Local backend simulation via json-server for storing user profiles and favorites

The app is divided into several components for scalability and maintainability such as;

**Navigation Bar
**At the top of the app is a Navbar that provides easy access to major sections:

• Home
• Favorite Movies
• Watchlist
• Top Rated
• New Releases
• Login / Register

Each link is managed using react-router-dom, allowing smooth transitions without reloading the page.

The navigation bar is responsive and adapts gracefully to mobile views.

Search Bar Functionality
One of the most useful tools in the app is the Search Bar, which enables users to quickly find movies by:

• Title
• Writer
• Actor
• Year of release This is implemented using useState to capture the search input and filter() to dynamically filter the movie array as users type.

**Movie Card Component
**Each movie is displayed via a MovieCard component which showcases:

• Poster image
• Title
• Writer
• Year of release
• Country
• Genre
• Actors
• Director
• Type (e.g., series or movie)
• Plot
• Additional images (if any)

This modular component helped keep code organized and reusable.

**Sorting Component
**Users can sort movies using dropdown filters:

• Year of Release
• Runtime (Under or over 1 hour)
• Rating

This feature uses state management and sort() to reorder the movie list accordingly. It helps users quickly find what they’re looking for based on personal preferences.

User Rating Component
The app includes an interactive star rating feature. Users can rate movies from 1 to 5 stars. A global average rating is calculated and displayed per movie.
{[1, 2, 3, 4, 5].map(star => (
key={star}
onClick={() => handleRating(star)}
color={star <= currentRating ? "gold" : "gray"}
/>
))}
All ratings are stored and used to compute an average rating per movie.

**Light / Dark Mode Toggle
**The dark/light mode toggle is implemented via a simple switch that toggles a boolean state isDarkMode.

const [isDarkMode, setIsDarkMode] = useState(false);

The app’s color scheme changes based on this state. Conditional classes/styles apply either dark or light themes to major containers. This enhances accessibility and user preference customization.

User Profile & Authentication
Users can create accounts and log in using a Register/Login form with the following fields:

• Full Name
• Email
• Phone Number
• Password

Form validation ensures valid inputs, including strong passwords and properly formatted emails. On successful login, users are redirected to the Home page.
if (user && passwordMatches) {
navigate("/");
}
Passwords and emails are validated with regex patterns, and error messages guide users in case of invalid inputs.

Favorite Movies
A heart icon is displayed on each Movie Card. Users can click it to mark a movie as a favorite. The icon color toggles red or gray depending on whether it's selected or not.

{isFavorite ? : }
Each click updates the state and favorite count.

Favorite Count Component
To add social proof and interactivity, the app displays how many users have favorited each movie. The count is updated dynamically based on the number of favorites submitted.

{favoriteCount} people love this movie

This motivates users to explore popular or trending titles.

**User Comments
**Users can leave comments on each movie.

Comments are stored in the db.json file via json-server.

Tools & Libraries Used
The tools used for the development of the App are;

• React – Core UI framework
• React Router DOM – Page routing
• React Icons – For interactive star and heart icons
• json-server – Simulated backend
• CSS Flex/Grid – Layout styling
• useState/useEffect – State and side-effect management

**Challenges Faced
**While building this app, a few challenges popped up:

• Handling async data from json-server – Had to carefully manage useEffect() to fetch and update data.
• Login state persistence – Used local state and JSON storage to temporarily manage sessions.
• Making the UI responsive and clean – Ensured movie cards wrapped horizontally and looked clean across screen sizes.
• Managing group conflicts
• Making

Conclusion
This Movie App project has been a fantastic learning experience. It brought together React fundamentals, state management, user interactivity, and UX design.

Thanks for reading! Let me know your thoughts, and feel free to share your movie project journey too!

For any inquiries or feedback:

Name: Stercy Mutuku
Email: [e-mail]
LinkedIn: https://www.linkedin.com/in/stercy/
GitHub: https://github.com/stercym/