Shark Chat Js
Modern Chat App written in Next.js
Overview
Shark Chat is an innovative chat application that leverages modern web technologies to offer a seamless messaging experience. Built with Trpc, Tailwind CSS, Ably, Redis, Cloudinary, Drizzle ORM, and Next.js, it combines powerful features into a singular platform designed to enhance communication among users. Whether you’re messaging in a group or directly with another user, Shark Chat provides versatile tools that cater to various user needs, making it a great option for casual conversations, group discussions, or even professional collaborations.
The application is designed to function perfectly in a serverless environment, showcasing its flexibility and efficiency. With a user-friendly interface and robust functionality, Shark Chat is suitable for anyone looking to enhance their messaging experience with added features like AI integration, markdown support, and easy media sharing.
Features
- Create, Update, Delete Chat Groups: Easily manage your chat groups with intuitive controls for creating new groups and modifying existing ones.
- Send and Delete Messages: Effortlessly communicate by sending and removing messages within any chat.
- Markdown Support: Enjoy rich text formatting with markdown capabilities, including tables, code highlighting, and LaTeX for enhanced message clarity.
- Message Embeds: Automatically display link previews in messages, enhancing the visual experience of shared content.
- Direct Messaging: Connect with individual users via direct messages, ensuring private conversations are easy and secure.
- Custom Emotes: Express yourself with a personalized touch by using custom emotes in your chats.
- AI-Powered Message Writer: Utilize built-in AI chatbot functionality to assist with writing messages, making communication even smoother.
- Light & Dark Mode: Choose your preferred visual theme for a comfortable messaging experience regardless of lighting conditions.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Radix UI
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
- 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.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
