Movie App

3 min read

Movie App

Outline

introduction

This has been my hero project for quite sometime now, and it was time to upgrade it to use up date stack with NextJs and TypeScript.
The movie app is built using NextJs and TypeScript. It gives the ability to search for any possible movie, and also allows the user to see information about each specific movie, as well as the trailer for specified movie. This app is an upgraded version of my previous one, this one allows you to get information about shows .
This app is also responsive in all devices, and it is built using TailwindCSS, along the way it uses the React Hooks to make it more efficient. Lastly its SEO is also pretty good.
The difference between this app and other movies app is that this app allows the user to speak to the app by giving certain commands and the app will do those command accordingly using AI.
If everything goes well most of this code will be used for a project video based tutorial taught by JsMastery. That one will be using React with MaterialUI.

functionalities

  • It allows the user to click on a specific Genre and the app fetches movies according to that Genre.
  • Displays information about each specific movie from reviews to cast of the film
  • It allows the user to give commands such as:
    • what does this app do?
    • Hey Alan, can you tell me about this app?
    • How can you help me?
    • Go to specific Genre
    • Change Mode
    • Please Log me in
    • Please log me out
    • Please take me to my profile
    • more to come ...

challenges

  • Although I am an experienced Developer this was my first time using TypeScript in a big project.
  • Using Redux to control state Management in a some what big application
  • Making the layout responsive actually took some time to make it look the way I wanted, specially since this layout is not using pre-made components

improvements that could be made and are in the process

  • Give results as the users type a letter or word (expensive)
  • Add more functionalities like instead of showing two list on the profile show all the possible ones
  • Allowing user to create an account directly within the app

technologies

  • NextJS
  • TypeScript
  • Redux, RTQ
  • Tailwind

previews

previewOne
previewTwo
previewThree

Running the app

  • Clone the app
  • Install Dependencies
cd to folder
npm install or
yarn add
  • Create .env.local file and add your information from TMDB
NEXT_PUBLIC_API_KEY = "YourAPIKey";

demo

icons for portfolio

Let's Talk

Let's Chat
© 2021 | Enyel Sequeira