Skip to main content
ScreenPulse Hero Light

​
Welcome to ScreenPulse

ScreenPulse is a modern Angular application designed to help you discover, organize, and manage your favorite movies, series, and video games. Built with Angular 16 and powered by the OMDB API, ScreenPulse provides a seamless experience for media enthusiasts.

Quick Start

Get up and running with ScreenPulse in under 5 minutes

Installation

Complete installation guide for local development

Components

Explore the component library and architecture

API Reference

Comprehensive API documentation for services and models

​
Key Features

Secure user registration and login system with JWT token-based authentication. Sessions are managed securely with HTTP interceptors.
Save your favorite media items to personal collections. Add custom notes and reviews, organize by type, and sort by various criteria.
View comprehensive details including ratings, cast, plot summaries, and embedded trailers for movies and series.
Fully responsive interface built with Angular Material and ng-bootstrap. Optimized for devices from 320px to 1920px+.
Feature-based modules with lazy loading, RxJS reactive patterns, and component-driven development with Storybook.

​
Tech Stack

ScreenPulse is built with modern web technologies and best practices:
  • Framework: Angular 16.2.12 with TypeScript 5.1
  • UI Libraries: Angular Material, ng-bootstrap
  • State Management: RxJS for reactive data streams
  • API Integration: Custom backend API (Node.js/Express) + OMDB API
  • Database: MongoDB Atlas for user data and favorites
  • Documentation: Storybook for component documentation
  • Testing: Jasmine and Karma for unit testing
  • Deployment: Firebase Hosting (frontend) + Render (backend)

​
Live Demo

Try ScreenPulse

Experience the live application deployed on Firebase

​
Architecture Overview

ScreenPulse follows Angular best practices with a modular architecture: 
src/app/
├── core/           # Singleton services, guards, interceptors
├── layout/         # App shell components (navbar, footer)
├── pages/          # Feature modules (search, favorites, auth)
├── shared/         # Reusable components, models, utilities
└── app.module.ts   # Root module

Core Concepts

Learn about the application architecture

Module Structure

Understand the module organization

Routing

Explore the routing configuration

​
Getting Help

GitHub Repository

View source code and report issues

Storybook

Interactive component documentation

​
Next Steps

Ready to get started? Follow our quickstart guide to set up your development environment and start exploring ScreenPulse.

Get Started

Follow the quickstart guide to install and run ScreenPulse locally

Build docs developers (and LLMs) love

Get started for freeTalk to us