π¨ 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.example
file to.env
and adjust the values accordingly.
mv .env.example .env
Open 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 install
To 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 dev
The 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
MOD
environment variable toPROD
in the.env
file.
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 start
The 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! π