Introducing Lofi Club - Enjoy Hip hop beats to Relax or Code! 🎧

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello Devs πŸ‘‹

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'd like to share my latest project Lofi Club

Little flashback

I'm a big fan of lofi music, In fact, many of us are. Lo-fi is a music or production quality in which elements usually regarded as imperfections of a recording or performance are audible, sometimes as a deliberate aesthetic choice. Hearing to lofi music makes us more productive. So, I thought I could make one app with the main goal as distraction-free lofi music.


Introducing Lofi Club

Lofi Club is a place for listening to live 24/7 Lofi music. Comes with more than 17 awesome tracks that the app runs 24/7 enabling you to relax all time. Dark minimalist UI, Responsive Design, Live Chat, Distraction-free music player, to-do list, Pomodoro timer, control by keyboard, playlist, fullscreen mode makes the app super productive for daily use! So, sit back and enjoy! πŸ™Œ

Github Repo / Live Demo

Inspiration

I'm a fan of lofi music and always wanted to hear some freshly prepared lofi music. I was introduced to lofi.cafe and loved the working. I just really need to expand it with much more awesome feature. Used it as my first source of inspiration. Shoutouts to @linuz90 and maridivi89 for the inspiration!

πŸŽ‰ Features

Provides a great space for you to relax or just chill. Comes with more than 17 tracks. Dark minimalist UI makes it much more amazing. Live Chat, Pomodoro timer, control by keyboard, playlist, fullscreen mode makes the app super better than its competitors.

17+ tracks

Lofi Club comes with 17+ tracks making you adjust to your mood.

Distraction-free music player

Dark, Minimalist, Distraction-free UI to help you concentrate or relax. Also protects your battery life.

Control by Keyboard

Lofi Club supports controlling by the keyboard. You can do a bunch of things make your super productive. Here is the full list

Live Chat & Realtime live count

Chat with live members, get help. Be cooperative, chill together. Enjoy with the community.

Pomodoro Timer

Lofi Club comes with an amazing super-complex Pomodoro timer to meet your need and stay productive.

Stared Music Playlist

Lofi Club allows you to create your own playlist by staring your favoirite. Buzz with that!

Todolist

Organize daily tasks for work and life. Keep track of your doings.

Full-Screen Mode

Enjoy Lofi Club on full-screen mode. I know you're gonna love this.

PWA, Installable app

Lofi Club is a PWA, which means you can install on your local device and loads without internet/.

Fully Responsive

No matter what your device is, Lofi Club is made just for you. Enjoy lofi club in any device! πŸ’»

Feel free to try out: https://loficlub.now.sh/

Star the repo ⭐ https://github.com/saviomartin/loficlub

πŸ’» Built with

... and much more!

Planning, Building, and Deploying

Oh yeah, it was time-consuming, but I enjoyed it.

  • Designing

    I used Figma for my design, I'm not an expert but I know how to do basic designing and prototyping.
  • Planning

    Notion is an awesome tool to be cared for. It is super productive enough for me to plan my daily work. I used Pomodoro timers too, I want to be productive.
  • Time to code

    I'm a true React lover. I created Lofi Club with react, I used a lot of amazing libraries. The animations were built with Animate.css, used react-router-dom for routing, tailwind for styles and a bunch of amazing libraries to make everything work nice.
  • Deploying

    Deploying was done with Vercel. I'm a big fan of Vercel. Vercel is super fast and easy to use and manage. I also setup auto GitHub deploying so I don't have to deploy everytime something changes.

Challenges

ChallengeSolution
Change different URLs without loadingUsed react-router-dom
Generate thumbnailsused youtube api
Make the app 100/100 on PWA CheckOptimised app, solved errors
Responsiveness of the appUsed @media queries
adding scroll animationsUsed AOS library
Notification withing the appUsed react-toastify library

✨️ What's next

These are some of the features, I currently have in mind.

  • Live Video Chat
  • Complex todo page
  • Collaboration
  • Upvote a tracks
  • Share tracks with public
  • One tap login (Almost Completed πŸš€)

πŸ›‘οΈ Licensed under MIT


Lofi Club needs your Upvote

We're on producthunt - producthunt.com/posts/loficlub. Please help us my giving your upvote! πŸ’– Lofi Club - Enjoy hip hop beats to relax or study | Product Hunt

πŸ‘€ Wrapping Up

Yeah, that's a wrap. Hope you enjoyed Lofi Club. Feel free to use the app. Do not hesitate to share your feedback. Share on Twitter, tag me @saviomartin7

Star the repo ⭐ github.com/saviomartin/loficlub

🌎 Lets connect

🎸 Feedback

Hash tree needs your feedback to improve. Help Hash tree by adding your valuable reviews πŸ’–

πŸ™Œ Support

My projects are fueled by coffees β˜•, get one for me!

Tapas Adhikary's photo

Great work, Savio. Proud of you bro. Great going.

Savio Martin's photo

Thanks a lot Tapas Adhikary! Means a lot bro! I'm so happy to see you're enjoying!

Catalin Pit's photo

This is great! I upvoted the product on PH! :-)

Well done, Savio!

Savio Martin's photo

Thank you Catalin, Means a lot! It is so pleasuring to get feedback from you! Keep supporting!

Kieran Roberts's photo

Nice project Savio Martin and great article to go with it! Also, I love the design of your blog site. You've done a great job with it πŸ‘

Savio Martin's photo

Thanks a lot Kieran Roberts! Glad to see you loved the project! Keep supporting! Really love your content too!

Favourite Jome's photo

Another awesome project you've got. I really like it πŸ‘

Upvoted and stared!

Savio Martin's photo

Thank you! Means a lot! Love your works! Glad you liked the project! Keep supporting! πŸš€

Favourite Jome's photo

You're welcome. Thanks also 😊 Savio Martin

Piyush Sinha's photo

I love Lofi music... & fell in love with the look & feel of this web app. Good job Savio πŸ‘

Savio Martin's photo

Wow! Thank you Piyush Sinha! Great you enjoyed the project! Keep supporting!

Sai Ansul's photo

It's amazing Savio Martin I loved the web app..

Savio Martin's photo

Thanks a lot Sai Ansul! Glad to see loved the app!

Shlok Dungrani's photo

Amazing Project Savio Martin . Loved it

Savio Martin's photo

Thanks a lot Shlok Dungrani! Great to see you loved the app! Keep supporting!

Sanvi Merin's photo

Enjoyed the App, so much! Keep up the awesome work!

Savio Martin's photo

Thanks a lot Sanvi Merin! Glad to see you're enjoying the app!

Mausam Singh's photo

I found it really awesome, keep the good work. #LofiHipHop

Savio Martin's photo

Thank you! Means a lot! Keep supporting!

Anasooya Dutta's photo

Wow , this is 😍.

Savio Martin's photo

Thanks a lot Anasooya Dutta! Glad to see you're enjoying the app! Keep supporting! πŸ€—

Kingsley Ubah's photo

This is an awesome work.

Well done, Savio!

Savio Martin's photo

Thanks a lot Kingsley Ubah! Glad to see you enjoyed the app!

Chris Achinga's photo

My to go playlist ... way to go Savio Martin

Yatrik Patel's photo

How do I minimize or get rid of the black menu so I can see the cool background image?

s1.png

Savio Martin's photo

Sorry, this feature is coming really soon! Stay tuned! πŸ””