Osinachukwu Nnanna

Just finished creating the app. I didn't do any devlogs because it was forked from an old repo I ended up revamping. I added tailwindcss and was assisted by AI to help with the google auth and just knowing how to set up the google console. You can fork it and make it better

Hello this is Devlog 6 Part 2 basically a small addition because I have been busy for the past two days going out and didn't want to force myself to provide so much for one devlog

Basically, in this devlog: I finished doing the project structure and cleaning out some of the extra codes and some lines of comment. Some lines of comment were removed and somewhere edited to make it seem like it wasn't just added more like a quick tip persay.

In any case I started on the n8n workflow and continued on it. Changed the model from openrouters deepseek model to the gemini2.5flash it ended up being much faster once I changed it. It's always good to experiment with the models and how much context they provide. The workflow was shown in the video in devlog 3. I am going to try to get the response in the cmd. Will probably need to install the express or flask package to let that work.

It wasn't too huge of a log in any case have a Lord filled day everyone.

Day 3 & 4
DEVLOG - 6 Part 1
CHECK OUT THE VIDEO here - https://youtu.be/TIvWHb6r9NE
Hey guys its still day three but I am probably not going to finish this devlog today so I will just upload this section and do the remaining tomorrow. First of all the work I am doing is going to be out of vscode because I started structuring the project a bit to make everything more modular separating functions and making it more detailed. I will show that in the part two of Devlog 6.
So as I said in the extra video I uploaded I started working on the n8n workflow to try and get the lyric responses. I had two ideas in mind

1. from the song the user selects -> Using an Ai Agent fetch the lyrics (it seems the simplest but I can't really be confident of the language repsonses e.g if said user selected Russian lyrics which is highely unlivelky but I have to address all areas). --currently working on this approach until i get the project direcotry ready I will test the workflow using a Chat input
2. I wanted to use a web scraper api so it will work even better with the genius urls it will give out and scrape data off the page and I will set the formatting this way responses will be more genuine. extra. ai agent + webscraper (probably sounds dumb but it could probably work) I will show the n8n workflow in a video.

By the way I am using deepseek/deepseek-chat-v3-0324:free provided by OpenRouter the context is enough for this workflow. You can check it out @ https://openrouter.ai/deepseek/deepseek-chat-v3-0324:free
If you'd like a free one with more context you can check out deepseek/deepseek-r1-0528:free @ https://openrouter.ai/deepseek/deepseek-r1-0528:free you could also use the paid ones if you'd like more reasoning. I'm sticking to the free one because of how simple the task I am using is just goota provide it with enough context.

So thats it for part one see you guys tomorrow, this has been devlog 6 part 1, project directory changes (project is a little broken) thank fully I have a backup branch

during the video if you check out the workflow you'd notice it was a bit slow and this is because of hardware limitations. I will be moving it to my n8n cloud instance once I am sure it is ready that will make it quicker
also the lyrics were in my opinion not as accurate as the ones on genius but I was still very accurate thats why I think implementing a scraper api but we'll see moving on.

If you have any suggestions please feel free to say.

Day 3
DEVLOG - 5

Good day everyone
Today I will be doing a variety of things and more what I want to implement will be the;
-> Adding an ASCII header using figlet
-> Using the gradient-string to add color
-> Trying to make the prompts interactive using clack and inquirer

I will probably separate them into different devlogs or maybe an idea may come in and I could get sidetracked so I had to note it, but I'll be careful.

Before all that happens I ran npm link so the lyriccli actually works this time.

After a lot of stuggling I the lyriccli package was linked to npm as a global package and I started testing. I made some changes to the index.js I know I said I will update the direcotry to make the functions more modular but i'll still put that aside because I want everything to work
I realized after a while that my current setup meant that the env had to be access in the directory locally. I dont really know how to say it any other way but in laymanns terms if I use lyric cli outside of the project directory the env wont be acessible. I think I will have to put an absolute path to the env in the index.js or with the search script i'll do that once I have figured somethings out
Some code has changed you can take a look at the previous commit and compare

CHECK OUT THE VIDEO
sorry in advance for the camera skills

I tried uploading the main devlog video here but it didnt pass so here are the youtube links
https://youtu.be/zB4AN2Vkn5U - main
https://www.youtube.com/shorts/gJ7k5QGZa5o - extras
https://youtu.be/Ss4EvrFtcTM - more explanation

Day 2
DEVLOG - 4

Since the env is being injected into index.js I want to work on the Search Feature I'll be testing it on index.js but maybe will change the directory structure to suit my preference when adding other functions/features call it what you want.
Now we'll be using axios to try the search feature in index.js

The work that was done on index js was pretty straight forward. I havent set up the client requests yet as that will be done towards finishing version 0, so this is just the work flow and i'll explain what it does.

BEGIN
-> Request using "<Song name"> --
-> Node (axios) processes it sends request to the Genius API to fetch the records related to the request
-> Genius API expects ACCESS_TOKEN which has been provided as an environmental variable
-> Genius API responds to the request given the records related to the and given in the original request.
END

My thoughts on this;
-> Just to tolerate what virtually anyone can do I want to see if it is possible to only search an artist or a song and it shows
For only artist: shows their songs and maybe Albums then songs.
For songs: Shows similarly names songs with their artist.

You can check out the script in the devlog 4 log txt file @
It may not be too easy if you're not familiar with it so here is what is going on in laymans terms.
axios says Hi Genius(via API), give me all the results for this search. Now show me just their titles so the console can list them out.

In the following Devlog I will continue trying to make it better maybe try to add some styling or maybe push it forward till when more of the project comes together. Still haven't added more the the directory to separate various things. Will do in the future.
I will close the Devlog for Today. See you on Day 3.

Day 2
DEVLOG - 3

I will begin creating the first command which will use the https://lyrics.ovh/(Lyrics.ovh) API. You can check out the site.

After trying the code they gave in the api page and testing out their site. I have come to the conclusion that their API doesn't work so I will be trying genius.org https://docs.genius.com/#/getting-started-h1
I didn't know what to put as the app url so i gave it the npmjs URL https://www.npmjs.com/

I got the environmental variables and no you cannot see it. Also I dont know how it skipped my mind to this point but I forgot to install the dotenv dependency.
By the way please never forget to use type: module if you are going to be using import instead of the commonjs require I thought it was something else until I checked again.
So the env works. It is kinda annoying to document every single step although I am not doing it professionally i'll learn as I move on.

I just took a snapshot for the checking of the env to see if the code sees it just a simple console.log and I advise anyone to take things just simply and break everything into the simple steps.
Moving on to DEVLOG - 4

Day 2 - Devlog2 (it's the first devlog of the day but I am not starting from one just trying to document it the best I can)

Just preparing project and right now, I just had AI just generate a PRD (Product Requirements Document). For those who don't know it's basically like a planning document used in product development that is used to clearly define what a product should do, why it should do it, and success will be measured. I ended up tinkering with it in many ways to suit some of the ideas I had in mind. I already stated it was AI generated and the reason for that is that sometimes when working on a flow(flowchart, conditions etc) escpecially when planning you tend to miss out some minor or little details which play a significant role to how the flow is going to run, this was also to make the theoretical aspect more tangible. Try it when preparing a project.

From the day before I already installed axios, chalk, inquirer and commander. To start up today I am going to be installing additional dependencies like @clack/prompts, figlet and gradient-string. After watching come tutorials and even using cli's like Vite's Create React App (CRA) and some other CLIs you may know. I wanted to add some style to it.

I moved on to setting up the project structure. I watched a little setting up of CLI structures on YouTube: https://www.youtube.com/watch?v=rJKRhPI6V9c, https://www.youtube.com/watch?v=GupmEQFkDJM checkout the videos if you are interested in creating simple cli's. I already have knowledge of JavaScript form practice with the native also React and Angular so didn't check for videos unless I wasn't really sure of it or needed clarification.

Just created the index.js file in the bin directory. Its my preference to separate it and it is quite common you should try it. Added the bin and index to the package.json directory.

I will begin creating the first command which will use the https://lyrics.ovh/(Lyrics.ovh) API will be on the next devlog.

If you'd like to see more snapshots you can check out the GitHub repo.

DEVLOG - 1

Just created and initialized the dependencies everything is pretty much blank. Added the devlog folder to the GitHub repository around this time so you can check basically how I wrap my head around creating a CLI application. I will be logging me experience and everything and hopefully I do it as steadily as possible so I can upload each and every devlog here

was working on game loops and was trying all sorts of ways to use the requestRef and previousTimeRef constants, kinda interesting but frustrating to figure out which syntax works and doesn't work and being detailed with everything. Wasn't really in the hacking grind today. Till next time

Really didn't realize I could create a project here I thought it was only for submissions. But we won't worry about that, just notes for next time and for anyone else who isn't aware. So, I realized today that you had to use 'import type', as against 'import' in certain situations (returned values, constants, functions, classes etcetera that will be used during the runtime). Although there are still a lot of bugs and things that have to be fixed i've been using '21st.dev' to help with designing the components (soo many factors have to be considered to let it be viewed in the localhost dev session). Its coming together slowly but surely. I'll post another project I've also spent some time on so follow and you'll see it.

Soon I'll put in demo links hosted on Netlify so it can be tested, and you can send me some reviews. Anything will be fine as long as you spot it or you feel something could be better. Happy coding everyone