chakib-lah / ng-poc

Movies and Tv show Review plateforme created with Angular and Symfony 6

Hi there 👋

I'm Full stack developer multi-skilled on different technologies PHP, Symfony, Angular, React, Rest API, Docker.

• 🔭 I’m currently working on web application and microservices technologies.

🛠️ Skills

Languages

     

Front-End Development

       

Back-End Development

 

CI/CD

   

Tools

 

🔗 Links

ng-poc's Issues

Edit profil

• Edit User infos
• Change password
• Update avatar with preview when image uploaded

With Api update user

Movie detail page

Movie/Tv-show detail content:

-title

• description
• cover
• categories
• photos galery (modal)
• actors (modal)
• score
• rate bouton (available only for authenticated users)
• comments (available only for authenticated users)

Authentication

Secure Apis with JWT authentification, that will be used to authenticat front users

Ressources: Api platform JWT auth

Home page

Add home page with contents, list with pagination

• Last release
• Comming soon

Admin: manage Movies

‼️ Admin module sould be lazy-loaded

Admin page to CRUD movies and tv/shows contains datatable listing all movies and tv show
Table fields:

• Title
• Release date
• Category
• Truncated description
• Actions:
  • edit
  • view
  • delete

Frontal Authentication

• Set up jwt client
• Create login page
• create register page

Sources:
Angular jwt authentication

Set up Layered architecture

Set up layered archi. For frontend

Doc:

• https://dev-academy.com/angular-architecture-best-practices/

• https://medium.com/@getrohith.sathya/architecting-enterprise-angular-application-3276ac496c02

Examlpe:

• https://github.com/el-abdel/SAK/tree/master/sak-web

Top 100 best movies

page that contains list of top 100 best movies and tv-show

• two tabs movies/tv-shows

Admin: manage Actors

List of all actors (in datatable) fields:

• image
• name
• birth date
• actions:
  • edit
  • view
  • delete

Set up Front App

• Set up env
• Install Angular cli
• Install packages (angular material...)
• Set up front architecture (Layered architecture as example)

JWT Refresh Token

Add refresh token mecanisme

Ressoources:

• bundle: JWTRefreshTokenBundle
• example/doc: api-platform-auth-jwt-refresh

Frontend layout

Set up front app layout

• Header
• Content
• Footer

Admin: manage roles and permissions

‼️ Admin module sould be lazy-loaded

Manage permissions by role:

• Select box contains roles

  • default value: anonymous (role)

• checkbox list of permissions (component available in Angular Material lib)

• list of permissions updates whene role changed.

• Can check or uncheck to edit permissions

Including Apis role/permissions

Advanced Search

advancer search page:

search fields:

• title or description contains slug/keyword
• category
• author
• release date

result shows in the same page bellow the search form

Simple Searche

Set up simple search (form in header)

• result shows in new page
• result shows in table with backend pagination

Set up Docker dev Env

Docker Env with following services:

• php >= 7.4
• apache or nginx
• mariaDb
• phpMyAdmin
• (proxy for virtual hosts if needed: Treafik or NginxProxy)

Set up Api

• Set up symfony app
• Install and configure package: Api Platform

User profil

User profil detail page contains

• Username
• Fist name
• Last name
• Email
• Groupe
• Avatar

With Api fetch user

Movies api endroit

Using Api plateform

• list all
• filter by top 100
• filter by last release
• filter by comming soon (release date less then current date by 3 months)
• get movie by id
• create movie
• update movie
• delete movie

++ Includs related entities APIs (e.g. comments, categories, authors ...)

Admin: manage users

‼️ Admin module sould be lazy-loaded

Admin pages to manage users:

• Datatable with a list of all users contains:
  • username
  • email
  • role
  • actions button:
    • delete user
    • change group/role

With backend pagination