Introducing Lofi Club - Enjoy Hip hop beats to Relax or Code! 🎧
Tags: react, javascript, linux, python
Published: 2021-05-14 18:20:00

## 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](https://loficlub.now.sh/)

### 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

%[https://www.youtube.com/watch?v=JD6nQrxT5LA]

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](https://github.com/saviomartin/loficlub) /[ Live Demo](https://loficlub.now.sh/)

## Inspiration
![](https://ph-files.imgix.net/84c8e5ad-9ae2-4e79-a106-135169504786.png?auto=format&auto=compress&codec=mozjpeg&cs=strip&w=507&h=380&fit=max&dpr=1)
I'm a fan of lofi music and always wanted to hear some freshly prepared  lofi music. I was introduced to [lofi.cafe](https://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](https://twitter.com/linuz90) and [maridivi89](https://twitter.com/maridivi89) for the inspiration!

## 🎉 Features

![](https://raw.githubusercontent.com/saviomartin/loficlub/main/public/assets/app-screenshot.png)

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](https://loficlub.now.sh/keyboard-shortcuts)

### 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/](https://loficlub.now.sh/)

Star the repo ⭐ [https://github.com/saviomartin/loficlub](https://github.com/saviomartin/loficlub)

## 💻 Built with

- [React](https://reactjs.org/)
- [Tailwind](https://tailwindcss.com/)
- [Material UI](http://material-ui.com/): for styling and Icons
- [Animate.css](https://animate.style/): for smooth Animations
- [AOS](https://michalsnik.github.io/aos/): for scroll animations
- [react-router-dom](https://reactrouter.com/web/guides/quick-start): for routing
- [Vercel](https://aws.amazon.com/amplify/): for hosting

... 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](https://animate.style/), 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
| Challenge      | Solution |
| ----------- | ----------- |
| Change different URLs without loading | Used `react-router-dom` |
| Generate thumbnails      | used youtube api   |
| Make the app 100/100 on PWA Check | Optimised app, solved errors |
| Responsiveness of the app   | Used `@media` queries        |
| adding scroll animations | Used AOS library |
| Notification withing the app | Used `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](https://www.producthunt.com/posts/lofi-club) - [producthunt.com/posts/loficlub](https://www.producthunt.com/posts/loficlub). Please help us my giving your upvote! 💖
<a href="https://www.producthunt.com/posts/lofi-club?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-lofi-club" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=295845&theme=dark" alt="Lofi Club - Enjoy hip hop beats to relax or study | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
## 👀 Wrapping Up
Yeah, that's a wrap. Hope you enjoyed [Lofi Club](https://loficlub.now.sh/). Feel free to use the app. Do not hesitate to share your feedback. Share on Twitter, tag me [@saviomartin7](https://twitter.com/SavioMartin7)

Star the repo ⭐ [github.com/saviomartin/loficlub](https://github.com/saviomartin/loficlub)

### 🌎 Lets connect
- [Github](http://github.com/saviomartin)
- [Twitter](https://twitter.com/saviomartin7)
- [LinkedIn](https://www.linkedin.com/in/saviomartin/)
- [Instagram](https://www.instagram.com/teen_developer/)

## 🎸 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! 
[![](https://github.com/appcraftstudio/buymeacoffee/raw/master/Images/snapshot-bmc-button.png)](https://www.buymeacoffee.com/saviomartin)