QTify v2 Frontend

Frontend for QTify - A Song Browsing Web App

View QTify Frontend • View Figma Design

Table of Contents

1. Project Overview
2. Setup Instructions
3. Project Breakdown
4. Potential Improvements

Project Overview

QTify is a song browsing web-app developed to provide a smooth music discovery experience. This project focuses on building the frontend of the application using a provided Figma design.

Tech Stack

• React.js
• Material UI
• Axios
• Vercel (for deployment)

Features

• Responsive Navbar with Search Bar and Feedback modal.
• Album Grid with dynamic data fetched via REST APIs.
• Song Carousel with genre-based filtering and Likes.
• FAQ Section with Material UI Accordions.
• Music Bar to play songs within the app.
• Search with dropdown listing of albums and navigation to Album Details page.
• Deployed on Vercel for live access.

Setup Instructions

Frontend

• Installation

  # clone repo
  git clone https://github.com/Anusree6154s/qtify-frontend
  cd qtify-frontend/qtify
  
  # install dependencies
  npm install

• Running the App

  npm start

Project Breakdown

Components

• Navbar and Hero Section:

  • Scope of Work:

    • Developed a responsive Navbar that includes reusable components: Logo, Search Bar, and Feedback Button.
    • Designed an engaging Hero Section with a visually striking image and attention-grabbing headline.

  • Skills Used: React.js, Component Design, Responsive Design, CSS, Figma Assets.

    

    Navbar and Hero Section

• Album Grid and Albums Section:

  • Scope of Work:

    • Created a reusable Album Card component using Material UI for a consistent design.
    • Fetched and dynamically populated the grid with data from the API, displaying top albums.

  • Skills Used: Material UI, Axios, CSS Grid.

    

    Album Card Component

• Songs Filter and Carousel with Genre Tabs:

  • Scope of Work:

    • Developed a genre-filtered song section with a Tab component and a carousel for better navigation.
    • Fetched genre-specific song data from the API, ensuring the content dynamically updates based on the genre selected.

  • Skills Used: CSS Styling, Conditional Rendering, Swiper Carousel, Figma Design.

    

    Songs Section with Genre-based Tabs

• FAQ Section, Album Details Page, and Music Bar:

  • Scope of Work:

    • Implemented the FAQ section using Material UI's Accordion component for smooth interaction.
    • Designed and integrated a Music Bar for seamless song playback within the app.
    • Built a search functionality with dropdown results and created a detailed album page with pagination.

  • Skills Used: Functional Components, React Router, Pagination.

    

    FAQ Section and Music Bar

    

    Album Details Page

Deployment

Deployed the frontend application on Vercel for easy access and continuous deployment.

Potential Improvements

• Add user login and authentication.
• Implement a playlist feature for users.
• Enable user ratings and reviews for songs and albums.
• Optimize the website for better performance and loading times.