This is a single-page app where users can search a movie, like and open details about each movie and leave comments. Built with JavaScript.
- 📖 About the Project
- 💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- ❓ FAQ (OPTIONAL)
- 📝 License
"Metflix" project is a single page app.
The app displays a list of movies and allows a user to search a movie by keywords. The data about movies is retrieved using externa TVmaze API.
A user can open movie details, like or leave a comment. User interactions (likes, comments) are enabled using external Involvement API.
The project repo consists of the following main files:
- style.css, index.html, index.js files are located in ./src directory;
- assets are located in ./src/assets;
- modules for index.js are located in ./src/modules
- distribution files main.js, index.html are generated by Webpack and served by Webpack dev server from /dist folder.
- possibility to search movies by keywords
- pop-up window showing details of the selected movie
- user interactions (likes, comments)
- use this link to visit and try the Metflix app;
To get a local copy up and running, follow these steps.
In order to run and modify this project you need:
- gitHub account;
- git installed on your OS;
- VSCode (or another code editor);
- modern browser (supporting HTML5 and CSS3) is highly recommended;
Login to your GitHub account. Clone this repository to your desired folder:
cd my-folder git clone [email protected]:arnoldnekemiah/Metflix.git
You need to have Node.js and npm installed to successfully run and modify this project using packages.
To install all dependencies run the following command:
npm install
To run dev-server and use this website run the following command:
npm start
If you want to install dependencies manually follow these guidelines:
You need to have Webpack installed to successfully run, modify and bundle the code in the ./dist directory. In the root directory of the repo run the following command:
npm install webpack webpack-cli --save-dev
To be able to use live reloading you need to install webpack-dev-server. In the root directory of the repo run the following command:
npm install --save-dev webpack-dev-server
To make Webpack generate its own index.html file run the following command:
npm install --save-dev html-webpack-plugin
Install the loaders in order to import a CSS file from within a JavaScript module by running:
npm install --save-dev style-loader css-loader
To be able to deploy the project you need to install 'gh-pages':
npm install gh-pages --save-dev
To install Jest run the following:
npm install --save-dev jest npm install --save-dev jest-environment-jsdom
You might want to have linters installed in your local env to successfully run and modify this project:
- Webhint installation. Run the following command:
npm install --save-dev [email protected]
- Stylelint installation. Run the following command:
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
- Eslint installation. Run the following command:
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
You can use this project to search movies by keywords and interact with displayed movies:
- Open the Demo link of this project (or run
npm startin CLI if you cloned the project and installed all dependencies). This will open a new browser tab. - You should be able to see the Metflix displaying random movies with the search bar in header. Type your keywords and perform the search. The data about movies is retrieved using external TVmaze API.
- Click on heart icon to like any movie on homepage.
- Click on any displayed movie's Comment button to see the details and comments. You can add your comment for any movie.
- Refresh or close and open the page. Interaction data (likes, comments) is preserved using Involvement API service.
To run tests (Jest) execute the following:
npm test
You can also check linter errors by running this commands:
npx hint .
npx stylelint "**/*.{css,scss}"
npx eslint .
lighthouse url options
This porject uses gh-pages branch for deployment.
To deploy modified version of this repo run the following command:
npm run deploy
👤 Zilola Nazarova
- GitHub: @Zilola-Nazarova
- Twitter: @NazarovaZi
- LinkedIn: in/NazarovaZi
👤 Ikonde (Arnold) Nekemiah
- GitHub: @arnoldnekemiah
- Twitter: @arnoldikonde
- LinkedIn: Ikonde (Arnold) Nekemiah
- design improvements (mobile-first approach);
- reservation functionality;
- additional navlinks (e.g. contacts, about us);
- interactivity (transitions and animations);
Contributions, issues, and feature requests are welcomed!
If you like this project just star it!
We would like to thank Microverse program for the knowledge and skills we have acquired in Modules 1 and 2.
We are grateful for all our previous project reviewers for their advice. Thanks to them we could build this app.
-
Why the app doesn't display all possible movies when I click on a genre in navigation bar?
- This is becuase of the way API works. The search performed in TVmaze API shows only first 10 results of the search. In order to see more movies we would have to use another API or upgrade our TVmaze account that was not required in this capstone project.
-
The layout of the pop-up would look better if the movie details were displayed to the right of the movie poster. Why didn't you use this approach?
- In this capstone project we are supposed to follow the medium-fidelity wireframes. According to these wireframes the details should be positioned below the image.
This project is MIT licensed.