Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adrianoescarabote/entertainment-web-app
My first project with angular, involves developing a full-stack entertainment web application. I used Figma files to style the project.
https://github.com/adrianoescarabote/entertainment-web-app
angular backend entertainment express frontend frontend-mentor jasmine jsonwebtoken mongodb ngrx node tailwind
Last synced: 5 days ago
JSON representation
My first project with angular, involves developing a full-stack entertainment web application. I used Figma files to style the project.
- Host: GitHub
- URL: https://github.com/adrianoescarabote/entertainment-web-app
- Owner: AdrianoEscarabote
- License: mit
- Created: 2023-09-13T01:43:07.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-04T00:58:07.000Z (about 1 month ago)
- Last Synced: 2024-10-09T12:44:40.620Z (27 days ago)
- Topics: angular, backend, entertainment, express, frontend, frontend-mentor, jasmine, jsonwebtoken, mongodb, ngrx, node, tailwind
- Language: TypeScript
- Homepage: https://entertainment-web-app-adrianoescarabotes-projects.vercel.app/
- Size: 2.31 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
## Deploy ([click here](https://entertainment-web-app-sigma.vercel.app/))
# Entertainment web app solution
This is a solution to the [Entertainment web app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/entertainment-web-app-J-UhgAW1X). Frontend Mentor challenges help you improve your coding skills by building realistic project.
## Table of contents
- [The challenge](#the-challenge)
- [Continued development](#continued-development)
- [Technologies Used](#technologies-used)
- [Author](#author)
- [License](#license)## The challenge
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Navigate between Home, Movies, TV Series, and Bookmarked Shows pages
- Add/Remove bookmarks from all movies and TV series
- Search for relevant shows on all pages
- **Bonus**: Build this project as a full-stack application
- **Bonus**: If you're building a full-stack app, we provide authentication screen (sign-up/login) designs if you'd like to create an auth flow## Continued development
In this challenge, I concentrated on mastering new technologies like Angular and incorporating unit tests into the frontend using Jasmine, among other tools. As this was my inaugural venture with Angular, I am exceptionally content with the results, and I believe I delivered a commendable performance.
I am deeply committed to learning new technologies and continuously enhancing my skills as a developer. This project significantly embodies that commitment.
## MyAngularApp
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.2.
### Development server
Run `cd frontend/` and `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
### Build
Run `cd frontend/` and `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
### Running unit tests
Run `cd frontend/` and `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Technologies Used
**Operational System**
![Windows](https://img.shields.io/badge/Windows-017AD7?style=for-the-badge&logo=windows&logoColor=white)
**Front-end**
![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white)
![Jasmine](https://img.shields.io/badge/Jasmine-8A4182?style=for-the-badge&logo=jasmine&logoColor=white)
![Axios](https://img.shields.io/badge/Axios-009688?style=for-the-badge&logo=axios&logoColor=white)
![Ngrx](https://img.shields.io/badge/NgRx-593D88?style=for-the-badge&logo=redux&logoColor=white)**Back-end**
![Express](https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=express&logoColor=white)
![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)
![Node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
![Bcrypt](https://img.shields.io/badge/Bcrypt-2A628F?style=for-the-badge&logo=bcrypt&logoColor=white)
![Jsonwebtoken](https://img.shields.io/badge/Jsonwebtoken-000000?style=for-the-badge&logo=json-web-tokens&logoColor=white)
![Eslint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)
![Husky](https://img.shields.io/badge/Husky-4D83FF?style=for-the-badge&logo=husky&logoColor=white)
![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white)**Tools**
![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white)
![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)
![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)## Architecture
## Concepts used in the backend
- SOLID
- Dependency Injection
- Repository Pattern## Author
👤 **AdrianoEscarabote**
- Github: [@AdrianoEscarabote](https://github.com/AdrianoEscarabote)
- Linkedin: [@AdrianoEscarabote](https://www.linkedin.com/in/AdrianoEscarabote/)
- Frontend Mentor: [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)
- Twitter: [@drianEscarabote](https://twitter.com/drianEscarabote)## 📝 License
Copyright © 2023 [AdrianoEscarabote](https://github.com/AdrianoEscarabote).
This project is [MIT](https://github.com/AdrianoEscarabote/Entertainment-web-app/blob/main/LICENSE) licensed.---
## Show your support
Give a ⭐️ if this project helped you!