-
-
Notifications
You must be signed in to change notification settings - Fork 805
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
abc089e
commit fb0a50d
Showing
49 changed files
with
1,523 additions
and
1,524 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,25 @@ | ||
| import PlayHeader from 'common/playlists/PlayHeader'; | ||
| import { Provider } from 'react-redux'; | ||
| import store from './app/store'; | ||
| import Main from './Main'; | ||
| import './styles.css'; | ||
|
|
||
| // WARNING: Do not change the entry componenet name | ||
| function Codenchill(props) { | ||
| // Your Code Start below. | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="play-details"> | ||
| <PlayHeader play={props} /> | ||
| <div className="overflow-y-auto grow p-0 color-change-5x"> | ||
| <Provider store={store}> | ||
| <Main /> | ||
| </Provider> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default Codenchill; | ||
| import PlayHeader from 'common/playlists/PlayHeader'; | ||
| import { Provider } from 'react-redux'; | ||
| import store from './app/store'; | ||
| import Main from './Main'; | ||
| import './styles.css'; | ||
|
|
||
| // WARNING: Do not change the entry componenet name | ||
| function Codenchill(props) { | ||
| // Your Code Start below. | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="play-details"> | ||
| <PlayHeader play={props} /> | ||
| <div className="overflow-y-auto grow p-0 color-change-5x"> | ||
| <Provider store={store}> | ||
| <Main /> | ||
| </Provider> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default Codenchill; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,52 @@ | ||
| # CodeNchill | ||
|
|
||
| - `CodeNchill` is a productivity application designed to enhance your focus hours. This app integrates a lofi-music player and a Pomodoro timer to help you stay productive. | ||
|
|
||
| # Tool Features | ||
|
|
||
| - CodeNchill , the one-stop tool to take your productivity to the next level | ||
|
|
||
| - It comes with a bunch of features with a seamless User Experience and an elegant design for both mobile and desktop. | ||
|
|
||
| - The following are the features of the tool: | ||
|
|
||
| - You can easily play, pause , and shuffle your lo-fi tracks, and adjust the volume or mute the audio with just one click. | ||
|
|
||
| - You can set the timer in three fixed tabs - Rest, Work and Focus , or even set a custom timer to fit your specific needs. Once you turn on the timer, you can see it in the title of your browser tab. | ||
|
|
||
| - The key highlight of this tool is that it will notify you with a VOICE ALERT once the timer is over, reminding you to "rest" or "get back to work" based on your timer mode. If the timer is set for five minutes or less, it's time for rest , otherwise, it's time for get back to work mode. | ||
|
|
||
| - My main focus in this tool is on enhancing user accessibility, thus we have provided several keyboard shortcut keys for your convenience.: | ||
|
|
||
| ➜ Press 's' to shuffel the tracks | ||
| ➜ Press 'Spacebar' to play/pause | ||
| ➜ Press 'Next arrow key' for next track | ||
| ➜ Press 'Back arroy key' for previouse track | ||
| ➜ Press 'm' to mute/unmute | ||
|
|
||
| ## Play Demographic | ||
|
|
||
| - Language: js | ||
| - Level: Advanced | ||
|
|
||
| ## Creator Information | ||
|
|
||
| - User: PriteshKiri | ||
| - Gihub Link: https://github.com/PriteshKiri | ||
| - Blog: | ||
| - Video: https://www.stack-stream.com/v/codenchill-2playsamonth-reactplay-io | ||
|
|
||
| ## Implementation Details | ||
|
|
||
| - Managed Complex state logic for the data flow and even handling. | ||
| - Used redux-toolkit for inter component state changes and `useState` hooks for in-component state changes | ||
| - Used `useEffect` hook for API calls and prop change rendering. | ||
| - The data for tack, tack name and track image are fetched from Pixabay music. | ||
| - All styling has been done using `Tailwind` CSS classes and few with custom css. Used `React icons` for icons. | ||
| - Have taken care of responsiveness of the tool, can be operated on both desktop and mobile. | ||
|
|
||
| ## Resources | ||
|
|
||
| - Have installed one node module for implementing the download feature: | ||
|
|
||
| - `redux-toolkit` module | ||
| # CodeNchill | ||
|
|
||
| - `CodeNchill` is a productivity application designed to enhance your focus hours. This app integrates a lofi-music player and a Pomodoro timer to help you stay productive. | ||
|
|
||
| # Tool Features | ||
|
|
||
| - CodeNchill , the one-stop tool to take your productivity to the next level | ||
|
|
||
| - It comes with a bunch of features with a seamless User Experience and an elegant design for both mobile and desktop. | ||
|
|
||
| - The following are the features of the tool: | ||
|
|
||
| - You can easily play, pause , and shuffle your lo-fi tracks, and adjust the volume or mute the audio with just one click. | ||
|
|
||
| - You can set the timer in three fixed tabs - Rest, Work and Focus , or even set a custom timer to fit your specific needs. Once you turn on the timer, you can see it in the title of your browser tab. | ||
|
|
||
| - The key highlight of this tool is that it will notify you with a VOICE ALERT once the timer is over, reminding you to "rest" or "get back to work" based on your timer mode. If the timer is set for five minutes or less, it's time for rest , otherwise, it's time for get back to work mode. | ||
|
|
||
| - My main focus in this tool is on enhancing user accessibility, thus we have provided several keyboard shortcut keys for your convenience.: | ||
|
|
||
| ➜ Press 's' to shuffel the tracks | ||
| ➜ Press 'Spacebar' to play/pause | ||
| ➜ Press 'Next arrow key' for next track | ||
| ➜ Press 'Back arroy key' for previouse track | ||
| ➜ Press 'm' to mute/unmute | ||
|
|
||
| ## Play Demographic | ||
|
|
||
| - Language: js | ||
| - Level: Advanced | ||
|
|
||
| ## Creator Information | ||
|
|
||
| - User: PriteshKiri | ||
| - Gihub Link: https://github.com/PriteshKiri | ||
| - Blog: | ||
| - Video: https://www.stack-stream.com/v/codenchill-2playsamonth-reactplay-io | ||
|
|
||
| ## Implementation Details | ||
|
|
||
| - Managed Complex state logic for the data flow and even handling. | ||
| - Used redux-toolkit for inter component state changes and `useState` hooks for in-component state changes | ||
| - Used `useEffect` hook for API calls and prop change rendering. | ||
| - The data for tack, tack name and track image are fetched from Pixabay music. | ||
| - All styling has been done using `Tailwind` CSS classes and few with custom css. Used `React icons` for icons. | ||
| - Have taken care of responsiveness of the tool, can be operated on both desktop and mobile. | ||
|
|
||
| ## Resources | ||
|
|
||
| - Have installed one node module for implementing the download feature: | ||
|
|
||
| - `redux-toolkit` module |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,48 @@ | ||
| /* Background color styling */ | ||
| .color-change-5x { | ||
| -webkit-animation: color-change-5x 10s linear infinite alternate both; | ||
| animation: color-change-5x 10s linear infinite alternate both; | ||
| } | ||
|
|
||
| @keyframes color-change-5x { | ||
| 0% { | ||
| background: #90f4bd; | ||
| } | ||
| 25% { | ||
| background: #fff494; | ||
| } | ||
| 50% { | ||
| background: #ffbfe3; | ||
| } | ||
| 75% { | ||
| background: #a6ddf3; | ||
| } | ||
| 100% { | ||
| background: #f4cd9e; | ||
| } | ||
| } | ||
|
|
||
| /* Timer border styling */ | ||
|
|
||
| .timer_dial { | ||
| -webkit-animation: timer_dial 2s ease-in infinite alternate both; | ||
| animation: timer_dial 2s ease-in infinite alternate both; | ||
| } | ||
|
|
||
| @keyframes timer_dial { | ||
| 0% { | ||
| border: 5px solid rgb(172, 95, 255); | ||
| } | ||
|
|
||
| 33% { | ||
| border: 5px solid rgb(239, 104, 104); | ||
| } | ||
|
|
||
| 66% { | ||
| border: 5px solid rgb(40, 112, 255); | ||
| } | ||
|
|
||
| 100% { | ||
| border: 5px solid rgb(155, 245, 141); | ||
| } | ||
| } | ||
| /* Background color styling */ | ||
| .color-change-5x { | ||
| -webkit-animation: color-change-5x 10s linear infinite alternate both; | ||
| animation: color-change-5x 10s linear infinite alternate both; | ||
| } | ||
|
|
||
| @keyframes color-change-5x { | ||
| 0% { | ||
| background: #90f4bd; | ||
| } | ||
| 25% { | ||
| background: #fff494; | ||
| } | ||
| 50% { | ||
| background: #ffbfe3; | ||
| } | ||
| 75% { | ||
| background: #a6ddf3; | ||
| } | ||
| 100% { | ||
| background: #f4cd9e; | ||
| } | ||
| } | ||
|
|
||
| /* Timer border styling */ | ||
|
|
||
| .timer_dial { | ||
| -webkit-animation: timer_dial 2s ease-in infinite alternate both; | ||
| animation: timer_dial 2s ease-in infinite alternate both; | ||
| } | ||
|
|
||
| @keyframes timer_dial { | ||
| 0% { | ||
| border: 5px solid rgb(172, 95, 255); | ||
| } | ||
|
|
||
| 33% { | ||
| border: 5px solid rgb(239, 104, 104); | ||
| } | ||
|
|
||
| 66% { | ||
| border: 5px solid rgb(40, 112, 255); | ||
| } | ||
|
|
||
| 100% { | ||
| border: 5px solid rgb(155, 245, 141); | ||
| } | ||
| } |
Oops, something went wrong.