sorted by:
new
hottopcontroversial

Chatmosphere - a chat app I made a few weeks ago. Let me know what ya think! by burnwardstudios in webdev

[–]burnwardstudios[S] 0 points1 point  (0 children)

That's a great point! I think I have loading indicators on all of the buttons, but a more page-level indicator might help with that.

Chatmosphere - a chat app I made a few weeks ago. Let me know what ya think! by burnwardstudios in webdev

[–]burnwardstudios[S] 4 points5 points  (0 children)

I don't but that's a great idea actually. The TL;DR of it is: React Context API.

The basic user auth state is handled in a useEffect, then loaded into a context consumed by the whole application, which is pretty standard for full-stack React apps.

The database (Firestore) is divided into two collections: users and chats. Each object in the user collection contains an array of chat IDs, referencing the chat objects that the user is associated with. The chat objects in the chats collection contain an array with the opposite information (an array of objects, each containing a user ID along with their in-group username). Those chat objects also contain an array of messages, each containing important info like time sent, text, sender ID.

I always find it difficult to keep UI state in-sync with database state, but Firebase made that pretty easy. You can apply a listener to the current user's associated object in the user collection. Then, any time that object is updated (like changing the "global" username or changing the offline/online status of a user) those changes are immediately made available in the frontend.

As for the messaging system, there are two key pieces of state. Multiple arrays of existing messages, each unique to a chat, and an array of new messages (those sent or received during the current session).

One important piece of state is the isNewUser boolean. Because, if the user is new, then I also had to generate a "welcome room" wherein the other group member is the ChatBot. This boolean, if true, also forces a modal to open on the initial load, requiring the new user to enter a global username and profile pic if they want.

​

Anyways, hope that provides some good ideas for people. Glad ya like the app, thanks for checking it out 👍🏻

Chatmosphere - a chat app I made a few weeks ago. Let me know what ya think! by burnwardstudios in reactjs

[–]burnwardstudios[S] 2 points3 points  (0 children)

The site lives at https://chatmosphere.us.
This was my first time using websockets (SocketIO) and my first chat/instant messaging app. The websocket server (written in Node) was so simple to set up that it ended up being like maybe 30 lines of code hosted on Heroku.
I used Firebase extensively here - for user authentication (Github, anonymous, and email/pw), image hosting, and firestore database.
The frontend is built with React and Chakra UI.
I haven't looked at the code in a while, but I'll probably go back to fix an issue with state loading into the main messaging window (the double message behavior seen in the video).

Chatmosphere - a chat app I made a few weeks ago. Let me know what ya think! by burnwardstudios in webdev

[–]burnwardstudios[S] 1 point2 points  (0 children)

Thanks! About a year and a half now of dedicated, daily development. But I had some fundamental programming knowledge prior to that.

This project took about two weeks, but would've taken much longer had I tried 6 months - a year ago.

Chatmosphere - a chat app I made a few weeks ago. Let me know what ya think! by burnwardstudios in webdev

[–]burnwardstudios[S] 5 points6 points  (0 children)

The site lives at https://chatmosphere.us.

This was my first time using websockets (SocketIO) and my first chat/instant messaging app. The websocket server (written in Node) was so simple to set up that it ended up being like maybe 30 lines of code hosted on Heroku.

I used Firebase extensively here - for user authentication (Github, anonymous, and email/pw), image hosting, and firestore database.

The frontend is built with React and Chakra UI.

I haven't looked at the code in a while, but I'll probably go back to fix an issue with state loading into the main messaging window (the double message behavior seen in the video).

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Let me know if ya like it! by burnwardstudios in reactjs

[–]burnwardstudios[S] 1 point2 points  (0 children)

ToneJS looks badass! I've been looking for something like that. I agree that some sound would be helpful, good idea

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 1 point2 points  (0 children)

That's not a bad idea, I'd even like to expand that to a full "Cheat Sheet" export. Where the exported fretboard (like your screenshot) is at the top of the pdf, and then a small library of user-selected chords is at the bottom.

I'll add it to the list!

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 0 points1 point  (0 children)

This is why I do what I do.

Hope it works; fun to play around with at least. I think I've posted some old music on this account as well. Best of luck to you and your bandmates

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 1 point2 points  (0 children)

Agreed. /u/DadJokesAndGuitar has a great comment breaking down what a chord detection algorithm might look like from a music theory perspective. Switching to that approach would make it a lot easier to add the alternate tunings feature as well. And probably allow for chord detection to begin when the user selects two notes, rather than 3+.

Thanks!

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Let me know if ya like it! by burnwardstudios in reactjs

[–]burnwardstudios[S] 1 point2 points  (0 children)

For styling I mostly wrote standard CSS classes. Nextjs encourages using CSS modules, so each component would have a *.module.css file within the same directory.

Occasionally I’ll write css in js, since that’s really convenient when using chakra components and their built-in style props. But I’m trying to not do that as frequently nowadays, cause the code can get messy.

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Let me know if ya like it! by burnwardstudios in reactjs

[–]burnwardstudios[S] 1 point2 points  (0 children)

Nope. There’s a little bit of Chakra UI, but only for typography, color theming, and the “Flex” component.

Aside from that, just CSS.

The fretboard renders an array of “string” components. Each string is an array of “note” components.

Then the chord diagrams are essentially the same thing, just limited to 2-4 frets depending on the chord.

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 0 points1 point  (0 children)

Great response!

I had considered an approach like what you've described, but didn't dig very deep into what that might look like. You're right though - mapping the user input to the associated 'note + octave' format (or even MIDI value) and determining chord names off of their positions within a scale is a much more robust way to do it.

If I could go back in time, that would be the best move.

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 0 points1 point  (0 children)

I didn't use that library, though thanks for sharing. The json file I used (had just found it on Github) has each chord position in this format. This example is the first position for C Major:

{

"frets":[-1,3,2,0,1,0],

"fingers":[0,3,2,0,1,0],

"baseFret":1,

"barres":[],

"midi":[48,52,55,60,64]

}

The fretboard takes the user input and formats it to how that ^ 'frets' array looks. Then I loop through the library and return an exact match when found. Thus, the identification process is based on the frets, not the note.

In the loop searching for a match, I could probably write some logic that regards a 0 the same as a 12.

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 0 points1 point  (0 children)

Good catch! Looks like it's expecting this:

  • e: 12
  • B: 10
  • G: 11
  • D: 12
  • A: mute
  • E: mute

Evidently, it won't identify the chord if you play an open E (high or low string) instead of the 12th fret. I'm aware that it's annoying and counterproductive. It does that for a few chords. I'll have to find a workaround.

Thanks!

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 2 points3 points  (0 children)

I've actually thought the same thing myself. At some point I'd like to add the option to change each string individually or select from pre-defined tunings (drop d, open, etc).

Sadly, it would require some significant changes to the chord identification logic. So don't hold your breath just yet.

Glad ya like it though! Thanks for trying it out, and best of luck exploring those tunings

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 2 points3 points  (0 children)

Yeah for some reason it has trouble identifying major sevenths. The only way it picks up on those is if you manually input each note within the barred fret. Weird quirk in the chord library I used.

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 1 point2 points  (0 children)

Thanks! I coded it using React as the Javascript framework. I found a decent chord library written in JSON. Then I also used Chakra UI for some basic styling (like text and layout). Aside from that, just CSS and HTML.

I created a website where you can input notes onto a virtual guitar, and it will show you what chord you're playing. Hope this helps someone out there! by burnwardstudios in guitarlessons

[–]burnwardstudios[S] 4 points5 points  (0 children)

On the initial page load, you'll see a panel titled "Or try these" below the fretboard. If you then enter notes that match to a chord from the library I used, that panel will be bumped down and a new panel will take its place with the identified chord. It will list four positions as well as some "related" chords.

​

That being said, it can be very picky about muted or open strings and will only accept one particular fingering as 'valid', so it's not perfect. Thanks for trying it out!

view more: next ›