Hey there, Ben Swerdlow here, CEO and co-founder of Freestyle. Last week, my co-founder Jacob and I did something that raised a few eyebrows—we rebuilt Slack in just 3 hours using what we’re calling the FART stack. And let me tell you, it’s causing quite a stir on LinkedIn (50,000 views and counting).

In this post, I’ll walk you through how we pulled off this feat, why the FART stack is a game-changer for web development, and how you can get started building your own Slack clone in record time.

What is the FART stack?

FART stands for Freestyle, Astro, React, and Tailwind. It’s not just a silly name, but a serious game-changer for web development. Here’s a quick rundown:

• Freestyle: A unified full-stack TypeScript framework
• Astro: A modern static site builder with partial hydration
• React: A popular JavaScript library for building user interfaces
• Tailwind: A utility-first CSS framework

Why Slack?

Rebuilding Slack isn’t just a fun exercise—it’s a demonstration of the FART stack’s power. Slack is a complex, real-time application with features like live messaging, multiple channels, and authentication. By recreating it in just 3 hours, we’ve battle-tested the efficiency and simplicity of our approach.

How FART Compares

Unlike traditional stacks like MEAN (MongoDB, Express.js, Angular, Node.js) or MERN (MongoDB, Express.js, React, Node.js), the FART stack with Freestyle at its core offers two unparalleled advantages:

1. Write both frontend and backend logic in a single TypeScript file, eliminating the need for separate API definitions and enabling truly unified full-stack development.

2. Access to open-source, full-stack feature packages powered by Freestyle. These packages offer pre-built yet extensible functionality that spans the entire stack, from UI components to database logic, all seamlessly integrated into your project.

This combination of unified development and full-stack features creates a development experience that’s not just faster, but fundamentally more cohesive and feature-rich than any other stack can offer. The result is a dramatic reduction in development time and complexity, allowing developers to focus on building innovative features rather than wrestling with infrastructure.

Why FART Matters

This isn’t just another way to build websites—it’s a revolutionary approach to full-stack development that will make you question why we’ve been doing things the hard way for so long.

1. One Language for Everything

With Freestyle, you write everything in TypeScript. Frontend, backend, database queries—all in one language. Here’s a taste:

@cloudstate
export class ChatRoom {
	messages: Message[] = [];
 
	addMessage(text: string, user: User) {
		const message = new Message(text, user);
		this.messages.push(message);
		return message;
	}
 
	getMessages() {
		return this.messages;
	}
}

This isn’t just your frontend code or your backend code—it’s both. Freestyle blurs the line between client and server, allowing you to focus on building features, not infrastructure.

2. Unparalleled Performance

Astro’s partial hydration means your site loads faster than a caffeine-fueled developer, while React and Tailwind provide a smooth, responsive UI.

---
import Layout from '../layouts/Layout.astro';
import { Chat } from '../components/Chat';
import { useCloud } from 'freestyle-sh';
import type { ChatRoomCS } from '../cloudstate/chat-room';
 
const roomId = Astro.params.id;
const chatRoom = useCloud<typeof ChatRoomCS>(roomId);
const initialMessages = await chatRoom.getMessages();
---
 
<Layout title="Chat Room">
	<Chat client:load roomId={roomId} initialMessages={initialMessages} />
</Layout>

And here’s the React component using Tailwind:

import { Chat as FreestyleChat } from 'freestyle-chat/react';
import { useCloud } from 'freestyle-sh';
import type { ConversationCS, SlackMessage } from '../cloudstate/chat-manager';
import { useState } from 'react';
 
export function Chat(props: { chatRoomId: string }) {
	const messageList = useCloud<typeof ConversationCS>(props.chatRoomId);
	const [newMessage, setNewMessage] = useState('');
 
	return (
		<FreestyleChat<[SlackMessage], ConversationCS>
			messageList={messageList}
			messageInput={
				<form
					className="absolute bottom-2 left-2 right-2"
					onSubmit={async (e) => {
						if (newMessage === '') return;
						e.preventDefault();
						await messageList.sendTextMessage({ text: newMessage });
						setNewMessage('');
					}}
				>
					<input
						value={newMessage}
						className="w-full rounded-lg border border-gray-300 p-2 focus:border-gray-400 focus:outline-none"
						onChange={(e) => setNewMessage(e.target.value)}
						placeholder="Send a message"
					/>
				</form>
			}
			displayMessage={(message) => <TextMessage message={message} />}
		/>
	);
}

3. Type Safety Everywhere

Freestyle provides end-to-end type safety. No more runtime surprises:

import { useCloud } from 'freestyle-sh';
import type { ConversationManagerCS } from '../cloudstate/chat-manager';
 
export function NewChannel() {
	const channelManager = useCloud<typeof ConversationManagerCS>('channels');
 
	const handleSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		channelManager.createChannel(channelName).then((channel) => {
			navigate(`/channels/${channel.id}`);
		});
	};
	// ... rest of the component
}

4. Seamless Real-time Updates

Freestyle’s useCloudQuery is a game-changer for real-time applications:

import { useCloudQuery } from "freestyle-sh/react";
 
export function ChatRoom({ roomId }) {
  const { data: messages } = useCloudQuery(
    useCloud<typeof ChatRoomCS>(roomId).getMessages
  );
 
  return (
    <div>
      {messages.map((message) => (
        <Message key={message.id} {...message} />
      ))}
    </div>
  );
}

This snippet not only fetches messages but also sets up real-time updates using webhooks under the hood—all without any additional code.

5. Simplified State Management

Forget complex state management libraries. Freestyle makes it trivial:

const { mutate: sendMessage } = useCloudMutation(
	// reference to the mutation function on the cloud
	useCloud<typeof ChatRoomCS>(roomId).addMessage
);
 
const handleSend = () => {
	sendMessage({ text: newMessage, user: currentUser });
};

6. Effortless Authentication

Implementing secure authentication is a breeze with Freestyle’s full-stack feature packages:

@cloudstate
export class AuthCS extends PasskeyAuthentication {
	static readonly id = 'auth';
 
	users = new Map<string, UserCS>();
 
	getUserInfo() {
		return this.getCurrentUser()?.getPersonalInfo();
	}
}

It’s worth noting that authentication and chat functionality are provided by open-source, full-stack feature packages made possible by Freestyle. These packages contain UI components seamlessly connected to extensible database code that slots into your existing database structure. This approach dramatically speeds up development while maintaining flexibility.

7. Astro Integration

Astro seamlessly integrates with Freestyle and React:

---
import { configureFreestyle, useCloud } from 'freestyle-sh';
import type { AuthCS } from '../cloudstate/auth';
 
const user = await useCloud<typeof AuthCS>('auth').getUserInfo();
---
 
<Layout title="Chat App">
	<Chat client:load userId={user.id} />
</Layout>

But Don’t Just Take My Word For It

After my LinkedIn post blew up, the comments started rolling in. Here are a few of my favorites:

“FART FTW! This is awesome!”—Arnab Raychaudhuri, Open source AI engineer

”FART Stack 💨“—Tyler Sheaffer, Co-Founder and CTO at Mental

”This type of content is a reason i pay my internet bills!! thanks, its just woow”—Manav Gupta, AI @ Innovaccer

The Proof is in the Performance

In just 3 hours and 33 minutes, we built a fully functional Slack clone with:

• Live messaging and WebSockets
• Multiple channels
• Passkey authentication
• Mobile-responsive design

All with the FART stack. No language switching, no complex builds—just pure development efficiency.

Want to see for yourself? Check out the full code repository: https://github.com/freestyle-sh/freestyle-slack

Getting Started with FART

Ready to give it a try? Here’s how to get started:

1. Clone the Freestyle Astro template:

   git clone https://github.com/freestyle-sh/freestyle-astro-template.git my-fart-app

2. Navigate to your project:

   cd my-fart-app

3. Install dependencies:

   npm install
   npx astro add tailwind

4. Start the development server:

   npx freestyle dev

5. Open your browser and visit http://localhost:8910 to see your FART stack app in action!

This template comes pre-configured with Freestyle, Astro, React, and Tailwind, giving you a head start on your FART stack journey.

For more detailed instructions and advanced usage, check out our documentation.

Embrace the Future

The FART stack isn’t just a catchy acronym—it’s a powerful approach to web development that can dramatically increase your productivity and code quality.

So, are you ready to revolutionize your development process? Head over to Freestyle and give it a try. Once you experience the simplicity and power of unified full-stack TypeScript development, you’ll wonder how you ever lived without it.

Remember, in the world of web development, it’s better to be on the cutting edge than left behind. Let’s build the future of web development together! 🚀