Slack Vuesualizer

screenshot of Slack Vuesualizer
nuxt
vue
tailwind
daisyui

Slack Vuesualizer

Display your Slack export and search through messages!

Overview

Slack Vuesualizer is a web app designed to facilitate viewing, searching, and sharing of a Slack team's exported files. It provides features such as full-text search, displaying messages with proper formatting and files, and the ability to view and search through all users. The app has a pleasant user interface and utilizes technologies like Nuxt 3, TailwindCSS and DaisyUI, Iconify, MongoDB, Docker, and Vercel for hosting.

Features

  • Full-text search: Allows searching for up to tens of thousands of messages per channel.
  • View all messages per channel: Displays messages with proper formatting, files, and other details.
  • View and search through all users: Enables browsing and searching through all users in the Slack team.
  • Pleasant UI: The app has a well-designed and visually appealing user interface.

Installation

To install Slack Vuesualizer, you can use either the hosted version at https://slack-vuesualizer.vercel.app/ for free or follow these steps to spin up your own website using the Docker image:

  1. Pull the Docker image:
docker pull chris5896/slack-vuesualizer
  1. Start a local MongoDB instance by running the docker-compose file provided in the project:
docker-compose up -d
  1. Create an .env file to specify your MongoDB instance:
MONGODB_URI=mongodb://localhost:27017/slack_vuesualizer
  1. Install the dependencies:
npm install
  1. Start the development server on http://localhost:3000:
npm run dev
  1. Build the application for production:
npm run build
  1. Preview the production build locally:
npm run start

For more information on deployment, refer to the deployment documentation.

Summary

Slack Vuesualizer is a web app designed to simplify the process of viewing, searching, and sharing a Slack team's exported files. It offers features such as full-text search, displaying messages with proper formatting and files, and the ability to browse through all users. The app has a user-friendly interface, utilizes modern technologies like Nuxt 3 and TailwindCSS, and can be easily installed using the provided Docker image or the hosted version.

nuxt
Nuxt

nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.