Built with the Marvel Comics API.
Take-home assignment for Media Monks BA.
I've picked Angular as my framework of choice due to its advantages for building Single Page Applications and working with long-running streams of events. It provides a fair amount of out-of-the-box solutions such as routing, two-way data binding, code-splitting, lazy-loading and so on. The goal was to create an app-like experience that features a simple and friendly UI. This was my first time working with this framework in a while (and my first time ever with Angular Material fwiw) so I wanted to make sure to follow best practices by creating a scalable and robust project structure, even if it might seem to be a bit of an overkill for a small-sized application like this. It's a little far from what I would've liked to accomplish but I'm pretty happy with the results, specially considering that I haven't used any third-party libraries outside of the UI components.
Thanks for reading!
- Angular
- Angular CLI
- Angular Material
- Node
- NPM
- Webpack
- RxJS
- TypeScript
- Life-threatening amounts of caffeine
- HTTP response caching strategy - shareReplay(), take()
- Splash screen loader for better UX
- Refactor conditional rendering in order to avoid FOUCs
- Add more transitions and animations for a richer SPA experience
- Filter character list by "Favorite" status
- Filter search by adding/removing categories (include comics, stories and series) - implement forkJoin to make parallel calls
- Show placeholder content in between API calls (home screen)
- Componentize the Character module a bit further
- Get rid of unused code and clean any remaining smells/hacks/inconsistencies
- Improve a11y and keyboard navigation according to WCAG AA standards
- Implement BEM correctly (don't judge me)
- Improve performance on mobile
Federico Pellegrini
Contributions, issues, and feature requests are welcome!
Give a ⭐️ if you like this project!