react-grapesjs-card-app

Overview

This project is a React application that integrates GrapesJS to allow users to create and customize reusable card components. The Custom Card component can be easily dragged and dropped into the GrapesJS editor, where users can configure its properties such as image, title, description, button label, and button link.

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm (version 5.6 or higher)

Installation

1. Clone the repository:

   git clone <repository-url>
   

2. Navigate to the project directory:

   cd react-grapesjs-card-app
   

3. Install the dependencies:

   npm install
   

Running the Application

To start the application in development mode, run:

npm start

This will launch the application in your default web browser at http://localhost:3000.

Building for Production

To create a production build of the application, run:

npm run build

The build artifacts will be stored in the build directory.

Running Tests

To run the tests for the application, use:

npm test

Manual Test Checklist

• Verify that the GrapesJS editor loads correctly.
• Drag and drop the Custom Card block into the canvas.
• Check that the card displays the default image, title, and description.
• Edit the card properties (image, title, description, button label, button link) and ensure changes are reflected in the canvas.
• Save and reload the editor to confirm that the card retains its properties.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.