This project was my first React project that I have ever made. Back in 2017, I know about React and learnt about that. As I'm about to graduate I need a real-world application that showcases my skill to work with react. Hence, I made this project and from that project, I also got spotted by talents hunter and manage to get offers from several companies in Indonesia. As a result, I recreate the project in hope that same thing will happen by others if they also recreate similar things like what I made in this project

What it does

This does a fairly simple thing. The first version of the app is showing a list of movies and we can add balance to our account then we can buy the movies using our balance, but then I decided to change it, as it's fairly complex to do so. Hence, for this community challenge, I change the feature from able to buy a movie to be able to add the movie to our favorite list

How I built it

I built it using React and ant design (UI library for React) as well as using movieDb to get the movie database. I built it by referring to the previous version of this app.

Challenges I ran into

Legacy code was one of the challenges I met because for the styling I referencing myself to version 1 of the app and it's quite hard to read something that you've written almost 2 years ago. This project also overriding the ant design theme using craco, and it is my first time playing with craco

Accomplishments that I'm proud of

The styled-component is an amazing package that you can use to style your React apps, I always want to use styled-components and so I am proud to finally able to create a project using styled-component

What I learned

Although this app is fairly simple I did learn a few things. First is that I finally using React hooks, in my day-to-day job we have not able to upgrade our React apps using the latest version. Hence, the hooks are not available, but in the project, I'm using hooks alongside with its lifecycle

What's next for toko-flix

There are several things that can be added in the future to make the project more imitating real world problem, those are:

  1. Adding a search button to search for specific movies
  2. Adding pagination to paginate movies
  3. Adding more detailed information for the movies (trailer, crew members, and etc)
  4. Able to create an account and buy movie

Built With

  • ant-design
  • craco
  • create-react-app
  • less
  • moviedb
  • react
  • styled-components
Share this project: