ScreenPulse is the frontend part of a full stack application built with Angular, integrating 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 registering and logging in.
- 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
- Angular 16.2.12: Frontend framework
- Angular Material 16.2.12: UI component library
- ng-bootstrap 15.1.2: UI component library
- Firebase: Hosting service
- NPM 9.8.0: Packege manager
- 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: Provides the data source for movie, series, and video game information.
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.
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.
ScreenPulse is designed to be responsive, ensuring a seamless user experience across all devices, including desktop computers, tablets, and mobile phones.
ScreenPulse offers a rich and immersive experience on desktop devices, with a spacious layout that maximizes screen real estate and enhances usability.
ScreenPulse offers a rich and immersive experience on desktop devices, with a spacious layout that maximizes screen real estate and enhances usability.
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.
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.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
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.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
This project is licensed under the MIT License.