harshhhdev
/
groovi
🍃 Create soothing focus mixes
Groovi
🚀 Quickstart
Run the website locally
git clone https://github.com/harshhhdev/groovi.git
Setting up the development environment
cd groovi
# Install deps
yarn
Setting up the database
NOTE: This project uses PostgreSQL database platform on Microsoft Azure store data.
To start with this project, go ahead and setup your PostgreSQL database, and input your connection string under DATABASE_URL in .env
# Generate the Prisma client
yarn prisma generate
# Migrate the schema into PostgreSQL
yarn prisma migrate dev
Authentication
As this app uses JWT tokens for authentication, go to generate-secret or type in openssl rand -hex 32.
This app also uses Twitter, Google and Facebook for authentication.
Starting server
# Start the server
yarn dev
Server should now be running on localhost
🔧 Tools Used
- Kraftuur
- …
👀 Try it out! groovi.hxrsh.in
🎨 Check out the branding board
Overview of My Submission
Many of us jam to lofi hiphop beats and ASMR to improve our focus and concentration while we're working -- so, why not create your own concentration mixes?
The goal of this project is to provide you with a basic set of calming, ASMR white noise to build your favourite concentration mixes.
Groovi works like a social website, which has profiles. You can create and like different mixes made by other people, and the website also has support for private mixes that can be seen by just you! You can create mixes without logging in, however to publish them you must login. You can login with either Google, Twitter, or Facebook.
This project is has a lot of features, and it took a lot of my time and effort into designing a clean and responsive interface and bringing it to life. If you enjoyed, consider giving it a ⭐ on GitHub - every star counts!
Submission Category:
This app uses the Azure PostgreSQL service, along with being a creative and cool, best fitting the "wacky wildcards" category.
Link to Code
harshhhdev
/
groovi
🍃 Create soothing focus mixes
Groovi
🚀 Quickstart
Run the website locally
git clone https://github.com/harshhhdev/groovi.git
Setting up the development environment
cd groovi
# Install deps
yarn
Setting up the database
NOTE: This project uses PostgreSQL database platform on Microsoft Azure store data.
To start with this project, go ahead and setup your PostgreSQL database, and input your connection string under DATABASE_URL in .env
# Generate the Prisma client
yarn prisma generate
# Migrate the schema into PostgreSQL
yarn prisma migrate dev
Authentication
As this app uses JWT tokens for authentication, go to generate-secret or type in openssl rand -hex 32.
This app also uses Twitter, Google and Facebook for authentication.
Starting server
# Start the server
yarn dev
Server should now be running on localhost
🔧 Tools Used
- Kraftuur
- …
I've made this project by myself! Here are some videos:
Libraries & technologies I've used:
- Kraftuur
- TypeScript
- Azure PostgreSQL
- Prisma
- NextAuth.js
- Next.js
- Stitches
- Framer Motion
- react-icons
- nanoid
- Prettier
- ESLint
- Figma
...and if you made it down here, be sure to check out Groovi! Feel free to share your mixes in the comments below :)
Top comments (19)
I love this UI 🥰
Thank you!
UI libraries are awesome Harsh :) Keep it up
Thank you Atul! Appreciate it :)
This is creative on so many level: great idea and great UI, very nice job 🤩
Haha thank you Xavier! Means a lot to me.
This is a hackathon entry 😮? Love the UI. Amazing app!
Haha, thanks man. I love making my project stand out from the rest, and UI is the best way to go about doing it :)
Great. Keep going.
Thank you for your kinds words.
The UI is pretty great, I love it, keep it up harsh ❤😊
Another great one 🔥🔥
appreciate it ❤️
Nice job!
Thank you so much!
Looks great !!
Thank youuuu! Means a lot to me.
Awesome UI man! I know what it takes to design awesome UIs and then implementing them properly in code, and you've done a great job with both of them! Inspirational 😃
Thank you! I appreciate your support :)