Skip to content

Latest commit

 

History

History
91 lines (58 loc) · 3.1 KB

README.md

File metadata and controls

91 lines (58 loc) · 3.1 KB
Raw

ANIMOV

Table of Contents

ANIMOV

ANIMOV is a React Native Mobile app for animation movies

Description

ANIMOV is an React Native Mobile application that provides HD animation movies that users can download very easy. Also, I developed a website using a React app that provides tha admin with an awesome page to add new movies to his website.

Requirements

To run this app on your device or emulator there are some dependencies you have to install first. These dependencies are:

  • node

    You should download it and install on your machine.

  • redux

    A great standalone tool to manage state change and decreases components coupling .

  • react-redux

    Since redux is a standalone tool that is not dedicated to React JS, we need another package to hook it within a React JS app and here react-redux comes to the scene.

  • firebase

    Firebase helps mobile and web app teams succeed

  • react-bootstrap

    React bootstrap replaces the Bootstrap javascript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.

  • react-router-dom

    React Router is the most popular routing library for React. It allows you define routes in the same declarative style:

    < Route path = "/home" component = {Home} />

Run_The_App

To install all dependencies use your Command Line to browse to the project folder and hit:

    npm install

then hit the next command to run the app:

    npm start

Challenges

There were some challenges but most of them was not that difficult. There were two big challenges:

  1. to add the name of movies to the URL as: https://animove.netlify.com/?#/reign-of-the-supermen so used an advanced topic in React Routing that is to pass the path as a parameter,
<NavLink to={pathTO} > </ NavLLink>
<Route path='/:movieName' exact component={ViewDetails} />
  1. to reuse some components that would have different styling when used in different places. so passed parameters to this reusable components and according to this parameters these components will have different CSS classes and styling:
<div className={props.review ? classes.CardAsRewiew : null + ' col-10 mx-auto col-md-4 col-lg-3 pb-5 item-align-center'} >

Release

The application has been deployed to Github and can be found here.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.