Druid-Final-Project
🥈SilverOur project integrates Drupal as a backend, React as a frontend, and Mautic as a marketing automation tool, developed in collaboration with the partner company Druid Oy (https://druid.fi) to meet their specific requirements.
310Updated 2mo ago
Intermediate30min to implementmarketing
Saves ~150 min per use
Quick InstallView Source
git clone https://github.com/bishnu-suyel/Druid-Final-Project.gitWorks with:
Claude
Overview
About This Skill
Druid-Final-Project is a full-stack web application that combines Drupal 10 as a content management backend with React.js as a dynamic frontend interface. The project uses JSON:API to facilitate communication between Drupal and React, allowing the React app to fetch and display content managed in Drupal. CORS issues are resolved through Drupal's services.yml configuration file. This integration is ideal for teams needing a decoupled architecture where content editors work in Drupal while developers build custom frontend experiences in React. The project includes setup instructions using Lando for local development, Axios for HTTP requests, and React Bootstrap for UI components.
How to Use
Clone the repository and start the Lando environment with 'lando start'. Install Drupal dependencies with 'lando composer install' and configure the database. Enable JSON:API in Drupal with 'lando drush en jsonapi -y', then update services.yml with CORS settings. Navigate to the frontend folder, run 'npm install' and 'npm run dev' to launch the React app at localhost:5173.
Use Cases
Decoupled CMS implementations requiring separate content management and frontend interfaces
Building custom React frontends powered by Drupal-managed content
Resolving CORS issues between Drupal backends and React applications
Local development workflows using Lando with Drupal and React
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/bishnu-suyel/Druid-Final-ProjectRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Act as a marketing strategist for [COMPANY], a [INDUSTRY] company. You are helping them plan their final project using Drupal as a backend, React as a frontend, and Mautic as a marketing automation tool. Provide a comprehensive marketing strategy that integrates these technologies to meet their specific requirements. Focus on lead generation, customer engagement, and data-driven decision-making.
Example Output
# Marketing Strategy for [COMPANY] Final Project ## Objectives - **Lead Generation**: Increase lead generation by 30% through targeted campaigns. - **Customer Engagement**: Enhance customer engagement by 25% using personalized content. - **Data-Driven Decisions**: Implement data analytics to optimize marketing efforts. ## Implementation Plan ### 1. Lead Generation - **Landing Pages**: Develop dynamic landing pages using React for a seamless user experience. - **Forms**: Integrate Mautic forms to capture lead information efficiently. - **SEO**: Optimize content for search engines to attract organic traffic. ### 2. Customer Engagement - **Personalized Content**: Use Drupal to manage and deliver personalized content based on user behavior. - **Email Campaigns**: Leverage Mautic to send targeted email campaigns to nurture leads. - **Social Media Integration**: Integrate social media platforms to engage with customers across multiple channels. ### 3. Data-Driven Decisions - **Analytics Dashboard**: Create a comprehensive analytics dashboard using React to monitor key performance indicators. - **A/B Testing**: Conduct A/B testing on landing pages and email campaigns to optimize performance. - **Reporting**: Generate regular reports to track progress and make data-driven decisions. ## Expected Outcomes - **Increased Lead Generation**: Achieve a 30% increase in lead generation through targeted campaigns. - **Enhanced Customer Engagement**: Boost customer engagement by 25% using personalized content and targeted email campaigns. - **Optimized Marketing Efforts**: Use data analytics to optimize marketing efforts and achieve better results.
Apply to these tools
Browse all toolsCompatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan