Movie searching and listing App


TypeScript Vue.js TailwindCSS

NestJS Express.js Prisma Postgres

Summary

  • This is an App that allows users to lookup and bookmark movies, powered by TMDB API
  • The main purpose of the project was to practice NestJS, Vue.js, TailwindCSS, Docker, Testing and Github Actions

Todo

  • Implement infinite scrolling on home page
  • Search by actor, director, date, genre etc (currently only by title)
  • Show movie trailer on movie details page
  • Show actors on movie details page
  • Filter bookmarks by genre
  • Create desktop responsive layout (developed mobile-first)

What I learned and practiced

  • Vue 3 and TailwindCSS

    • Composition API, setup function, refs and reactivity, events
    • Vuex store, modules, actions, mutations, getters, state
    • Slots and templates, provide/inject, suspense API, dynamic routing
    • Extending and customizing TailwindCSS theme
  • NestJS

    • More about NestJS Execution Context, Reflection and metadata
    • Custom route handler decorators and createParamDecorator
    • NestJS Interceptors and the basics of RxJS Observables
    • Unit tests in NestJS and more advanced Jest mocking
  • Docker and Github Actions

    • Dockerizing a NestJS app for testing and production
    • CI with Github Actions and Docker
    • CD to Heroku with Github Actions