Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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!