Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bestbynature/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..
https://github.com/bestbynature/cinescope
css eslint ghpages html5 javascript jest stylelint webpack5
Last synced: 5 days ago
JSON representation
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..
- Host: GitHub
- URL: https://github.com/bestbynature/cinescope
- Owner: Bestbynature
- License: other
- Created: 2023-04-13T16:36:31.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2023-04-29T13:36:51.000Z (over 1 year ago)
- Last Synced: 2024-10-23T19:16:54.203Z (14 days ago)
- Topics: css, eslint, ghpages, html5, javascript, jest, stylelint, webpack5
- Language: JavaScript
- Homepage: https://bestbynature.github.io/CineScope/
- Size: 2.26 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📗 Table of Contents](#-table-of-contents)
- [📖 \[CineScope\] ](#-cinescope-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [🚀 Live Demo ](#-live-demo-)
- [You can find the live version of this web application in this link =\>**CineScope**](#you-can-find-the-live-version-of-this-web-application-in-this-link-cinescope)
- [💻 Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage ](#usage-)
- [Run tests ](#run-tests-)
- [Deployment ](#deployment-)
- [👥 Authors ](#-authors-)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [📝 License ](#-license-)
**[CineScope](https://bestbynature.github.io/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.
Client
- HTML
- CSS
- JAVASCRIPT
- **[Linter checks]**
- **[Webpack]**
- **[API]**
- **[CSS grid and flexbox]**
- **[Jest testing library]**
### You can find the live version of this web application in this link =>**[CineScope](https://bestbynature.github.io/CineScope/)**
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
- The current version of node
- To have Git installed on your local machine
- Node Package manager (npm)
- An editor such as Visual Studio Code
### Setup
Clone this repository to your desired folder:
- Create your classic access token from github.com
- run "git clone https://{access_token}@github.com/username/{repo_name}.git"
- Update your git identity by running "git config --global user.email "[email protected]""
- Update your name on git by running "git config --global user.name "your_name"
### Install
Install this project with:
```sh
- 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 [email protected]'
- 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 [email protected] [email protected] [email protected] [email protected]'
- 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 [email protected] [email protected] [email protected] [email protected]"
- 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
```
### Usage
To run the project, execute the following command:
```sh
use git bash to open in Vs code
use npm start to run web dev server
npm run build to get the production version
```
To run tests, run the following command:
```sh
Run "npx hint ."
Run "npx stylelint "**/*.{css,scss} --fix " to fix linters
Run "npx eslint . --fix to fix linters"
```
You can deploy this project using:
- github pages
```sh
- npm run deploy
```
👤 **Damilare Ismaila**
- GitHub: [@githubhandle](https://github.com/Bestbynature)
- Twitter: [@twitterhandle](https://twitter.com/Dammybest)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/damilare-ismaila-4a5a8b30/)
👤 **Harriet Oteng**
- GitHub: [@githubhandle](https://github.com/newhoteng)
- Twitter: [@twitterhandle](https://twitter.com/HarrietOteng1)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/harriet-oteng-75554666/)
- [ ] **[contact form page for customers]**
- [ ] **[A feature for alternative list of movies]**
- [ ] **[A feature for voting the best movie on the list]**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
If you like this project, kindly drop a star for me.
I would like to use this medium to appreciate [Microverse](https://microverse.org) for giving me this type of opportunity.
This project is [MIT](./LICENSE) licensed.