Architecture Overview

Evelant is designed to function seamlessly as an integrated solution comprising two coordinated components that share a common backend infrastructure. This architecture is key to delivering a smooth user experience while ensuring robust functionality and scalability. In this documentation, we will provide a detailed overview of each component, elaborate on their interactions, and offer best practices for usage and troubleshooting.

Components of Evelant

1. Browser Extension (Plasmo)

The Evelant browser extension, built using the Plasmo framework, is the user-facing component of the system. It consists of various scripts and user interface elements that interact directly with the user's browsing experience. The extension has several critical features:

• Content Scripts: These scripts are responsible for injecting the orb (the floating user interface element) and the chat panel into every webpage the user visits. This allows users to engage with Evelant seamlessly as they browse different sites. By dynamically inserting these elements, users can access the chat functionality without disrupting their workflow.

• Background Service Worker: This component manages essential background tasks that enhance the functionality of the extension. It handles cross-tab messaging, enabling real-time communication between different tabs of the browser. This feature is particularly useful for maintaining state and ensuring that user preferences, such as appearance settings, remain synchronized across all open instances of the extension.

• Browser Commands: The extension can respond to specific browser commands, allowing for keyboard shortcuts and other quick-access features. This increases usability and provides an efficient way for users to interact with Evelant.

2. Web App (Next.js App Router)

The web app serves as the backend interface and is built on the Next.js framework. It is responsible for a variety of functions, including:

• Dashboard Management: The dashboard is the central hub for users, where they can view their profiles, settings, and usage statistics. It provides an intuitive interface for users to manage their accounts and access various features of the extension.

• Landing Pages: These pages serve as entry points for new users, providing information about Evelant's capabilities, features, and benefits. They are designed to convert visitors into users by clearly communicating the value proposition.

• API Routes: The web app includes all necessary API routes that facilitate communication between the frontend (the browser extension) and the backend (the database). This includes authentication callbacks for user login and secure data handling for billing processes.

3. Data Layer (Supabase)

The data layer is powered by Supabase, a powerful backend-as-a-service platform that handles data storage and user management. Key features include:

• Profile and Settings Storage: User profiles and their respective settings are securely stored in the database. This allows users to personalize their experience and have their preferences automatically loaded when they log in.

• Chat Messages Storage: All chat interactions are logged and stored, ensuring that users can revisit previous conversations. This feature enhances the utility of the chat functionality, providing continuity in user interactions.

• Session Management: The system tracks user sessions to maintain state and security. This is crucial for providing a seamless experience as users navigate between different functionalities of the extension and web app.

• Usage and Credit Tracking: The backend manages usage statistics and credit tracking for users, allowing for transparent billing and usage monitoring. This feature is essential to ensure that users are aware of their consumption and any associated costs.

Data Security and User Privacy

One of the primary considerations in the design of Evelant is user security and data privacy. Supabase employs row-level security, which ensures that each user has access only to their own data. This is fundamental for protecting sensitive information and maintaining trust between the user and the application.

Best Practices for Using Evelant

1. Keep the Extension Updated: Regular updates to the browser extension ensure that you have the latest features and security patches. Enable auto-updates in your browser settings if available.

2. Manage Browser Permissions: Review and manage the permissions granted to the Evelant extension. Only allow the necessary permissions that enhance your experience without compromising your privacy.

3. Utilize Keyboard Shortcuts: Familiarize yourself with available keyboard shortcuts to navigate the extension more efficiently. These shortcuts can significantly enhance your productivity.

4. Regularly Check Your Dashboard: Make it a habit to check your dashboard frequently. This allows you to monitor your usage statistics, adjust settings, and stay informed about any new features or updates.

5. Feedback and Support: If you encounter issues or have suggestions for improvements, utilize the feedback mechanisms provided within the extension. Your input is valuable for the ongoing development of Evelant.

Troubleshooting Common Issues

Issue 1: Extension Not Loading

Steps to Resolve:

• Check if the extension is enabled in your browser's extension settings.
• Ensure that your browser is up to date. Compatibility issues may arise with older versions.
• Clear the browser cache and restart the browser.

Issue 2: Chat Messages Not Saving

Steps to Resolve:

• Ensure you are logged into your account; chat messages are tied to user profiles.
• Check your internet connection; a weak connection can disrupt message saving.
• If the issue persists, try logging out and logging back in to refresh your session.

Issue 3: Dashboard Not Displaying Data

Steps to Resolve:

• Verify your internet connection; an unstable connection may prevent data from loading.
• Refresh the dashboard page; sometimes a simple refresh can resolve display issues.
• If problems continue, consider clearing your browser's cache or trying a different browser.

FAQs

Q: What browsers are supported by the Evelant extension? A: Evelant is designed to work with major browsers, including Chrome, Firefox, and Edge. Ensure you are using the latest version of your preferred browser for optimal performance.

Q: Is my data safe with Evelant? A: Yes, user data is stored securely with row-level security in place to ensure that users can only access their own information.

Q: Can I use Evelant on multiple devices? A: Yes, Evelant can be used across multiple devices as long as you log in with the same account. Your settings and chat history will sync across devices.

Q: How can I provide feedback about the extension? A: Feedback can be submitted through the feedback form available in the extension settings or directly through our website.

By understanding the architecture of Evelant and following best practices, users can maximize their experience while ensuring a secure and efficient interaction with the extension.