‘Yet another movie catalog’
This application is a solution for a movie catalog, which is implemented using vanilla Javascript ES6 (i.e. no web frameworks), together with Webpack HMR and Typescript. Uses the tmdb as the backend providing the movie data.
This project is build on top of the following technologies:
.css files.It is based on my template TypeScript-Babel-Webpack-Starter
A demo of this app is deployed using Heroku.
You can check it at https://movierama-lilicaway.herokuapp.com/
I haven’t added the apiKey to the repository for security reasons, instead I have set it up so the apiKey is received as an environment variable using webpack.
Read here for instructions on how to generate your own apiKey.
This includes HMR (Hot Mode Reload).
TMDB_API_KEY=<yourTmdbApiKey>
npm run serve-dev -- --env.apiKey=${TMDB_API_KEY}
TMDB_API_KEY=<yourTmdbApiKey>
npm run build:webpack -- --env.apiKey=${TMDB_API_KEY} && \
npm run serve-prod
npm run test
You can also check coverage with:
npm run testWithCoverage
npm run build
npm run type-check
And to run in --watch mode:
npm run type-check:watch
To detect and attempt to fix lint issues:
npm run tslint-fix
To auto-format all files:
npm run prettier-fix
To do both together:
npm run fix
The application has three well defined layers:
This layer is about the communication with the backend data and it is represented by the src/api folder.
It basically has all the code that takes care of communicating with tmdb. Requests and responses definitions, as well as the api interface are defined here.
Here lives all the code that offers the UI the exact API it needs to display the information it needs. It is represented by the folders src/services and src/model.
The services implement the business logic and the model has the interfaces used to communicate with the components.
All the UI code that takes care of displaying the information and handle user input (Smart and dumbs components) are located here. It is represented by the folder src/components.
The components are supposed to communicate only with the services layer and never directly with the api layer.
Most components are basically a function that returns an HTMLElement with all its event handlers configured so that it can be appended directly into the DOM.
In order to be able to write these components in a nicer way I created a createEl function (located in src/components/dom_helpers/basic.ts) that allows you to write hierarchical code to generate the DOM elements. It allows you to write code similarly to how you would do with react if you didn’t use JSX. It is way more limited than what react can do, of course. There are many other little helper functions in there, but this is the most important one because it is used by virtually all the components.