Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baxsm/draw-together-nextjs
Draw Together: A collaborative platform for sharing moments of creativity and fun!
https://github.com/baxsm/draw-together-nextjs
nextjs shadcn-ui socket-io tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Draw Together: A collaborative platform for sharing moments of creativity and fun!
- Host: GitHub
- URL: https://github.com/baxsm/draw-together-nextjs
- Owner: baxsm
- Created: 2023-12-15T20:13:26.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-10T19:38:55.000Z (9 months ago)
- Last Synced: 2024-05-10T20:39:18.139Z (9 months ago)
- Topics: nextjs, shadcn-ui, socket-io, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://draw-together-nextjs.vercel.app
- Size: 555 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Draw Together 🎨✨
Draw Together is a collaborative platform built with Next.js, fostering creativity and shared moments. Inspired by the project [Scribble](https://github.com/nainglinnkhant/scribble), Draw Together enhances the user experience with an improved UI, expanded color options, and a robust chat feature for seamless communication between users.
## Live Demo 🌐
Explore the live demo of Draw Together at [here](https://draw-together-nextjs.vercel.app/) and start creating and connecting with others in real-time!
## Technologies Used 🚀
### Backend
- **Express:** Fast, minimalist web framework for Node.js.
- **Socket.io:** Real-time bidirectional event-based communication.
- **Zod:** TypeScript-first schema declaration and validation library.
- **TailwindCSS**: A utility-first CSS framework for a sleek and responsive design.
### Frontend
- **Next.js:** React framework for building server-rendered applications.
- **React:** JavaScript library for building user interfaces.
- **Socket.io-client:** Client library for Socket.io.
- **TailwindCSS**: A utility-first CSS framework for a sleek and responsive design.
- **shadcn-ui**: Elevating the user interface with stylish components.
## Features 🌟
- **Collaborative Drawing:** Engage in real-time collaborative drawing sessions with friends and family.
- **Rich Color Options:** Explore an expanded palette of colors to bring your creations to life.
- **Interactive Chat Box:** Seamlessly communicate with other users through a feature-rich chat box.
- **Download Canvas:** Save your masterpieces by downloading the canvas.
- **Theme Customization:** Personalize your experience with theme customization options.
- **Sleek UI Design:** Elevate the user interface with stylish components from the shadcn-ui library.
## Getting Started 🛠️
Certainly! You can modify the instructions as follows:
1. **Clone the repository:**
```bash
git clone https://github.com/baxsm/draw-together-nextjs.git
```
2. **Navigate to the project directory:**
```bash
cd draw-together-nextjs
```
3. **Install server dependencies:**
```bash
npm run install-server
```
4. **Install client dependencies:**
```bash
npm run install-client
```
5. **Run the development server:**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
## Future Work 🚀
Explore exciting possibilities for future enhancements and features! 🌈
- [ ] **User Cursors:** Introduce individual cursors for each user, providing a visual representation of their actions on the canvas.
- [ ] **Message Sender Names:** Display user names along with messages in the chat box for clearer communication.
- [ ] **Emoji Support:** Enhance expression by incorporating emoji support in the chat.
- [ ] **Collaborative Tools:** Introduce additional collaborative drawing tools for more creative possibilities.
- [ ] **User Avatars:** Add user avatars to make the chat experience more personalized.
- [ ] **Accessibility Features:** Ensure the application is accessible to users with different abilities.
- [ ] **Mobile Responsiveness:** Optimize the platform for a seamless experience on mobile devices.
## Contributing
Feel free to contribute or suggest new ideas for the future of Draw Together! 🚀