Bezier Frame Animator (WeppoProject)

A full-stack web application for creating and sharing frame-by-frame animations, built using Vanilla JavaScript (Canvas API), Node.js, Express, and MongoDB. This project focuses on mathematical curve rendering and interactive vector graphics manipulation without relying on heavy frontend frameworks.

Key Features

• Vector Drawing Engine: Draw and manipulate Bezier curves utilizing a custom implementation of De Casteljau's algorithm for smooth rendering.
• Frame-by-Frame Animation: Add, copy, delete, and organize pages (frames). Includes a dynamic playback mode and robust undo/redo state management.
• Advanced Manipulation: Drag individual points, whole curves, or entire frames. Rotate elements, change line colors (RGBA), adjust line thickness, and modify point sizes.
• GIF Export: Render your multi-frame animations directly in the browser into a downloadable .gif file using web workers.
• Auth-Key Security: Save animations to the database to receive a unique ID and authKey. The authKey acts as a password, ensuring that only the original creator can update or overwrite the project.
• Public Gallery: Optionally publish your work to a community board, featuring infinite scrolling and lazy-loading of animation previews.

Tech Stack

• Frontend: Vanilla JavaScript (ES6 Modules), HTML5 Canvas API, CSS
• Backend: Node.js, Express.js
• Database: MongoDB (Mongoose)
• Tools & Libraries: GIF.js (client-side rendering), UUID, nodemon

How to Run

Unlike decoupled architecture, this project serves both the API and the static frontend from a single Node.js server.

1. Prerequisites: Make sure you have Node.js installed and a running instance of MongoDB (either locally or MongoDB Atlas).

2. Environment Setup: Create a .env file in the root directory and add your MongoDB connection string:

MONGODB_URI=your_mongodb_connection_string_here

3. Start the Server: Open a terminal, navigate to the project folder, install the dependencies, and start the application:

npm install
npm start

The application will automatically start the server using nodemon. Open your web browser and go to http://localhost:3000.