My First Front-End-Only Project

#frontend #vue #showdev

Hey guys!

Recently I decided to make a front-end-only application, since I felt that as a full-stack developer, I was lacking in my front-end skills.
So here is a little post on how I created moviez.io

Idea

I wanted to create something that would be challenging, but also useful. So after some time of thinking and brainstorming, I decided to go with movie-fetching app, which displays info about movies, TV series or actors.

Frameworks

For JavaScript framework I decided to go with VueJS, since it is the primary FE framework that we use in our company and would benefit me the most to improve on it.

I also went for Buefy Vue package, which is built on top of Bulma CSS framework.

Data source

Since the idea was to create only front-end, the app had to fetch data from external API. I decided to go with TMDB since it provides clean API interface.

CI/CD

For the convenience reasons I also implemented simple CI/CD using GitLab's CD/CD system.
It works in the following way: when I push changes to my development branch, project gets built and is deployed on staging AWS S3 bucket. When the development branch is merged into master branch, project is built and deployed to primary/production AWS S3 bucket. On production server there is also AWS CloudFront, that enables caching and overall better loading times.

TODO

There is still a lot of improvements to be done. Here are some of them:

Create and share list of your favourite movies / TV shows
Enable users to write review to movies and rate them (even tho it will require some back-end action 😊)
Improve overall page performance

Conclusion

In the end, I feel like I have learned a lot through this simple project. Even through this project is relatively simple, I tried to follow Vue good practises and front-end good practices overall.

So this is it from my part, if you have any opinions, well-intentioned criticism or just potential improvements, please do share them in the comments 🤗.