This project is an mobile application written entirely in typescript, using react-native, expo, nodemon. It allows users to save movies to watch list, and search for movies. It also allows for the user to see some of the following information on a movie:
- Where to stream it
- Review Scores
- Actors
- Director
- Plot info
- Search for the trailer
- Search on google
This Files have been documented extensively, even-though typescript creates automatic documentation through your LSP. The frontend uses the frameworks react-native,and expo-cli to compile and run the program. The backend uses nodemon and mongodb to host the server.
note: the icons are being clicked on to open external apps
- you need to have a working version of npm installed.
- on your mobile device install an application called expo go
- after installing expo on your devide, install the command line interface on your machine
npm install -g expo-go
- clone the repo
git clone https://github.com/ndonfris/ts-movie-list.git
- cd into the frontend directory
cd ts-movie-list/frontend
- run the following command to install the dependencies:
npm install
- after the installation is finished run the following command:
expo start
- lastly use your mobile device with expo go installed onto it to scan the qr code.
As pointed out to me on piazza, ios devices don't allow expo links to be shared. Therefore if you are on an device ios the official link below does not work. It is recommended to use the installation method above, but for andriod users the official url might work.
Anything below here should not necessary, but may be relevant if you are having issues.
Below shows demos of the three main screens. Extra information about the installation process can be found below.
note: this method uses snack, which seems to have trouble displaying entire applications. It also does not handle version control very well. To properly have snack working you might need the backend server running on your machine. I included a script for this, but using the cloud server for testing via the method described above is recommended.
- Go to https://snack.expo.dev
- Navigate to the right side of the webpage.
- Pick your preferred method of viewing the application (my device, ios,
andriod, or web).
- It is completely optional to download the expo app, but performance will be significantly increased if you choose this method.
If the above method (using snack) does not work, I have provided a script in this repo that allows for extremely easy installation of the application.
To start the entire application you will need to clone the repo and have a working version of npm, expo, and ngrok installed.
sudo apt install expo npm ngrok
pip install pygrok
You will also need to run the following commands:
cd ts-movie-list/frontend
npm install
cd ../ts-movie-list/backend
npm install
afterwards you should be able to view the application by going to the root directory and running the server_starter executable
./server_starter
Further documentation for this script can be found inside of it but in short, the process automates is the following following steps:
start expo
(for the frontend)- starts
nodemon ./backend/source/server.ts
(for the backend) - starts ngrok on port 3000 (for communication between frontend and backend)
- copies ngrok url from
ngrok http 3000
to the serverURL variable defined in frontend/helpers/URL.tsx
installation
If you have cloned the repo and used the installed npm, it should work
usage
to start only the frontend just run:
expo start
documentation
routes contain the pages to be rendered
components used on the pages are located in ./components
functional components
- component used for movie tiles -> MovieTile.jsx
- component used for rendering the search results -> MovieList.tsx
- component used for the search bar -> SearchBar.jsx
- component used for rendering a popup when a movie tile is pressed -> Popup.tsx
- components used for rendering the information inside of a component are in the directory Popups/ object oriented components
- TODO
installation
backend was built using: nodemon, mongodb, and rapidapi.com for external api calls this means you need a working version of node installed
node -v
npm install nodemon
I used yarn as my package manager instead of npm so I also ran:
npm install --global yarn
usage
to start only the backend run:
nodemon ./backend/source/server.ts
note:
-
for the frontend to communicate with the backend, server_url will need to be updated in the directory ./frontend/helpers/URL.tsx
-
this uses ngrok to communicate through http
-
either of the bash scripts ./server_starter will automate setting this up ./startup_script
-
instead of using these scripts you could start up ngrok with the following command:
ngrok http 3000
- then you would need to update the frontend/helpers/URL.tsx variable
- so copy the https://url.ngrok.io