Inspiration

Tagrot was inspired by the desire to create a new social network experience, most of social networks decide the content user consumes by themselves, but with Tagrot I want the user to be the one who has the last word on what they what to seen in their feeds, that why i came with the idea to develop an interactive platform for users to engage with the everything they like to create and consume. Tagrot ims to provide a digital space where individuals can create, manage, and explore personalized tarot decks and cards, fostering a deeper connection to their spiritual journey. The project seeks to blend traditional wisdom with contemporary technology, offering a unique and intuitive experience for both seasoned practitioners and newcomers.

What it does

Tagrot is a full-stack web application that allows users to:

User Authentication & Profiles: Sign up, sign in, manage their personal profiles, including display name, username, bio, and avatar. Deck Management: Create custom digital decks, set their visibility (public/private), and organize them. Users can also manage system-generated decks like the "All My Cards" deck, which automatically collects all their created cards. Card Creation & Content: Add individual cards to their decks with titles, descriptions, and rich multimedia content (images, videos, and audio files). Card Viewing & Interaction: Browse cards within decks, navigate through them, and play embedded media directly within the application. Community Exploration: Discover and explore public decks created by other users in the community. Search & Filtering: Search and filter decks based on various criteria like title, description, and type. Main Deck Integration: Include personal decks in a "main deck" rotation for daily readings or focused study.

How we built it

Tagrot was build using exclusively bolt.new and supabase, almost pure vive coding, all was made in less that 48 hours thanks to the ai agent.

But going into more technical details, Tagrot was built using a modern web development stack:

Frontend: Developed with React and TypeScript for a robust and scalable user interface. Styling: Utilizes Tailwind CSS for rapid and efficient UI development, ensuring a clean and responsive design. Icons: Leverages Lucide React for a comprehensive set of customizable icons across the application. Build Tool: Vite is used for a fast development experience and optimized production builds. Backend, Database, Authentication, and Storage: Powered by Supabase, providing: A PostgreSQL database for structured data storage (profiles, decks, cards, communities). Supabase Auth for secure user authentication and management. Supabase Storage for efficient and scalable storage of multimedia files (images, videos, audio) associated with cards. Supabase Row Level Security (RLS) for fine-grained access control to data. Supabase Database Functions and Triggers for advanced backend logic, such as automatically creating "All My Cards" decks for new users, synchronizing cards, and validating deck operations. File Uploads: Implemented using react-dropzone for a user-friendly drag-and-drop interface, integrated with a custom useFileUpload hook for managing uploads to Supabase Storage.

Challenges we ran into

Developing Tagrot presented several interesting challenges:

Complex Supabase RLS: Designing and implementing robust Row Level Security policies across multiple interconnected tables (profiles, decks, cards, communities) to ensure data privacy and proper authorization for user-owned and public content. Multimedia Content Handling: Managing the upload, storage, and dynamic display of various media types (images, videos, audio) within cards. This involved ensuring correct MIME type handling, efficient streaming, and graceful error handling for unsupported formats or failed uploads. Database Triggers & Functions: Creating and debugging complex PostgreSQL functions and triggers within Supabase to automate processes like the creation of system decks for new users and the synchronization of cards into the "All My Cards" deck. State Management for Dynamic Data: Effectively managing the application's state, especially for dynamically loaded decks and cards, and ensuring the UI reflects real-time changes from the database. User Experience for Media Playback: Implementing custom media controls and ensuring a smooth playback experience for audio and video files embedded within cards. Error Handling and User Feedback: Providing clear and actionable error messages to users for various scenarios, including authentication failures, unauthorized actions, and upload issues.

Accomplishments that we're proud of

We are particularly proud of the following accomplishments in building Tagrot:

Seamless Full-Stack Integration: Successfully integrating React, Supabase, and Tailwind CSS to deliver a cohesive and functional full-stack application. Robust Multimedia Support: Implementing a flexible system that allows users to enrich their cards with diverse media types, enhancing the interactive experience. Intuitive Deck & Card Management: Creating an easy-to-use interface for users to organize their digital card collections, including the unique "All My Cards" system deck. Secure Data Handling: Leveraging Supabase's RLS and custom functions to ensure that user data is secure and accessible only to authorized individuals. Clean and Modular Codebase: Maintaining a well-structured and maintainable codebase using TypeScript, custom hooks, and a component-based architecture. Responsive Design: Ensuring the application provides a consistent and pleasant user experience across different device sizes.

What we learned

I learn how powerful is bolt.new to develop a web application from scratch and how practical is the integration with supabase I also learn good practices when writing prompt for feature development and bug fixing. I learn a bit about react features like hooks and componenents

What's next for Tagrot

For the future of Tagrot, we envision several enhancements and new features: First of all, bug fixing. Develop a system to collect user feedback and report bugs. Complete the system for community deck creation, to allow users to share and consume cards from any deck available on their favorite communities. Develop a business model based on curated communities. Card Editing Functionality: Implement the ability for users to edit existing cards, including their title, content, and associated media. Enhanced Community Features: Expand social interactions by allowing users to follow other creators, like/comment on public decks and cards, and share decks more easily. Advanced Search & Discovery: Develop more sophisticated search and filtering options for both personal and community decks and cards, including tag-based search. User Customization: Provide more options for users to personalize their profiles and the appearance of their decks. Notifications System: Implement in-app notifications for new followers, comments, or updates from followed creators. Performance Optimizations: Continuously optimize media loading, data fetching, and overall application performance for a smoother user experience. Mobile Application: Explore building a native mobile application using React Native to extend Tagrot's reach to mobile users. AI-Powered Insights: Investigate integrating AI to provide personalized card interpretations or reading insights. Develop an separated application for content creation, including screen capture, video editing, music search and creation. and integrate it with Tagrot app to make content creation more easier for Tagrot users

Built With

• bolt.new
• postgresql
• react
• supabase