Data Speaks

Stercy Mutuku — Fri, 29 Aug 2025 23:54:40 +0000

Data the new gold
In the current age, data surrounds us like the air we breathe. It hums silently in servers, glitters in spreadsheets, and drifts invisibly through networks. Raw data, in its chaotic abundance, is treasure to those bold enough to sail and chart its currents.

With the advent of Artificial Intelligence, Data Analytics takes on an almost prophetic quality. It has the ability to not only tell us where we have been, but to whisper where we might be headed.

From Description to Prediction
Previously, the fundamental questions that data analytics asked were: What happened? Why did it happen? This descriptive and diagnostic lenses gave quarterly reports, churn analyses, dashboards and bar charts.

Through predictive analytics, AI dares to ask, What will happen next? And through prescriptive analytics, it adds, What should we do about it? Suddenly, data is not just a record of history but a living compass, guiding us toward more informed futures. AI cleans and organizes, discerning patterns invisible to the naked eye. It learns from yesterday’s sales, today’s clicks, tomorrow’s signals in ways we cannot fully grasp.

Pattern recognition

Machine learning models forecast customer behavior with uncanny accuracy. Natural Language Processing listens to millions of voices on social media and distills them into sentiment. Real-time analytics reacts to data streams as they arrive, catching fraud in milliseconds or rerouting supply chains before disruption strikes.

This makes data a silent strategist whispering possibilities. It is therefore paramount to guard the data as quality as possible because flawed data yields dangerous illusions.

Even with the increased AI usage, the wise know that they need to keep humans in the loop. Machines predict, but humans decide. Judgment remains a uniquely human art.

The Call of the Future

The future belongs to organizations that do not merely store information, but transform it into foresight. When AI meets analytics, data ceases to be a ledger. It becomes a lens, refracting possibility, magnifying insight, and illuminating tomorrow’s path today.

So the question should be whether we should listen to our data, or we ignore its voice.

Author
Stercy Mutuku

Flickster Movies Blog

Stercy Mutuku — Thu, 24 Jul 2025 14:01:38 +0000

**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: mutukustercy93@gmail.com
LinkedIn: https://www.linkedin.com/in/stercy/
GitHub: https://github.com/stercym/

DEV Community: Stercy Mutuku

Data Speaks

Flickster Movies Blog