Quick Web Lookup

A modern Contentstack marketplace app that automatically extracts URLs from entry content and generates rich link previews with metadata, images, and descriptions. This React-based application provides an intuitive link preview interface that integrates seamlessly with Contentstack's content management system.

🚀 Features

• Automatic URL Detection: Extracts URLs from content fields automatically
• Rich Link Previews: Generates previews with titles, descriptions, and images
• Responsive Design: Adapts to different sidebar widths and screen sizes
• Real-time Updates: Refreshes previews when content is saved
• Error Handling: Graceful fallbacks with retry options
• TypeScript: Fully typed for better development experience
• Modern UI: Clean, professional interface using modern CSS modules

📋 Prerequisites

• Node.js (v16 or higher)
• npm
• Contentstack account (for marketplace deployment)

🚀 Quick Start

Installation

# Clone the repository
git clone https://github.com/contentstack/marketplace-quick-web-lookup-app.git
cd marketplace-quick-web-lookup-app

# Install dependencies
npm install

Development

# Start development server
npm run dev

# Run E2E tests
npm run test:e2e

# Run linting
npm run lint

Building for Production

# Build the application
npm run build

# The built files will be in the `dist` directory

🏗️ Project Structure

marketplace-quick-web-lookup-app/
├── src/
│   ├── components/          # Reusable React components
│   │   ├── AppFailed.tsx   # Error boundary component
│   │   ├── ErrorBoundary.tsx
│   │   └── LinkPreview/    # Link preview components
│   ├── containers/          # Main app containers
│   │   ├── App/            # Main app component
│   │   ├── AppConfiguration/ # App configuration
│   │   ├── SidebarWidget/  # Entry sidebar widget
│   │   └── 404/           # 404 error page
│   ├── common/
│   │   ├── contexts/       # React contexts
│   │   ├── hooks/          # Custom React hooks
│   │   ├── locales/        # Internationalization
│   │   ├── providers/      # Context providers
│   │   ├── types/          # TypeScript type definitions
│   │   └── utils/          # Utility functions
│   ├── services/           # API services
│   ├── types/              # Type definitions
│   ├── utils/              # Utility functions
│   └── assets/             # Static assets
├── e2e/                    # End-to-end tests
├── public/                 # Public assets
└── config files...

🧪 Testing

This project includes comprehensive testing:

E2E Tests

npm run test:e2e          # Run all E2E tests
npm run test:chrome       # Run E2E tests in Chrome
npm run test:firefox      # Run E2E tests in Firefox
npm run test:safari       # Run E2E tests in Safari
npm run test:chrome-headed # Run E2E tests in Chrome with UI

Code Quality

npm run lint              # Run ESLint
npm run typecheck         # TypeScript type checking
npm run format            # Format code with Prettier

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

VITE_PUBLIC_KEY_BASE_URL=https://app.contentstack.com

App Configuration

The app configuration is defined in the manifest and deployment files for Contentstack marketplace integration.

🛠️ Development

Adding New Features

1. Create feature branch from main
2. Implement your changes
3. Add tests for new functionality
4. Update documentation
5. Submit pull request

Code Style

This project uses:

• ESLint for code linting
• Prettier for code formatting
• TypeScript for type safety
• CSS Modules for styling

Commit Convention

This project follows Conventional Commits:

feat: add new link preview feature
fix: resolve URL extraction issue
docs: update README with new features
test: add E2E tests for link previews

📦 Deployment

Contentstack Marketplace

1. Build the application: npm run build
2. Package the dist directory
3. Upload to Contentstack marketplace
4. Install in your Contentstack stack

Using Contentstack Launch

1. Go to Contentstack Launch Dashboard

   • Navigate to your Contentstack organization
   • Access the Launch section

2. Connect GitHub Repository

   • Click "Connect Repository"
   • Select GitHub and authorize access
   • Choose your repository: marketplace-quick-web-lookup-app
   • Set build command: npm run build
   • Set output directory: dist

3. Configure Deployment

   • Enable automatic deployments on push to main branch
   • Set up environment variables if needed
   • Configure build settings

4. Deploy

   • Push changes to your main branch to trigger automatic deployment
   • Or manually trigger deployment from the Launch dashboard

Local Development

For local development with Contentstack:

1. Use Contentstack's local development tools
2. Configure your environment variables
3. Run npm run dev for development server

📱 Usage

1. Install from Contentstack marketplace
2. Navigate to entry with URL content
3. Open sidebar to see link previews
4. Click previews to open links in new tabs
5. Refresh previews when content changes

🤝 Contributing

We welcome contributions!

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Setup

# Install dependencies
npm install

# Start development
npm run dev

# Run tests
npm run test:e2e

📄 License

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

🙏 Acknowledgments

• Contentstack for the marketplace platform
• Peekalink API for link preview generation
• React for the UI framework
• Vite for the build tool
• Playwright for E2E testing

📞 Support

• Issues: GitHub Issues
• Documentation: Contentstack Developer Hub
• Community: Contentstack Community

---

Made with ❤️ by the Contentstack team