Not just another internet movie database

React frontend application for filmopedia API

Client side single page application

Description

Internet movie database that allows registered users to browse movies by Title, Genre, Director. Users can change their username, email adress and birthday. While browsing the movies collection, users can add movies to their list of favorites.

Tools used

Property	Tool
Language	JavaScript
Library	React
Route handling	axios
Styling Framework	Bootstrap
State management	Redux
API	REST
bundler	parcel

Dependencies

• axios
• bootstrap
• node-sass
• parcel-bundler
• prop-types
• react-dom
• react-router-dom
• babel

User Stories

• As a user, I want to be able to access information on movies, directors, and genres so that I can learn more about movies I’ve watched or am interested in.
• As a user, I want to be able to create a profile so I can save data about my favorite movies

Application functions

The Filmopedia Application provides a collection of movies, that can be viewed by registered users. User data is also stored in a collection and API calls are made

Setting up the tools:

First up, make sure you have parcel installed globally. Parcel is the bundler that is used to bundle the application and make it accessible in your browser.

Do this by typing

$ npm install --global parcel@next

in your terminal

You can now download the repo to your computer, install the necessary modules by running:

$ npm install

Make sure there were no errors installing the necessary modules to your application.

Start the application

Now start the development server by typing

$ parcel src/index.html

the path to index.html is supposed to be put behind the parcel command, in this case parcel src/index.html

or

$ npm run dev

The console shows you the port on which the application is rendered. If your browser, doesn't open automatically, open it manually and navigate to the URL given in the terminal, in most cases: http://localhost:3000

App structure

    filmOpedia-client

    App
    |_  main-view
        |_  navbar
        |   |_  profile-view
        |
        |_  movie-view
        |   |_  movie-card
        |
        |_  login-view
        |   |_  registration-view
        |
        |_  genre-view
        |_  director-view

Essential features of the Components

main-view

• Returns a list of ALL movies to the user (each listed item with an image, title, and description)
• Sorting and filtering
• Ability to select a movie for more details

navbar

• Logout a user
• Return to home screen

profile-view

• Allows users to update their user info (username, password, email, date of birth)
• Allows existing users to deregister
• Displays favorite movies
• Allows users to remove a movie from their list of favorites

login-view

• Allows users to log in with a username and password

registration-view

• Allows new users to register (username, password, email, birthday)

genre-view

• Returns data about a genre, with a name and description
• Displays example movies

director-view

• Returns data about a director (name, bio, birth year, death year)
• Displays example movies

Contact me!

Get in touch! Contact me here to talk about collaborations.