An open API service indexing awesome lists of open source software.

https://github.com/rileymanda/scimovies-capstone-project

SciMovies is a Full Stack dynamic single page application dedicated to showcasing a vast collection of scifi tv shows and movies. The website consumes its data from TvMaze API and Posts the user interaction likes on each tv show to the involvement API
https://github.com/rileymanda/scimovies-capstone-project

css3 es6-modules fetch-api flexbox grid html5 javascript jest lodash webpack-cli webpack5

Last synced: about 1 month ago
JSON representation

SciMovies is a Full Stack dynamic single page application dedicated to showcasing a vast collection of scifi tv shows and movies. The website consumes its data from TvMaze API and Posts the user interaction likes on each tv show to the involvement API

Awesome Lists containing this project

README

        



logo

SciMovies

# Table of Contents ๐Ÿ“‹

- [๐Ÿ“– About the Project](#about-project)
- [๐Ÿ›  Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [๐Ÿš€ Live Demo](#live-demo)
- [๐Ÿš€ Project Demo](#project-demo)
- [๐Ÿ’ป Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [๐Ÿ‘ฅ Authors](#authors)
- [๐Ÿ‘ฅ Attribution](#attribution)
- [๐Ÿ”ญ Future Features](#future-features)
- [๐Ÿค Contributing](#contributing)
- [โญ๏ธ Show your support](#support)
- [๐Ÿ™ Acknowledgements](#acknowledgements)
- [โ“ FAQ (OPTIONAL)](#faq)
- [๐Ÿ“ License](#license)



# SciMovies ๐Ÿ“–

**SciMovies** SciMovies is a single page application that display a list of epic scifi movies.


## Built With ๐Ÿ› 

### Tech Stack ๐Ÿ—œ๏ธ

Client



  • HTML5 markup to build raw structure of this web page




  • CSS3 custom properties, FlexBox, Grid to make the website visually attractive



  • Javascript




  • Linters for coding convention and coding formating

Javascript runtime environment



  • Node JS as a javascript runtime machine [git], a free and open source distributed version control system

Deployment

Bundler

Version Control

Backend



### Key Features ๐Ÿท๏ธ

- **List of Movies**
- **Like a movie**
- **Display movie likes**
- **Add comments on movies**

(back to top)




## Live Demo ๐Ÿš€

[Live Demo Link](https://rileymanda.github.io/scimovies-capstone-project/)

(back to top)



## Project Demo ๐Ÿ

[Project Demo](https://www.loom.com/share/2add16b8c7144cc6a3e35997e3504ae9?sid=2048ac9d-9109-4f02-ad4c-74fbac642c38)

(back to top)



## Getting Started ๐Ÿ’ป

To get a local copy up and running, follow these steps.

### Prerequisites ๐Ÿงฑ

In order to run this project you need:

- A Github account
- Node JS
- A web browser to view output e.g [Chrome](https://www.google.com/chrome/).
- An IDE e.g [Visual studio code](https://code.visualstudio.com/).
- [A terminal](https://code.visualstudio.com/docs/terminal/basics).



### Setup โš™๏ธ

Clone this repository to your desired folder:

```sh
cd my-folder
git clone https://github.com/RileyManda/SciMovies.git

```
- Navigate to the folder
```
cd my-folder
```
- Checkout the branch
```
git checkout main
```


### Install ๐Ÿ—๏ธ

Install all dependencies:

```sh
npm install
```


### Usage ๐Ÿ“‚

To run the project, follow these instructions:

- You have to clone this repo to your local machine.
```
git clone https://github.com/RileyManda/SciMovies.git
```




### Run tests ๐Ÿงช

How should it be tested?
To run tests, run the following command:

- HTML linter errors run:

```
npx hint . --fix
```

- CSS linter errors run:

```
npx stylelint "**/*.{css,scss}" --fix
```

- JavaScript linter errors run:

```
npx eslint . --fix
```

- For unit testing, run:

```
npm test
```


### Deployment

This project was deployed using GitHub Pages. For more information about how to use GitHub pages [read here](https://www.w3schools.com/git/git_remote_pages.asp?remote=github) ๐Ÿคฉ.

If you want to watch a video about how to use GitHub pages instead of reading [click here](https://www.youtube.com/watch?v=QyFcl_Fba-k&t=251s) โ˜บ๏ธ.

(back to top)



## ๐Ÿ‘ฅ Authors

๐Ÿ‘ค **Riley Manda**

- GitHub: [@RileyManda](https://github.com/RileyManda)
- Twitter: [@rilecodez](https://twitter.com/rilecodez)
- LinkedIn: [rileymanda](https://www.linkedin.com/in/rileymanda/)

Much appreciation to Evelyne Celyne Birungi for Implementing the header:

๐Ÿ‘ค **Evelyne Celyne Birungi**

- GitHub: [@Evelyne](https://github.com/CELYNEBIRUNGI)
- LinkedIn: [Evelyne](https://www.linkedin.com/in/evelyne-celyne-birungi-7b3178164/)

(back to top)



## Future Features ๐Ÿ”ญ

- [ ] **Improve the UI with animations**
- [ ] **Project UI Styling**
- [ ] **Testing with test**

(back to top)



## ๐Ÿ‘ฅ Attribution
- ProjectIcon: [Svgrepo](https://www.svgrepo.com/)

## Contributing ๐Ÿค

If you have suggestions ๐Ÿ“, ideas ๐Ÿค”, or bug reports ๐Ÿ›, please feel free to open an [issue](https://github.com/RileyManda/SciMovies/issues) on GitHub.
Remember, every contribution, no matter how big or small, makes a difference.

(back to top)



## Show your support ๐ŸŒŸ

Thank you for taking the time to explore this project! Your support means a lot to me. If you find my project valuable and would like to contribute, here is one way you can support me:

- Star the project โญ๏ธ: Show your appreciation by starring this GitHub repository. It helps increase visibility and lets others know that the project is well-received.

- Fork the project ๐Ÿด ๐ŸŽฃ: If you're interested in making improvements or adding new features, feel free to fork the project. You can work on your own version and even submit pull requests to suggest changes.

- Share with others ๐Ÿ—บ๏ธ: Spread the word about this project. Share it on social media, mention it in relevant forums or communities, or recommend it to colleagues and friends who might find it useful.

(back to top)



## Acknowledgments ๐Ÿ™

I would like to express my sincere gratitude to [Microverse](https://github.com/microverseinc), the dedicated reviewers, and collaborators. Your unwavering support, feedback, and collaborative efforts have played an immense role in making this journey a resounding success. I am truly grateful for your contributions and for being an integral part of my achievements. Thank you for your continued support.

(back to top)



## FAQ โ“

- **Question_1**
Do I have to use the vs code specifically?
- Answer_1
You can use any code editor of your choice.

- **Question_2**
Where can I download node JS for installation?
- Answer_2
Node.jsยฎ is a JavaScript runtime built on Chrome's V8 JavaScript engine.
It can be downloaded here: https://nodejs.org/en/download/Node.jsNode.js

(back to top)

## License ๐Ÿ“

This project is [MIT](./LICENSE) licensed.

_NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._

(back to top)