Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/eccb7/kingflix-app

Last synced: about 1 month ago
JSON representation
Host: GitHub
URL: https://github.com/eccb7/kingflix-app
Owner: Eccb7
License: mit
Created: 2023-07-08T21:22:28.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-07-08T21:22:42.000Z (over 1 year ago)
Last Synced: 2023-08-10T19:02:06.681Z (over 1 year ago)
Language: HTML
Size: 1.01 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        



  

  

  


  
The Kingflix WebApp




# 📗 Table of Contents

- [📗 Table of Contents](#-table-of-contents)

- [📖 The Kingflix WebApp ](#-the-kingflix-webapp-)

  - [🛠 Built With ](#-built-with-)

    - [Tech Stack ](#tech-stack-)

    - [Key Features ](#key-features-)

  - [🚀 Live Demo ](#-live-demo-)

  - [💻 Getting Started ](#-getting-started-)

    - [Setup ](#setup-)

    - [Prerequisites ](#prerequisites-)

    - [Install ](#install-)

    - [Usage ](#usage-)

    - [Run Tests ](#run-tests-)

    - [Deployment ](#deployment-)

  - [👥 Authors ](#-authors-)

  - [🤝 Contributing ](#-contributing-)

  - [Future Features ](#future-features-)

  - [⭐️ Show your support ](#️-show-your-support-)

  - [🙏 Acknowledgments ](#-acknowledgments-)

  - [📝 License ](#-license-)

# 📖 The Kingflix WebApp 

**The Kingflix WebApp** aims to provide an enjoyable and interactive platform for movie enthusiasts. It offers a visually captivating experience, allowing users to like and comment on movie pictures, fostering engagement and promoting discussions within the community. The project will leverage web development technologies such as HTML, CSS, and JavaScript to create the frontend interface and may involve backend technologies to handle user authentication, data storage, and retrieval.

Head to the LIVE DEMO SECTION for Live links and presentations

## 🛠 Built With 

### Tech Stack 

  ES6

  


    ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.

  


  HTML

  


    HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.

  


  CSS

  


    CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

  


JavaScript

  


    JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.

  


### Key Features 

- **Responsive Design:** The web application is designed to be responsive and accessible across various devices, including desktops, tablets, and mobile phones. This ensures an optimal user experience regardless of the device being used.

- **Movie Picture Gallery:** The web application showcases a collection of movie pictures, presenting them in an appealing and organized manner. Users can scroll through the gallery to explore different movie images.

- **Like Feature:** Users can express their appreciation for movie pictures by clicking the "Like" button associated with each image. This feature allows users to curate their favorites and provides a way to measure the popularity of different movies.

- **Commenting System:** Users have the ability to leave comments on movie pictures to share their thoughts, reviews, or engage in discussions with other users. The comment section enhances the interactive aspect of the platform and encourages community participation.

(back to top)


## 🚀 Live Demo 

> View the live demo of this project by clicking the text below.

- [See Live Demo](https://geekelo.github.io/kingflix/dist)

- [See Project Presentation video](https://clipchamp.com/watch/HixcadFOWWc)

(back to top)


## 💻 Getting Started 

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

> Clone the repository

```

git clone https://github.com/geekelo/kingflix.git

```

> And you are ready to begin your project

### Setup 

This project contains

An HTML FILE (free to edit) - file that contains html codes to give structure to the main webpage

A CSS FILE (free to edit) - file that contains css codes to style the webpage

A GIT IGNORE FILE (free to edit) - to hide personal or private files

HTML/CSS LINTER FILES (should not edit) - Do not make changes

A JAVASCRIPT FILE (free to edit) - that handles functionalities and dynamic HTML

### Prerequisites 

> You should have Node and Git Installed

> You should have basic knowledge on HTML / CSS / JavaScript

> You should have a code editor

### Install 

> Download install [VSCODE](https://code.visualstudio.com/) and [Git](https://git-scm.com/)

> To install linters, execute the following commands:

```

Initialize npm | ``` npminit -y ```

HTML | ``` npm install --save-dev [email protected] ```

CSS | ```npm install --save-dev [email protected] [email protected] [email protected] [email protected]  ```

```

### Usage 

To run the linters, execute the following command and fix linter errors:

```

HTML | ``` npx hint . ```

CSS | ```npx stylelint "**/*.{css,scss}" ```

If you get a flood of errors keep in mind that linters guide you in writing a clean code!

```

### Run Tests 

You can run this program on your browser

### Deployment 

You can deploy this project using the following procedure:

- Pick the right hosting provider.

- Choose the tool and method to upload your website.

- Upload files to your website.

- Move the website files to the main root folder.

- Import your database.

- Check if your website works worldwide.

(back to top)


## 👥 Authors 

(back to top)


👤 **Eloghene Otiede**

- GitHub: [@geekelo](https://github.com/geekelo)

- Twitter: [@Geekelo_xyz](https://twitter.com/Geekelo_xyz)

- LinkedIn: [eloghene-otiede](https://linkedin.com/in/eloghene-otiede)

👤 **Ojwang Briton**

- GitHub: [@Eccb7](https://github.com/Eccb7)

- Twitter: [@briton_otieno4](https://twitter.com/briton_otieno4)

- LinkedIn: [briton-otieno-ba6591244](https://linkedin.com/in/briton-otieno-ba6591244)

👤 **Kingsley chidozie Igbor**

- GitHub: [@Developer-Kingz](https://github.com/Developer-Kingz)

- LinkedIn: [Developer-Kingz](https://www.linkedin.com/in/kingsley-igbor-14b04720b/)

(back to top)


## 🤝 Contributing 

You can offer Contributions, submit an [issue](../../issues/), and make a feature request.

## Future Features 

- **Sorting and Filtering Options:** The web application provides sorting and filtering options to help users navigate the movie picture collection more efficiently. Users can sort the pictures based on different criteria such as genre, release year, or popularity. Additionally, filtering options allow users to narrow down their search based on specific preferences.

- **User Profiles and Activity Tracking:** Each user has a dedicated profile where they can view their liked movie pictures, manage their comments, and track their activity history. This feature enhances personalization and encourages users to revisit and engage with the platform.

- **User Registration and Authentication:** To fully engage with the platform, users can create accounts, log in, and manage their profiles. Registration allows users to personalize their experience, track their interactions, and have access to additional features.

## ⭐️ Show your support 

> Please give a ⭐️ to support this project

(back to top)


## 🙏 Acknowledgments 

> I would like to thank Microverse for inspiring this project

> Fonts: [Google Fonts](https://fonts.google.com/)

(back to top)


## 📝 License 

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

(back to top)