Pomotify
Published on Jan 4, 2022
Normally when I want to focus on something without any distraction, no matter if itโs studying, or even just doing some work, I would use the Pomodoro technique to get me focus and zone-in
About the app
Pomotify is a simple Fullstack Pomodoro timer app with Spotify integration. As a Pomodoro technique user and Spotify lover, I would love to have this kind of application. With Spotify in the web, users can focus on their study/work while listening to some playlists without the need to open their Spotify app.
To check-it out, click the link below:
Live: https://pomotify.vercel.app
Techstack used
For the client-side, I used React, Styled-Components, Material-UI, Framer-Motion. For the server side, I used Node and Express. I also used Spotify API for the Spotify integration.
For the deployment, I used Vercel.
Code Snippets
I used Styled-Components for styling. I like put all the themes in one file and just call it if I want to use it in any components. This can prevent repetitive codes (Always practice DRY - Dont Repeat Yourself).
Common themes: theme.js
export const theme = {
black: "#191414",
green: "#1DB954",
grey: "#262323",
hoverGreen: "#117735",
pitchBlack: "black",
borderRadius: "12px",
textColor: "#f4f4f4",
textGrey: "rgba(255, 255, 255, 0.3)",
borderLine: "1px solid #1DB954",
};
I put all the common themes in a variable theme and then I will pass this themes as a prop into ThemeProvider that wraps the whole app (index.js). You can see the code below:
import * as mainTheme from "./theme.js";
ReactDOM.render(
<React.StrictMode>
<ThemeProvider theme={mainTheme.theme}>
<App />
</ThemeProvider>
</React.StrictMode>,
document.getElementById("root")
);