QTify is a song-browsing application built from scratch using ReactJS paired with Material UI and Swiper to deliver a seamless and aesthetic user interface, offering songs from different albums and genres for music lovers.
- Conducted a thorough analysis of the provided Figma design, successfully identifying and documenting required front-end components.
- Created modular UI components including Cards, Carousels, and Buttons optimizing for reusability across various sections of the application.
- Implemented an intuitive genre-based song filtering system using a tab component by modifying the one provided by MaterialUI, allowing users to browse songs by their preferred genre effortlessly.
- Utilized REST APIs to fetch data served by the backend server
- Deployed the website to Vercel
- Conducted a thorough analysis of the provided Figma design, successfully identifying and documenting required front-end components
- Designed a reusable button component with unique styling, adaptable for various functionalities across the application.
- Developed a responsive navigation bar featuring a custom logo, a search component with custom styling, and a feedback button.
- Created an eye-catching hero section with promotional content, effectively capturing user interest.
-ReactJS
- Module-scoped CSS
- Flexbox
- CSS variables
- Created a reusable Filters component, using Material-UI Tabs for a seamless and interactive filtering experience
- Utilized Axios to fetch the genre options and song data served by the backend, and performed error handling for the same.
- Implemented conditional rendering logic to display filter options within the Section component exclusively in the Songs section.
- ReactJS
- Module-scoped CSS
- API Integration and Data Handling
- Condition Rendering
- Component Reusability, Customizing Third-Party Components
- Deployed the Qtify React app to Vercel by importing the project repository from GitHub.
- Deployment using Vercel