An interactive, real-time drawing and guessing game powered by AI.
Welcome to AI Scribble! This project combines the fun of Pictionary with the power of Artificial Intelligence. Challenge your friends or play against the AI in real-time. The game features a robust backend for managing game state and a sleek, responsive frontend for an immersive drawing experience.
- Real-Time Multiplayer: Seamless interaction using Socket.IO.
- AI Integration: AI powered drawing generation and guessing capabilities utilizing the Vercel AI Gateway.
- Interactive Canvas: Smooth drawing experience for players.
- Responsive Design: Built with Next.js and Tailwind CSS for mobile and desktop compatibility.
- Efficient State Management: Powered by Zustand for a snappy user experience.
- Framework: Next.js (React)
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: Zustand
- Real-time: Socket.IO Client
- Runtime: Node.js
- Framework: Express.js
- Language: TypeScript
- Real-time: Socket.IO
- Image Processing: Sharp
Follow these steps to get the project running locally on your machine.
- Node.js: v18 or higher recommended using nvm to manage versions.
- Package Manager: npm or yarn.
git clone <your-repo-url>
cd AISCRIBBLENavigate to the backend directory, install dependencies, and start the server.
cd backend
npm install
# Create a .env file if needed and add your keys (e.g., VERCEL_AI_GATEWAY_TOKEN)
# echo "VERCEL_AI_GATEWAY_TOKEN=your_token_here" > .env
# Run in development mode
npm run devThe backend server will typically start on port 3001 or 10000 (check logs).
Open a new terminal window, navigate to the root directory (frontend), and install dependencies.
# From the project root (AISCRIBBLE/)
npm install
# Run the development server
npm run devThe frontend application will start at http://localhost:3000.
The backend is configured for deployment on Render via the render.yaml file.
- Build Command:
cd backend && npm install && npm run build - Start Command:
cd backend && npm run start
The Next.js frontend is optimized for deployment on Vercel.
- Push your code to a Git repository.
- Import the project into Vercel.
- Use the default Next.js build settings.
- Configure environment variables to point to your deployed backend URL.
Contributions are welcome! Please feel free to verify functionality, submit issues, or open Pull Requests.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the ISC License.