Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 24 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
- Created: 2023-12-05T11:01:36.000Z (12 months ago)
- Default Branch: production
- Last Pushed: 2024-08-31T11:50:56.000Z (3 months ago)
- Last Synced: 2024-10-05T04:21:16.843Z (about 1 month ago)
- Topics: angular, angularmaterial, front-end, ng-bootstrap, typescript
- Language: TypeScript
- Homepage: https://sreenpulse.web.app/
- Size: 10.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ScreenPulse 🎬🎮
ScreenPulse is the frontend part of a full stack application built with Angular, integrating with a custom [backend API](https://github.com/EduGese/ScreenPulse-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 registering and logging in.
## Features ✨
- **Search:** Search for movies, series, or video games
- **Sort:** Sort results by title, year, or type
- **Details:** Get detailed information such as director, actors, year, plot, etc.
- **Authentication:** User registration and login for authentication and authorization
- **Favorites:** Save items to your favorites collection
- **Favorites Page:** Allows you to:
- View all items, movies, series, or video games collections
- Filter by title and sort by title or year
- Add your own reviews/notes
## Technologies & Libraries 🛠️
- **[Angular](https://angular.io/) 16.2.12:** Frontend framework
- **[Angular Material](https://material.angular.io/) 16.2.12:** UI component library
- **[ng-bootstrap](https://ng-bootstrap.github.io/#/home) 15.1.2:** UI component library
- **[Firebase](https://firebase.google.com/):** Hosting service
- **[NPM](https://www.npmjs.com/) 9.8.0:** Packege manager
## API Integration 🌐
- **[ScreenPulse Backend API](https://github.com/EduGese/ScreenPulse-backend-Api):** This API server manages user authentication, connections to the MongoDB database, and requests to external APIs such as the OMDB API. It provides endpoints for user registration, login, saving favorites, and retrieving data from the database.
- **[OMDB API](https://www.omdbapi.com/):** Provides the data source for movie, series, and video game information.
## Angular Architecture 🏗️
ScreenPulse is optimized for modularity and scalability, using lazy loading for performance:
- **Core Module:** Houses core functionalities like guards and services, eagerly loaded for application-wide availability.
- **Feature Modules:** Each page or feature has its module with components, services, and routing configurations, lazily loaded to minimize initial load time.
- **Shared Module:** Centralizes reusable components, services, and models for easy access across feature modules, fostering code reusability.
- **App Module and Routing:** The main AppModule handles bootstrapping and imports the AppRoutingModule for application-level routing. Lazy loading improves performance by loading feature modules on-demand.
Lazy loading ensures swift load times, resource efficiency, and a seamless user experience while maintaining a modular codebase.
## UX/UI Design 🎨
ScreenPulse combines ng-bootstrap, Angular Material, and custom components to create an engaging user experience. These libraries also speed up the development process and ensure consistency in page design.
## Responsive 📱💻
ScreenPulse is designed to be responsive, ensuring a seamless user experience across all devices, including desktop computers, tablets, and mobile phones.
### Desktop Devices 💻
ScreenPulse offers a rich and immersive experience on desktop devices, with a spacious layout that maximizes screen real estate and enhances usability.
### Mobile Devices 📱
ScreenPulse offers a rich and immersive experience on desktop devices, with a spacious layout that maximizes screen real estate and enhances usability.
## Demo
https://sreenpulse.web.app/
https://youtu.be/e1ZbcnbUI2E
## Development Server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code Scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
## Running Unit Tests
Run `ng test` to execute the unit tests via Karma.
## Running End-to-End Tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
## Further Help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference page](https://angular.io/cli).
## License
This project is licensed under the [MIT License](#).