Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/curiousyuvi/curie
💬 Chat and 🎵 vibe on synced music with your gang.
https://github.com/curiousyuvi/curie
docker express mongodb nodejs react reactjs socket-io tailwindcss typescript youtube youtube-api youtube-api-v3 youtube-iframe
Last synced: 3 months ago
JSON representation
💬 Chat and 🎵 vibe on synced music with your gang.
- Host: GitHub
- URL: https://github.com/curiousyuvi/curie
- Owner: curiousyuvi
- Created: 2022-05-21T09:27:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T20:03:17.000Z (over 1 year ago)
- Last Synced: 2024-10-18T17:54:11.669Z (3 months ago)
- Topics: docker, express, mongodb, nodejs, react, reactjs, socket-io, tailwindcss, typescript, youtube, youtube-api, youtube-api-v3, youtube-iframe
- Language: TypeScript
- Homepage: https://curie-xi.vercel.app
- Size: 17.3 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Curie
Curie is a chat app where users can chat in rooms and listen to synced music, the playback of the music would be controlled through voting, and members of the room can suggest songs, other members can vote 👍️ or 👎️ to a suggestion, if the suggestion gets majority vote it will start playing.
## Tech/Library/Framework/Tools
#### Frontend (client)
- Made with [Next.js](https://nextjs.org/)
- Written in [Typescript](https://www.typescriptlang.org/)
- Styled with [TailwindCSS](https://tailwindcss.com/)
- [Redux Toolkit] for State management.
- [TanStack Query] for asynchronous state management and data caching.
- [Axios](https://www.npmjs.com/package/axios) as API Request client
- [Socket.io-client](https://www.npmjs.com/package/socket.io-client) as Web-socket client
#### Backend (server)
- Made with [Express.js](https://www.npmjs.com/package/express)
- Written in [Typescript](https://www.typescriptlang.org/)
- NoSQL Database from [MongoDB](https://www.mongodb.com/)
- [Mongoose](https://www.npmjs.com/package/mongoose) for handling MongoDB services
- [Axios](https://www.npmjs.com/package/axios) as API Request client
- [Socket.io](https://www.npmjs.com/package/socket.io) for Web-socket communication
- [Youtube Data API V3](https://developers.google.com/youtube/v3) to search songs and get metadata for songs from Youtube.
- [Youtube Iframe API](https://developers.google.com/youtube/iframe_api_reference) to create a player and get playback from Youtube inside my app.
## Demo
https://user-images.githubusercontent.com/58589519/180454763-30446232-7155-4c32-81e4-ffc590427bc8.mp4
## Screenshots
## Configure and run development server
- ### Configure Development Environment
- Clone the repository :
`git clone https://github.com/curiousyuvi/curie.git`
**Configuring Environment variables**
- Open the server directory :
`cd curie/server/`
- Create a **.env** file :
`touch dev.env`
- Inside the **.env** file write :
```
MONGODB_URL=mongodb://:@mongo:27017/
YOUTUBE_API_KEY=
```
- Now to get YOUTUBE_API_KEY, head to [Google Developers Console](https://console.developers.google.com/) and login with your **Google Account**.
- Click on the **Create Project** button or select an existing project.
- Go to the **Credentials** section and click on the **Create credentials** button.
- Select **API key** from the dropdown menu.
- If prompted, select the project you created or want to use.
- Once you've created the API key, copy the key and paste it in the **YOUTUBE_API_KEY** in **.env**.
- ### Running Development Server
- To run the development server, inside the root directory, run this command:
```
yarn dev
```
- If there are no issues and every thing goes well, then your **Next-js client** should be running on `http://localhost:3000/`, **Node server** should be running on `http://localhost:5000/`.