Skip to content

ioancruso/musicapp

Repository files navigation

Digital Music Library

Welcome to the Digital Music Library! This application is designed as part of an assignment for the Grad/Junior Full Stack Engineer (Innovation Team) position. The primary goal of this project is to visualize artists and their albums, allowing users to open albums to view a description and a list of songs. Additionally, the app features a search functionality with an autocomplete component to provide suggestions as users type in the search box.

What I Used

  • Next.js - A React framework for server-side rendering and static site generation.
  • Supabase - An open-source Firebase alternative for authentication, database, and storage.
  • React - A JavaScript library for building user interfaces.
  • TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
  • SCSS - A CSS preprocessor that adds power and elegance to the basic language.
  • Framer Motion - A library for animations and gestures in React.

Features

  • List all artists and their albums
  • List all the albums
  • View detailed information about each album, including a list of songs
  • A playlist section where you can create your own playlist
  • Search functionality with autocomplete
  • User authentication
  • Responsive design

Guidelines Followed

The project follows the given guidelines, ensuring a well-structured and maintainable codebase. It includes all required functionalities and considers related security aspects for the search feature.

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Ensure you have the following installed on your local machine:

  • Node.js
  • npm
  • Git

Installation

  1. Clone the repository:

    git clone https://github.com/ioancruso/musicapp.git

    cd musicapp

  2. Install the dependencies:

    npm install

  3. Set up Supabase:

    • Create a .env.local file in the root of your project and add the following:

      SUPABASE_URL=https://horohbpvdxoasuwqopsl.supabase.co
      SUPABASE_SERVICE=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imhvcm9oYnB2ZHhvYXN1d3FvcHNsIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTcyMDMwMzAzNCwiZXhwIjoyMDM1ODc5MDM0fQ.f5lPXc-zIXs8dEABmewm0XDSrSQs95HVBLLVZH59Ylw
      
  4. Run the application:

    npm run dev

  5. Access the application:

    Open your browser and navigate to http://localhost:3000/ to see the app in action.

Contact

If you have any questions, feel free to reach out to me at [email protected].


Thank you for checking out the Digital Music Library! If you have any questions or feedback, feel free to open an issue or contact the repository owner.