/fe-the-shoppies-movie-awards-react-ts

Movie awards for entrepreneurs.

Primary LanguageJavaScript

Logo

The Shoppies

Movie awards for entrepreneurs.

Features

  • Search OMDB and display the results (movies only).
  • Add a movie from the search results to our nomination list.
  • View the list of films already nominated.
  • Remove a nominee 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.
  • Save nomination lists if the user leaves the page (in LocalStorage).

Documentation

Documentation by Shopify

Lessons Learned

  • Use React Hooks like useState, useEffect, useReducer, and useContext.
  • useReducer: I should use this hook when you have complex state logic and how to use dispatch function.
  • Context: Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Run Locally

Clone the project

  git clone https://github.com/alxmcr/the-shoppies-movie-awards.git

Go to the project directory

  cd the-shoppies-movie-awards

Install dependencies

  npm install

Start the server

  npm run start

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

REACT_APP_API_KEY

You should put as value the API KEY that you got from OMDB's API.

Tech Stack

Client: HTML, CSS, JavaScript, React, React Hooks, and Font Awesome.

Server: Node

Screenshots

image

image

Demo

https://the-shoppies-movie-awards-app.netlify.app/

Authors

Feedback

If you have any feedback, please reach out to us at amcocarojas@gmail.com.