Skip to main content

​
Get Started in Minutes

This guide will have you running ScreenPulse locally in under 5 minutes. You’ll clone the repository, install dependencies, and launch the development server.
Prerequisites: Node.js v18.19.1+, npm v8.0.0+, and Angular CLI v16.2.16Don’t have these installed? See the Installation Guide for detailed setup instructions.

​
Quick Setup

1

Clone the Repository

Clone the ScreenPulse repository from GitHub:
git clone https://github.com/EduGese/ScreenPulse-frontApp.git
cd ScreenPulse-frontApp
2

Install Dependencies

Install all required packages:
npm install
This will install Angular 16, Angular Material, ng-bootstrap, RxJS, and all other dependencies from package.json.
3

Start the Development Server

Launch the Angular development server:
npm start
The application will open at http://localhost:4200/ with hot reload enabled.
4

Create an Account

  1. Navigate to http://localhost:4200/ in your browser
  2. Click Sign Up in the navigation bar
  3. Register with your email and password
  4. You’ll be automatically logged in after registration
5

Search for Media

Try searching for your favorite movies, series, or games:
  1. Use the search bar on the home page
  2. Enter a title (e.g., “The Matrix”)
  3. Filter by type (movie, series, game) or year
  4. Click on any result to view detailed information
  5. Click the star icon to add items to your favorites
Success! You’re now running ScreenPulse locally. Explore the search functionality and start building your favorite media collection.

​
Available Commands

Here are the most useful npm scripts for development:
package.json
npm start          # Start development server (localhost:4200)
npm run build      # Build for production
npm test           # Run unit tests with Karma
npm run lint       # Lint code with ESLint
npm run storybook  # Launch Storybook docs (localhost:6006)

​
What’s Next?

Configure Environment

Set up your development environment with recommended tools and extensions

Explore Components

Learn about the component architecture and UI library

Architecture Overview

Understand how ScreenPulse is structured and organized

API Integration

Learn how to work with the backend API and OMDB integration

​
Backend API Setup (Optional)

By default, ScreenPulse connects to the production backend API at https://screenpulse-api.onrender.com. If you want to run the backend locally:
  1. Clone the backend repository: 
    git clone https://github.com/EduGese/ScreenPulse-backend-Api.git
cd ScreenPulse-backend-Api
  2. Install dependencies and start the server: 
    npm install
npm start
  3. Update src/environments/environment.development.ts in the frontend to use http://localhost:9000
See the Configuration Guide for detailed environment setup.

​
Troubleshooting

If port 4200 is occupied, Angular CLI will automatically prompt you to use a different port, or you can specify one:
ng serve --port 4201
Clear node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install
Install Angular CLI globally:
npm install -g @angular/[email protected]

​
Need More Help?

Full Installation Guide

Detailed setup instructions with troubleshooting

GitHub Repository

View source code and report issues

Build docs developers (and LLMs) love

Get started for freeTalk to us