I've made plenty of web apps before. Whether it was for personal use, work, or the hackathon community, I always try to learn a new thing or two every new project. This time, I decided to not use boilerplate code and to also try TypeScript on the frontend.
I learned a few things from this project. Arguably, TypeScript isn't the most "bang for the time" for frontend development. It takes longer to develop a full feature, but of course, it could pay off when others start using the code as well. It was also good to have learned how to set up webpack, eslint, tsconfig, babel, and prettier.
Next time I'll pick up a few tricks on how to optimize performance based on the lighthouse report.
- Search results should come from OMDB's API (free API key: http://www.omdbapi.com/apikey.aspx).
- Each search result should list at least its title, year of release and a button to nominate that film.
- Updates to the search terms should update the result list
- Movies in search results can be added and removed from the nomination list.
- If a search result has already been nominated, disable its nominate button.
- Display a banner when the user has 5 nominations.
- Done in TypeScript strict mode
- Save and retrieve nominated movies from localstorage
- Hid API keys in a custom lambda wrapper for security reasons (In a work environment, we can also restrict lambda access to those who has access to some VPC only)
- 100% score for Accessbility from Lighthouse
- 100% score for Best Practices from Lighthouse
- Removed search results that were already in the nominations list
