Gojo
A collaborative brainstorming app.
Overview:
Gojo is a real-time collaborative brainstorming web app built with Remix and Liveblocks. Users can easily create cards by double-clicking on the board and add content by simply clicking on them. The app allows for instant access sharing by generating a unique link similar to Google Docs, enabling collaboration among multiple users.
Features:
- Real-time Collaboration: Users can collaborate with others in real-time to brainstorm and share ideas.
- Easy Card Creation: Double-click on the board to create a new card and click once to focus on it.
- Instant Sharing: Shareable links allow anyone with the link to access and collaborate on the board instantly.
- Role Management: Users can currently add others as editors, with the potential to support different roles in the future.
- Z-Index Handling: Cards are brought to the front by focusing on them, maintaining their order via zIndexOrderListWithCardIds in Liveblocks storage.
Summary:
Gojo is a collaborative brainstorming web app that offers a simple and efficient way for users to create, share, and collaborate on ideas in real-time. With features like easy card creation, instant sharing, role management, and zIndex handling, Gojo provides a seamless experience for users looking to brainstorm and work together on projects. By leveraging Remix and Liveblocks, the app simplifies the process of real-time collaboration and sharing, making it a valuable tool for collaborative work environments.
- Figma
Figma is a cloud-based design tool for creating user interfaces, prototypes, and collaboration in real time.
- 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
- Remix
Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.
- Headless UI
Headless UI is a set of completely unstyled, fully accessible UI components for React, Vue, and Alpine.js that empower developers to build their own fully accessible custom UI components. Headless UI allows developers to focus on building accessible and highly functional user interfaces, without the need to worry about styling or layout.
- 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.
- Prisma
Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.
- Fullstack
A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.
- 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 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.