Description

A new functionality called "7-Feature-Favorites-functionality" has been added. This functionality allows users to save and submit their favorite songs to the "Liked Songs" section by simply clicking on the heart icon located on each song in the search section. Once the icon is clicked, it changes color from black to green, indicating that the song has been saved as a favorite and sent to the "Liked Songs" section.

Changes made

The following changes have been made to the project:

• Added getLikedSongs.ts and LikedContent.tsx files.
• Inside the app folder, a new folder called liked has been added containing a new page.tsx file.
• Added a "like" button to the SearchContent.tsx search component.
• Added LikeButton.tsx file.

These changes allow users to more effectively interact with their favorite songs, save them and send them to the "Liked Songs" section, thus improving their overall experience with the app.

##Images:

Description

For the implementation of the new feature 2-Feature-Layout, the following components have been added and configured:

• Sidebar on the left: In the home tab, a Sidebar on the left has been added that contains the sections Home, Search and Your Library. In the Your Library section, users can access their song library.

• Back and forward arrows: Back and forward arrows have been added to the home page to facilitate navigation.

• Sign up and Log in buttons: Two buttons have been added to the user interface to allow users to register (Sign up) and log in (Log in).

• Liked Songs button: A Liked Songs button has been added where the user can view the songs they have liked.

These components are essential to the functionality and user experience of the new feature.

Tasks

• Add Sidebar on the left with Home, Search and Your Library sections
• Add back and forward arrows in the home part
• Add Sign up and Log in buttons
• Add Liked Songs button

Image

Description

Worked on new feature called 9-Feature-Stripe-integration. As part of this task, the following updates have been made:

Files added:

• Added error.tsx and loading.tsx files to site, liked and search folders.
• Added files stripe.ts, stripeClient.ts, supabaseAdmin.ts, helpers.ts in libs folder.

Modifications:

• The AuthModal.tsx file in the components folder has been modified.
• Updated the Header.tsx file, adding a toast.success message to show a notification on successful login and logout.

Corrections:

• Fixed types.ts file.

Facilities:

• stripe and Stripe CLI have been successfully installed.
• @stripe/stripe-js and react-spinners dependencies have been installed.

Images:

Description

A new feature has been created called 4-Feature-Authentication-modal. This feature includes a modal window that allows users to register or log in as needed. Additionally, users can recover their password in case they have forgotten it.

Details

• A Magic link has been added to facilitate user access.
• The modal window is connected to Supabase to store user data securely and efficiently.
• Integrated the GitHub and Googleproviders to allow users to log in with their GitHub or Google accounts.
• toaster has been installed to provide visual feedback to users when they log in successfully.
• Radix and Zustand have been installed to improve project status management and user interface.

Next steps

• Perform tests to ensure that the modal window works correctly in different scenarios.
• Collect feedback from users to make improvements in future iterations.

Image:

Description

For the implementation of the new feature 1-Feature-setup, I have installed and configured the following dependencies:

• Next.js: A React framework that allows the generation of static sites and server-rendered web applications.
• React: A JavaScript library for building user interfaces.
• ESLint: A static code analysis tool to identify problematic patterns found in JavaScript code.
• Tailwind CSS: A useful CSS framework for quickly building custom user interfaces.
• Tailwind Merge: A tool for combining Tailwind CSS utility classes.
• React Icons: A library that provides a convenient way to include popular icons in React projects.

These tools are essential for the development and quality of the code of this feature.

Tasks

• Install Next.js.
• Install React.
• Configure ESLint.
• Install Tailwind CSS.
• Install Tailwind Merge.
• Install React Icons.

Description:

A new feature called "8-Feature-Player-functionality" has been implemented. This feature improves the functionality of the music player in our app.

Details:

• Song photo has been added to the player.
• The song name and artist name are now displayed next to a heart icon in the player to know if it belongs to the favorites section.
• Buttons have been added to play, pause, rewind and forward the song that the user wants.
• Users can now play songs directly from the "search", "Liked Songs" and "Your Library" sections.

Next steps:

• Perform tests to ensure that the new functionality works as expected.
• Collect user feedback for future improvements.

Images:

Description

New functionality has been implemented in the "Your Library" section. Now, clicking on this section opens a modal window that allows the user to add a new song to the platform.

Details

In this modal window, the user can provide the following song details:

• Song title
• Artist name
• Song cover
• The song in .mp3 format

Added Files

The following files have been added to implement this functionality:

• Library.tsx
• useUploadModal.tsx (Custom Hook)
• UploadModal.tsx (Component)
• Input.tsx (Component)

Added Dependencies

The following dependencies have been installed to implement this functionality:

• uniqid
• query

Images:

Description

A new functionality has been implemented that allows you to fetch the data of the songs that are added in the "Your Library" section. This data is then displayed in the Home tab with its respective image, song title and author.

Details

Two folders and several files have been added to implement this functionality:

Folders:

• actions folder with the getSongs.ts file.
• search folder with page.tsx file

Custom Hooks:

• Custom Hook useLoadImage.ts.
• Custom Hook useDebounce.ts.

Components and files:

• PageContent.tsx component.

• SongItem.tsx component.

• PlayButton.tsx component.

• MediaItem.tsx component.

• SearchInput.tsx component.

• SearchContent.tsx component.

• types.ts file where the code for the Song type was created.

• File middleware.ts.

• File getSongsByUserId.ts.

• File getSongsByTitle.ts.

Image:

Description:

Within the framework of this project, I have made the following updates:

1. Creating a new Hook: I have created a new Hook called useUser.tsx. This Hook is essential to the functionality of our project and will provide a number of useful features.

2. Implementation of SupabaseProvider.tsx: I have created the file SupabaseProvider.tsx where the providers are. This file is crucial for managing the providers in our project.

3. Supabase Configuration: Additionally, I have configured Supabase as part of the backend of our project. This will allow us to take advantage of Supabase and improve the efficiency of our backend.

4. Creating types.ts: I have created a file types.ts which contains the Subscription, Pricing, Products and User Details interfaces. This file will help us keep the code clean and organized.

Images: