ANIMOV is a React Native Mobile app for animation movies
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.
To run this app on your device or emulator there are some dependencies you have to install first. These dependencies are:
-
You should download it and install on your machine.
-
A great standalone tool to manage state change and decreases components coupling .
-
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 herereact-redux
comes to the scene. -
Firebase helps mobile and web app teams succeed
-
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 is the most popular routing library for React. It allows you define routes in the same declarative style:
< Route path = "/home" component = {Home} />
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
There were some challenges but most of them was not that difficult. There were two big challenges:
- 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} />
- 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'} >
The application has been deployed to Github and can be found here.
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.