https://github.com/edugese/screenpulse-frontapp
ScreenPulse is the frontend part of a full stack application built with Angular, integrated with a custom backend API built with Node.js and Express and MongoDB Atlas for database storage. The frontend allows users to search for movies, series, or video games in the OMDB API, view detailed information and save favorites to collections after login
https://github.com/edugese/screenpulse-frontapp
angular angularmaterial front-end ng-bootstrap typescript
Last synced: 29 days ago
JSON representation
ScreenPulse is the frontend part of a full stack application built with Angular, integrated with a custom backend API built with Node.js and Express and MongoDB Atlas for database storage. The frontend allows users to search for movies, series, or video games in the OMDB API, view detailed information and save favorites to collections after login
- Host: GitHub
- URL: https://github.com/edugese/screenpulse-frontapp
- Owner: EduGese
- License: mit
- Created: 2023-12-05T11:01:36.000Z (over 2 years ago)
- Default Branch: production
- Last Pushed: 2025-12-04T19:43:58.000Z (6 months ago)
- Last Synced: 2025-12-08T02:30:56.471Z (6 months ago)
- Topics: angular, angularmaterial, front-end, ng-bootstrap, typescript
- Language: TypeScript
- Homepage: https://sreenpulse.web.app/
- Size: 17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://edugese.github.io/ScreenPulse-frontApp/)
[](https://sreenpulse.web.app/)
[](https://angular.io/)
[](https://www.typescriptlang.org/)
[](https://material.angular.io/)
[](https://ng-bootstrap.github.io/)
[](LICENSE)
> A modern web application for discovering and managing movies, series, and games. Built with Angular 16, powered by OMDB API, with full authentication and favorites management.
[🚀 Live Demo](https://sreenpulse.web.app/) • [📖 Component Docs](https://edugese.github.io/ScreenPulse-frontApp/) • [🎬 Video Demo](https://youtu.be/e1ZbcnbUI2E) • [🔗 Backend API](https://github.com/EduGese/ScreenPulse-backend-Api)
---
## ✨ Features
- **Smart Search** - Find movies, series, and games by title, type, and year
- **User Authentication** - Secure registration and login system
- **Favorites Management** - Save and organize your favorite media
- **Detailed Information** - View ratings, cast, trailers, and more
- **Personal Reviews** - Add notes and reviews to your favorites
- **Responsive Design** - Optimized for desktop, tablet, and mobile
## 🛠️ Tech Stack
- **Frontend:** Angular 16.2.12, TypeScript 5.1
- **UI:** Angular Material, ng-bootstrap
- **State:** RxJS
- **API:** OMDB API + Custom Node.js/Express Backend
- **Database:** MongoDB Atlas
- **Hosting:** Firebase (Frontend) + Render (Backend)
- **Documentation:** Storybook 8.3.x
## 🚀 Quick Start
### Prerequisites
- Node.js v18.19.1 (LTS)
- npm v8.0.0+
- Angular CLI v16.2.16
### Installation
```bash
# Clone repository
git clone https://github.com/EduGese/ScreenPulse-frontApp.git
cd ScreenPulse-frontApp
# Install dependencies
npm install
# Start development server
npm start
```
App runs at `http://localhost:4200/`
### Available Scripts
```bash
npm start # Development server with live reload
npm run build # Production build
npm test # Run unit tests (Jasmine/Karma)
npm run lint # Lint with ESLint
npm run storybook # Launch Storybook docs
```
## 📖 Documentation
**Component library and architecture** is fully documented in Storybook:
👉 **[View Component Documentation](https://edugese.github.io/ScreenPulse-frontApp/)**
Includes:
- Component library (Smart + Presentational)
- Angular Material usage guidelines
- Project architecture overview
- Interactive component playground
## 🏗️ Architecture Highlights
- **Feature modules** with lazy loading (Search, Favorites, Auth)
- **Smart/Presentational** component separation
- **RxJS** for reactive state management
- **Guards & Interceptors** for auth and error handling
- **Shared module** for reusable components
- **Storybook** for component-driven development
📚 Full architecture details → [Storybook Introduction](https://edugese.github.io/ScreenPulse-frontApp/?path=/docs/introduction--docs)
## 🧪 Testing
```bash
# Unit tests
npm test
```
Tests use **Jasmine** + **Karma** with `HttpClientTestingModule` for HTTP mocking.
## 🌐 API Integration
- **[ScreenPulse Backend API](https://github.com/EduGese/ScreenPulse-backend-Api)** - Node.js + Express + MongoDB
- **[OMDB API](https://www.omdbapi.com/)** - Movie/series/game data source
Backend handles:
- User authentication (JWT)
- Favorites CRUD operations
- OMDB API proxy requests
## 📱 Responsive Design
Optimized for all devices from 320px (mobile) to 1920px+ (desktop).
## 🔧 Environment Configuration
Environment files are located in `src/environments/`:
```typescript
// environment.ts (development)
export const environment = {
serverFavoritesURL: 'http://localhost:9000/api/favorites',
serverSearchURL: 'http://localhost:9000/api/omdb',
serverUserURL: 'http://localhost:9000/api/user'
};
// environment.production.ts (production)
export const environment = {
serverFavoritesURL: 'https://screenpulse-api.onrender.com/api/favorites',
serverSearchURL: 'https://screenpulse-api.onrender.com/api/omdb',
serverUserURL: 'https://screenpulse-api.onrender.com/api/user'
};
```
Angular automatically uses `environment.production.ts` when building with:
```bash
ng build --configuration production
```
## 📄 License
This project is licensed under the [MIT License](LICENSE).
---
**Developed by** [Eduardo Gese](https://github.com/edugese)
⭐ Star this repo if you find it useful!
"""