Moodflix

<a href="https://moodflix.th3wall.codes"> <img alt="Moodflix – your mood, our suggestions" src="https://cdn.jsdelivr.net/gh/Th3Wall/assets-cdn/Moodflix/Moodflix_Backdrop_Placeholder.png"> <h1 align="center">Moodflix</h1> </a> <p align="center"> Your mood, our suggestions. </p> <p align="center"> <a href="https://twitter.com/Th3Wall25"> <img src="https://img.shields.io/twitter/follow/Th3Wall25?style=flat&label=Th3Wall25&logo=twitter&color=0bf&logoColor=fff" alt="Th3Wall Twitter Profile" /> </a> <a href="https://twitter.com/Kasuken"> <img src="https://img.shields.io/twitter/follow/Kasuken?style=flat&label=Kasuken&logo=twitter&color=0bf&logoColor=fff" alt="Kasuken Twitter Profile" /> </a> </p> <p align="center"> <a href="#-about"><strong>About</strong></a> · <a href="#%EF%B8%8F-demo"><strong>Demo</strong></a> · <a href="#sparkles-features"><strong>Features</strong></a> · <a href="#rocket-technologies"><strong>Technologies</strong></a> · <a href="#-screenshots"><strong>Screenshots</strong></a> · <a href="#-run-locally"><strong>Run Locally</strong></a> · <a href="#white_check_mark-requirements"><strong>Requirements</strong></a> · <a href="#-license"><strong>License</strong></a> </p> <br/>

🎯 About

Overview of our project

We have started this project with the purpose of participating to the Microsoft Azure Hackathon on dev.to.<br /> Our project's goal is to add special features to an existing list of movies.<br /> Imagine yourself at night, thinking about what movie to watch and no title comes to your mind. Well, that's exactly when Moodflix can help you in identifying the perfect movie for your night, based on your actual mood. <br /> And after selecting your movie, Moodflix shows you all the movie's reviews with their own mood icon. <br /> You can also get a global view at a glance to understand whether people have enjoyed it or not.<br /> Go try it and please let us know if you enjoyed it with a ⭐️ - we would really appreciate it.<br />

Preview video

▶️ Demo

Here you can find the demo link:

• Hosted on Azure

:sparkles: Features

:heavy_check_mark:   Capture your face photo directly from your webcam/phone<br /> :heavy_check_mark:   Analyze and display your top emotion from the photo<br /> :heavy_check_mark:   Find objects and special objects on your face (beard, glasses, hat, ect.) and display them in our avatar selections<br /> :heavy_check_mark:   Display a list of movies based on your mood<br /> :heavy_check_mark:   Analyze and display the emotion from the reviews and display an avatar next to each description<br /> :heavy_check_mark:   Keywords extraction from the overview of the movies<br />

:rocket: Technologies

Frontend (Th3Wall)

• TMDb API's
• React
• React Hooks
• React Context API
• React Router
• React Webcam
• SCSS
• Framer Motion
• React Icons
• Axios

Backend (Kasuken)

• ASP.NET Core 6
• C# 10
• .NET 6
• Azure Cognitive Services SDK
• Swagger
• Microsoft Clarity

Cloud Services

• Azure Text Analysis
• Azure Face API

CI/CD with GitHub Actions

To deploy the solution, we use two different GitHub Actions: one for the backend and the other one for the frontend.

📸 Screenshots

Loading page <br/>

Landing Page with Webcam <br/>

Results <br/>

Movie Details

<br/> <br/>

👨🏻‍💻 Run Locally

Frontend

• Clone the project

  git clone https://github.com/kasuken/Moodflix

• Go to the project directory

  cd Frontend

• Install dependencies

  npm install

• Start the server

  npm start

Backend

• Clone the project

  git clone https://github.com/kasuken/Moodflix

Go the directory Backend and open the solution with Visual Studio 2022 Press F5 to start the debug session.

:white_check_mark: Requirements

Before starting 🧑‍💻, you need to have Git, Node and .NET 6 installed. <br/>

🧑‍💻 The Team

• Emanuele Bartolesi (Website)
• Davide Mandelli (GitHub)

📝 License

Apache-2.0 License

🔮 Repo Analytics