utkarshn10/focusly

Open source app to remain focused during your deep work sessions. Built using ReactJS

Welcome to Focusly

Hacktoberfest 2023 🎉

Focusly is excited to participate in Hacktoberfest, and we warmly welcome contributions from all participants! Whether you want to report an issue, submit a bug fix, or add a new feature, your contributions are highly appreciated. Happy Coding!

Contribute directly using Gitpod

Demo

Checkout the website here: Focusly

Tech Used

Contributing

• Thank you for considering to contribute
• Feel free to submit feature requests, UI updates, bugs as issues.
• Checkout Contribution Guidelines for more information.
• Have a feature request? Feel free to create a issue for it.

Prerequisites

Before cloning, please make sure you have already installed follownig:

• Git
• NodeJS

Installation

1. Fork the repository
2. Clone the project
3. Navigate to cd Focusly
4. Install dependencies with npm install --legacy-peer-deps
5. Run npm start

OR

1. You can directly go to this Gitpod link and it will automatically set up the environment for you.

Your Support means a lot

Give a ⭐ to show support for the project.

Thanks to all Contributors 💪

Thanks a lot for contributing to Focusly.

Translations

Ukrainian Language / Українська мова: link

focusly's Issues

Create a contributors Section

A contributors section where all the contributors will be listed with the GitHub profile links.

Code cleanup required

Cleanup code so that its easier for more developer's to contribute :)

Contribution Guildelines

Add contribution guidelines to README.md

Refer this link

New LOFI sound

Adding new LOFI sound to the corresponding section.
Sound: https://soundcloud.com/sweet-medicine/sweet-medicine-w-odyssee-breezin?in=sweet-medicine/sets/sweet-medicine-sunday-2

I'd like to work on this issue.

Change the Tab design

Change the border of tabs to less rounded.

Example:

Link in Navbar

Add link to homepage in Focusly in Navbar.

Add spinner

Add spinner to cards.

A spinner should be added to the cards so the user knows that the sound is being loaded.

Add some styling to the border of Focused Time box

Redesign the Timer

**Feature: **
Current Design:
Timer Pauses when you click on a card and sound starts and pauses when you click to pause the sound or stop the sound.

Requirement :
A minimal looking timer design.

Improvements in Navbar and Footer

Add improvements like upper and lower border to navbar and footer repectively.

Navbar breaking in mobile devices

Describe the bug
The navbar is breaking in mobile devices.

To Reproduce
Steps to reproduce the behavior:

1. On your mobile device open focusly.vercel.app.

Expected behavior
The tabs section should be below the navbar and timer should be inside the navbar.

Screenshots

Additional context
Add any other context about the problem here.

Adding each focus title below, or on hover

Is your feature request related to a problem? Please describe.
I'm sure most people are not able to guess the focus mode based on the icons, so I believe adding a title will help them identify the focus mode

Describe the solution you'd like
Just to add a title above/below on load or during hover...

Add Lofi Mode

Links in the Tabs section are sending HTML request

The links of Focusly and Meditate pages are sending HTML request to the server, which leads to the reloading of page.

2 lofi's runs simultaniously

Describe the bug
2 lofi's run simultaneously

To Reproduce
Steps to reproduce the behavior:

1. Go to 'main page'
2. Click on 'any lofi'
3. Click on 'another lofi'
4. See error both lofi runs simultaneously

Expected behavior
When one lofi is running and user clicks on another one "I think first one should pause automatically".

Screenshots
If applicable, add screenshot(s) of the bug to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]

Additional context
Add any other context about the problem here.

The rain mp3 has a hard ending with a little audio static so it doesn't loop well

Is your feature request related to a problem? Please describe.
When you listen to the rain card, it ends abruptly, with audio cutting out which breaks the flow.

Describe the solution you'd like
It may be worth either finding a fresh looped mp3 and dropping it into the repo so no other coding is needed.

Describe alternatives you've considered
The other alternative is to edit the existing audio to cut at a better point, or to fade in/out

Additional context
N/A - it's quite straight forward and I may get on and start looking at this myself now :)

Add gradient border to tags

Add a colorful gradient border to new tags on "Meditate" tab.

Refer to this image

Adding a pause button

Is your feature request related to a problem? Please describe.
I'm not really satisfied knowing I can't pause or stop the sound

Describe the solution you'd like
Adding a pause button beneath the volume button will be better, so users can pause the sound rather than muting since the sound will still be playing in the background when muted...

Tabs bug

Sometimes when switching tab modes it feels stuck on a mode. Check the tab documentation for chakra UI to get more context.

Fix the bug report Issue Template

The template contains 2 sections for screenshots while only one should be there.

Screenshot

Add meta tags

Need to add Meta Tags.

Navbar not completely being shown

Describe the bug
Navbar's length is not completely covering the width of the page

Expected behavior
Fix the Navbar's length so that it covers the whole length of the page

Screenshots

Desktop (please complete the following information):

• Browser: chrome

Update the contributor's list

Update the contributor's list in README.md

Add a timer

Is your feature request related to a problem? Please describe.
Add a timer at the top right corner inside the navbar.

Describe the solution you'd like
A timer with a minimal looking design that will show how long the user has been listening to sounds.

Add a sponsor button in Footer

Add a sponsor button in the Footer and link it to https://github.com/sponsors/Utkarshn10.

Footer text isnt centered appropriate

The footer text is not centered right, so it looks kinda weird.

I would like to work on this issue.

Tabs not visible

Add Code of Conduct

Add Code of Conduct. Refer here.

Error: The play() request was interrupted by a call to pause().

Describe the bug
Getting an error when I press play() the first time. error --> (The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22). Also app it's playing more then a sound like the issue #60

To Reproduce
Steps to reproduce the behavior:

1. Play a sound for the first time
2. See error

Shift Focusly to Nextjs13

Thought of moving Focusly to Nextjs from React.

Following are the doubts that need to be resolved first:

• How would moving the app to Nextjs from React impact the performance ?
• Would it make significant performance improvment?

Make the Navbar fixed

Describe the bug
The Current Navbar is scrollable i.e moves upwards when we scroll down.

Expected behavior
It should be fixed and position and should move as the user moves down the page

Fix the Tab

Describe the bug
Even though the medidate page is opened after clicking the "meditate tab" the tab that is being highlighted is Focus.

To Reproduce
Steps to reproduce the behavior:

1. Click on the meditate tab

Expected behavior
Meditate tab should be highlighted when the meditate page

Desktop (please complete the following information):

• OS: Windows 11
• Browser chrome

Screenshot

Fix the footer

Describe the bug
The footer's white background(just like the navbar) is not being shown.

Expected behavior
Add white background to footer (just like the navbar).

Screenshots

Desktop (please complete the following information):

• Browser chrome

Fix builds failing

Builds are failing with following error:

This is expected since Node v has reached end-of-life. There should be warnings in your previous deployments and the warning changed to an error today

New sound suggestions

Dropdown your focus music suggestions that you would like to see on Focusly.

Remove React Player and use plyr-react library for sound

Add Zen music to Meditation section

Describe the solution you'd like
Add zen music in New section of the "Meditate Tab"

Use this link for the zen music.

Also add a relevant Icon/Image for the music. Here's Meditate section for the image references.

Gitpodify the project

• Automate project’s development setup using Gitpod
• Add Gitpod button to the README.md

You can refer this link.

Add Link to Github Repository in Footer

Change the link in the footer to https://github.com/Utkarshn10/Focusly

Convert images to webp format

Is your feature request related to a problem? Please describe.
To improve performance convert the images used in the project from different formats to webp.

Add vercel analytics

Adding a disco music focus mode

Is your feature request related to a problem? Please describe.
I'm sure there'll be some people that love a cool environment with music, so adding this feature can also make them focus...

Adding a share functionality

Add a sharing functionality to each sound card.

1. The share button can be placed parallel to the play and pause button on the card with some space between the buttons (play/pause button and share button).
   
   

Create Issue Template

Refer this to create the issue template.

Update Footer

Update Footer text to "Contribute to Focusly" with a link to the repository.

Change Focus Mode's name to Work Mode in Tabs

Update Analytics to Beam analytics

Add [Beam Analytics] to the project.

Add binaural beats

• Add binaural beats mode

New Design

New minimal looking UI Design for Focusly.

Create Pull Request (PR) Template

Refer this to create PR Template