🎨 Welcome to Art Gallery - an interactive web application that allows you to create, customize, and animate paintings, generate AI voice documentaries for your artworks, and showcase them in a stunning 3D gallery using Three.js and GSAP for captivating animations!
-
Create & Customize Paintings: Express your artistic vision by creating and customizing paintings with various tools and options.
-
Animation: Bring your artwork to life with animation features to add motion and creativity to your creations.
-
AI Voice Documentary: Provide a description of your artwork, and the application will generate an AI voice documentary to narrate the story behind the piece.
-
Gallery Showcase: Display your masterpieces in an elegant and dynamic gallery layout, enriched with captivating animations powered by GSAP.
-
3D Gallery with Three.js: Showcase your masterpieces in an elegant and dynamic 3D gallery powered by Three.js. Experience the immersive 3D environment that enhances the way your artworks are presented.
-
GSAP Animations: Enjoy captivating animations with GSAP (GreenSock Animation Platform) to add delightful transitions and movements to the user interface.
Before getting started, ensure you have the following installed on your system:
- Node.js (https://nodejs.org) (Version >= 12.x)
- MongoDB (https://www.mongodb.com) (Make sure it's running)
To set up the project, follow these steps:
- Clone the repository to your local machine.
git clone https://github.com/HashashinMaster/art-gallery.git
cd art-gallery- Rename the
.env.examplefile to.envand adjust the values accordingly.
mv .env.example .envOpen the .env file with a text editor and replace the placeholder values with your actual configuration. The default .env values are:
ELEVENLABS_API_KEY=YOUR_ELEVENLABS_API
MOD=DEV
PORT=8000
HOST=http://localhost:8080
DB_NAME=art_gallery
DB_HOST=mongodb://127.0.0.1:27017
Replace YOUR_ELEVENLABS_API with your actual ElevenLabs API key and modify other variables if necessary.
- Install dependencies for both the server and client.
# Install server dependencies
npm install
# Install client dependencies
cd client
npm installTo run the project in development mode, ensure MongoDB is running, and follow these steps:
- Run the server
npm run dev
# watch mode
npm run dev:watch- Run the client
npm run devThe development server will start on http://localhost:8080, and the client will run on http://localhost:3000. Any changes you make to the client or server code will automatically trigger a reload.
To deploy the application in production, follow these steps:
- Build the client and server.
# Build client
cd client
npm run build
# Build server
cd ..
npm run build- Set the
MODenvironment variable toPRODin the.envfile.
Open the .env file with a text editor and change the value of MOD to PROD.
MOD=PROD
- Start the production server.
cd dist
npm startThe production server will start on http://localhost:8080, and your Art Gallery application will be accessible through that address.
- 📦
@types/express: ^4.17.17 - 📦
@types/multer: ^1.4.7 - 📦
@types/node: ^20.4.4 - 📦
axios: ^1.4.0 - 📦
dotenv: ^16.3.1 - 📦
express: ^4.18.2 - 📦
mongoose: ^7.4.1 - 📦
multer: ^1.4.5-lts.1 - 📦
nodemon: ^3.0.1 - 📦
openai: ^3.3.0 - 📦
ts-node: ^10.9.1 - 📦
typescript: ^5.1.6 - 📦
uuid: ^9.0.0
- 📦
@react-three/drei: ^9.78.2 - 📦
@react-three/fiber: ^8.13.5 - 📦
@types/three: ^0.154.0 - 📦
axios: ^1.4.0 - 📦
dotenv: ^16.3.1 - 📦
gsap: ^3.12.2 - 📦
react: ^18.2.0 - 📦
react-dom: ^18.2.0 - 📦
react-icons: ^4.10.1 - 📦
react-router-dom: ^6.14.2 - 📦
three: ^0.154.0
- 🛠️
@types/react: ^18.2.14 - 🛠️
@types/react-dom: ^18.2.6 - 🛠️
@typescript-eslint/eslint-plugin: ^5.61.0 - 🛠️
@typescript-eslint/parser: ^5.61.0 - 🛠️
@vitejs/plugin-react: ^4.0.1 - 🛠️
autoprefixer: ^10.4.14 - 🛠️
daisyui: ^3.2.1 - 🛠️
eslint: ^8.44.0 - 🛠️
eslint-plugin-react-hooks: ^4.6.0 - 🛠️
eslint-plugin-react-refresh: ^0.4.1 - 🛠️
postcss: ^8.4.26 - 🛠️
tailwindcss: ^3.3.3 - 🛠️
typescript: ^5.0.2 - 🛠️
vite: ^4.4.0
This project is licensed under the MIT License.
Happy painting and showcasing! 🎉
