Rythmetic - Face Recognition Web Application

Submission for Microsoft Engage 2022 🌟

View Deployed Website · View Demo Video · View Design Document

Features and Interfaces

1. Register Page

   • Seamless registration page which asks for basic details of the user and registers new users using face detection and generates a unique passcode automatically

   • 

   • when no face is detected, it will display an error message

   • 

   • When multiple faces are detected, it will display an error message

   • 

   • When a single face is detected clearly, it will allow the user to sign up successfully

   • 

2. Login Page

   • When the user clicks the sign up button, he/she will be directed to the login page where the user needs to enter the registered email id

   • 

   • If the user tries to login by entering an unregisterted email id, it will display an error message

   • 

3. Verification Page

   • When the user enters the registered email id and clicks on the Next button, he/she will be directed to the verification page.

   • As soon as the user is verified, the username will be displayed on the screen and will be allowed to login successfully.

   • 

   • If the user is not verified, it will display 'unknown' and user will not be allowed to login.

   • 

4. Home Page

   • As soon as the user login successfully, it will direct to the home page.

   • Here the user can play different songs, move to the next or the previous track and increase or decrease the volume as well.

   • 

   • The navbar has a search option also. As soon as the user clicks the search button the songs will get filtered according to the search value.

   • 

5. Mood Detection

   • The navbar of the homepage has a 'My Mood' option which directs the user to mood detection page where the user needs to capture their image to detect the mood.

   • 

   • As soon as the mood is detected, it will be displayed on the screen and user will be allowed to proceed.

   • 

   • When the user clicks on the 'Apply' button, songs get filtered according to the detected mood.

   • 

6. Ecommerce Page

   • The navbar of the homepage has a 'Shop Now' option which directs the user to a basic ecommerce webpage which has music related products.

   • 

   • The user can add the products to the cart as well as remove the products from the cart. The cart can be viewed by clicking on the bag icon in the navbar of the ecommerce page.

   • The quantity can be increased or decreased and the total amount gets updated automatically as the products are removed or the quantity gets changed.

   • 

7. Logout

   • The navbar of the homepage has a logout icon which directs the user back to the login page.

Also the website has a favicon icon to enhance its UI and increase its authenticity.

Tech stack

• Node.js
• Express
• MongoDB
• Handlebars
• Bootstrap
• HTML5
• CSS3
• JavaScript
• Git
• Heroku
• Figma

Points to remember while testing the app

1. Allow permissions for camera and mic
2. In case any user is not broadcasted it is probably due to server overload, REFRESH the window to solve this.
3. Make sure the URL is starting with https
4. During face recognition, remember that the confidence score of the api is low therefore similar faces may be considered same.

Getting Started

Prerequisites

Have NodeJS and MongoDB installed on your machine.

Installation

1. Clone the repo

   git clone https://github.com/Mishthisinghal/Microsoft-Engage-Rythmetic.git

2. cd ./Microsoft-Engage-Rythmetic

3. Install node dependencies

   npm install

4. Create a new .env file in root directory.
5. Gain Mongo connection string from Mongo DB and paste in .env as DATABASE

   DATABASE=mongodb+srv://mongodb_connection_string

6. Start the server

   npm run start

7. The app is now running at http://localhost:3000/

Useful Links

• Deployed Website
• Demo Video
• Design Document

Need help?

Feel free to contact me on LinkedIn

---