Real-Time Banner Editor

This is a Next.js application that provides a real-time banner editor. Users can create banners with multiple speakers, each having their own topic and company. The application allows users to upload images for each speaker, update their details, and download the banner as a PNG image.

Features

• Real-time editing of banner details
• Support for multiple speakers
• Image upload functionality for each speaker
• QR code generation for event links
• Download banner as a PNG image

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v12 or later)
• npm (v6 or later) or yarn (v1.22 or later)

Installing

1. Clone the repository:

   git clone https://github.com/jslovers/banner-creator.git
   cd real-time-banner-editor

2. Install the dependencies:

   npm install

Running the Application

To run the application in development mode, use the following command:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Building for Production

To create an optimized production build, run:

npm run build

Starting the Production Server

After building the application, you can start the production server with:

npm start

Usage

1. Navigate to the Application: Open your browser and navigate to http://localhost:3000.
2. Edit Banner Details: Use the form on the right side to edit the banner details.
3. Add Speakers: Add multiple speakers by clicking the "Add Speaker" button.
4. Upload Images: Upload images for each speaker.
5. Download Banner: Click the "Download as PNG" button to download the banner.

Creative Credits

• Design inspired by Vrukshali

Contributing

Please read CONTRIBUTING.md for details on the code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.