Real-Time Search
Search updates instantly as users type, making horror and thriller movie discovery fast and frictionless.
DarkFrame
DarkFrame is a full-stack movie discovery app for horror and thriller films, built with React on top of a custom Node/Express REST API. Users can search movies in real time, create an account, log in securely, manage a personalized favorites list, and update their profile data across sessions.
React
Node.js
Express
MongoDB
React Router
JWT
Core Features
Fast search and personalized movie libraries.
JWT Authentication
Users can register, log in, and access protected views through secure JWT-based authentication and client-side route guarding.
Persistent Favorites & Profile Data
Favorite movies and profile changes are stored in the database, creating a personalized experience across sessions.
Movie details & Metadata
Each movie includes genre, director, description, and image data, giving users more context while exploring the collection.
API Driven Frontend
Movie data, user accounts, authentication, and favorites are all connected to a REST API, linking the interface directly to backend logic.
Reusable Component Structure
The interface is built from reusable React components, making the application easier to maintain and extend.
Technical approach
Architecture and Stack
DarkFrame is built as a single-page application with a clear separation between frontend and backend. The React client handles the interface, routing, and user interactions, while all data is loaded from a REST API. This keeps the app fast and responsive, with updates happening instantly without full page reloads.
On the backend, the API is structured into routes and data models to keep the codebase easy to extend. MongoDB stores user and movie data, while JWT authentication is used to securely manage user sessions.
Frontend
React
React Router
Bootstrap
Parcel
Backend & API
Node.js
Express
MongoDB Atlas
Mongoose
REST API
Authentication & Security
JWT
Passport
express-validator
Tools & Deployment
Netlify
Render
Postman
GitHub
dotenv
CORS / Morgan
What I learned
Takeaways
Full-Stack Integration
Building both frontend and backend gave me a clearer understanding of how interface decisions, API design, and database updates work together.
Authentication & User Sessions
Implementing JWT authentication helped me understand how protected routes, validation, and user-specific data need to work together across the stack.
Structuring for Maintainability
Working on both sides of the application reinforced the importance of clear structure and separation of concerns when building features that can scale.