CineScope
CineScope is a web application that displays movies collection with their details and allows users to like or comment on a particular movie. Upon clicking the comment button, a pop-up is displayed that gives more information. The Project is achieved by consuming TV MAZE API for the actual movies and Involvement API for the interactions..
Install / Use
/learn @Bestbynature/CineScopeREADME
<a name="readme-top"></a>
<div align="center"> <br/> <h3><b></b></h3> </div> <!-- TABLE OF CONTENTS -->📗 Table of Contents
<!-- PROJECT DESCRIPTION -->📖 [CineScope] <a name="about-project"></a>
CineScope is a web application that displays movies collection with thier details and allows users to like or comment on a particular movie. Upon clicking a particular movie, a pop-up is displayed that gives more information. The Project is achieved by using APIs. The project also implemented features that dynamically modify the DOM and add basic events and listeners.
🛠 Built With <a name="built-with"></a>
Tech Stack <a name="tech-stack"></a>
<details> <summary>Client</summary> <ul> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> </ul> </details> <!-- Features -->Key Features <a name="key-features"></a>
- [Linter checks]
- [Webpack]
- [API]
- [CSS grid and flexbox]
- [Jest testing library]
🚀 Live Demo <a name="live-demo"></a>
You can find the live version of this web application in this link =>CineScope
<p align="right">(<a href="#readme-top">back to top</a>)</p> <!-- GETTING STARTED -->💻 Getting Started <a name="getting-started"></a>
To get a local copy up and running, follow these steps.
<p align="right">(<a href="#readme-top">back to top</a>)</p>Prerequisites
In order to run this project you need:
<ul> <li>The current version of node</li> <li>To have Git installed on your local machine</li> <li>Node Package manager (npm) </li> <li>An editor such as Visual Studio Code</li> </ul> <p align="right">(<a href="#readme-top">back to top</a>)</p>Setup
Clone this repository to your desired folder:
<ul> <li>Create your classic access token from github.com</li> <li>run "git clone https://{access_token}@github.com/username/{repo_name}.git"</li> <li>Update your git identity by running "git config --global user.email "your_email@gmail.com""</li> <li>Update your name on git by running "git config --global user.name "your_name"</li> </ul> <p align="right">(<a href="#readme-top">back to top</a>)</p>Install
Install this project with:
- In the first commit of your feature branch create a .github/workflows folder and add a copy of [.github/workflows/linters.yml](https://github.com/microverseinc/linters-config/blob/master/html-css-js/.github/workflows/linters.yml) to that folder.
- create a .gitignore file and add 'node_modules' to it
- run 'npm init -y'
- run 'npm install --save-dev hint@7.x'
- Copy [hintrc](https://github.com/microverseinc/linters-config/blob/master/html-css-js/.hintrc) to the root directory of your project.
- run 'npx hint .'
- Fix validation errors.
- run 'npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x'
- Copy [stylelintrc.json](https://github.com/microverseinc/linters-config/blob/master/html-css-js/.stylelintrc.json) to the root directory of your project.
- Run 'npx stylelint "\*_/_.{css,scss}"'
- fix linter errors
- run "npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x"
- Copy [eslintrc.json](https://github.com/microverseinc/linters-config/tree/master/html-css-js)
- Run npx eslint . on the root of your directory of your project
- Fix linter error.
### To Install Jest
- run npm install --save-dev jest
- add " "test": "jest", "watch": "jest --watch *.js" to the scripts section of package.json"
- run npm install --save-dev @babel/plugin-transform-modules-commonjs
- create a file at the root called .babelrc
- copy `{
"env": {
"test": {
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}
}
}` inside the file
To run the project, execute the following command:
use git bash to open in Vs code
use npm start to run web dev server
npm run build to get the production version
Run tests <a name="run-tests"></a>
To run tests, run the following command:
Run "npx hint ."
Run "npx stylelint "**/*.{css,scss} --fix " to fix linters
Run "npx eslint . --fix to fix linters"
Deployment <a name="triangular_flag_on_post-deployment"></a>
You can deploy this project using:
- github pages
- npm run deploy
👥 Authors <a name="authors"></a>
👤 Damilare Ismaila
- GitHub: @githubhandle
- Twitter: @twitterhandle
- LinkedIn: LinkedIn
👤 Harriet Oteng
- GitHub: @githubhandle
- Twitter: @twitterhandle
- LinkedIn: LinkedIn
🔭 Future Features <a name="future-features"></a>
- [ ] [contact form page for customers]
- [ ] [A feature for alternative list of movies]
- [ ] [A feature for voting the best movie on the list]
🤝 Contributing <a name="contributing"></a>
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
<p align="right">(<a href="#readme-top">back to top</a>)</p> <!-- SUPPORT -->⭐️ Show your support <a name="support"></a>
If you like this project, kindly drop a star for me.
<p align="right">(<a href="#readme-top">back to top</a>)</p> <!-- ACKNOWLEDGEMENTS -->🙏 Acknowledgments <a name="acknowledgements"></a>
I would like to use this medium to appreciate Microverse for giving me this type of opportunity.
<p align="right">(<a href="#readme-top">back to top</a>)</p> <!-- LICENSE -->📝 License <a name="license"></a>
This project is MIT licensed.
<p align="right">(<a href="#readme-top">back to top</a>)</p>