Boardly PH - Bulletin Board

A quiet, curated, and AI-powered learning hub for Filipino freelancers who are serious about learning AI and growing their skills... without the noise.

Comment

Inspiration

Boardly PH was inspired by the unique challenges faced by Filipino freelancers and solopreneurs. We observed that learning about AI tools was overwhelming due to the sheer volume of information and conflicting advice, making it hard to know where to start. Existing community platforms like Facebook groups and Discord chats, while popular, often lead to valuable information getting buried under noise and repetitive questions. Filipino solopreneurs also expressed a need for a centralized, calm, and focused space that combines community support with AI-powered learning, rather than juggling multiple apps. The goal was to create a platform that is like a curated blend of Reddit, Notion, and Circle, specifically tailored for the Filipino context, emphasizing learning and community growth.

What it does

Boardly PH functions as an AI-powered learning hub and community bulletin board. It provides a structured environment for Filipino freelancers and solopreneurs to learn about AI tools, ask questions, share insights, and connect with peers. Key functionalities include:

  • AI-Powered Summaries: Automatically generates concise summaries of long discussions, making it easier to grasp key information.
  • Structured Discussions: Organizes content into "boards" and "threads" to prevent valuable tips from getting lost.
  • Content Curation: Uses AI to detect duplicate questions and highlight relevant, community-tested answers.
  • Personalized Learning: Aims to offer personalized content recommendations based on user interests (demonstrated in the demo).
  • Community Engagement: Facilitates interaction through posts, replies, and upvotes, fostering a supportive network.

How I built it

Boardly PH was built using a modern web development stack focused on performance, scalability, and a rich user experience. The frontend is developed with React and TypeScript, leveraging Vite for a fast development environment and optimized builds. Tailwind CSS was used to create a highly customizable and responsive UI, with a custom design system that incorporates a vibrant "tropical feel" through new color palettes and unique component styling. Framer Motion was integrated to add smooth, playful animations and micro-interactions, enhancing the user interface. For the backend, Supabase provides robust authentication, database management (PostgreSQL), and real-time capabilities. The application also utilizes React Router Dom for client-side navigation, React Hook Form for efficient form handling, and Lucide React for a consistent icon set.

Challenges I ran into

Several challenges were encountered during the development of Boardly PH:

  • Cohesive Design Implementation: Translating the abstract concept of a "tropical feel" into concrete UI elements and ensuring consistency across all components (buttons, cards, badges) while maintaining usability and accessibility. This involved careful selection and application of new color palettes and animation styles.
  • Complex Animations with Framer Motion: Implementing intricate animations, such as the background effects on the home and authentication pages, and ensuring they perform smoothly across different devices without impacting page load times.
  • Supabase Schema and Authentication Integration: Adapting the authentication flow to the updated profiles table schema, ensuring user data is correctly created and managed upon sign-up and sign-in, and handling potential errors gracefully.
  • Simulating AI Features: For the demo, creating a compelling representation of AI-powered features (like summaries and recommendations) without a full-fledged AI backend, which required careful design of the demo data and UI elements to convey the intended functionality.
  • Responsive Design and Performance: Balancing the rich visual design and animations with the need for optimal performance and responsiveness on various screen sizes.

Accomplishments that I am proud of

I am particularly proud of several key accomplishments in Boardly PH:

  • Visually Stunning Tropical UI: Successfully implementing a unique and vibrant tropical design system that stands out, making the application feel engaging and inviting. The custom color palettes, playful animations, and glassmorphism effects contribute significantly to this.
  • Seamless User Experience: Creating a smooth and intuitive user flow, from authentication to navigating the dashboard and demo pages, enhanced by thoughtful animations and responsive layouts.
  • Robust Supabase Integration: Establishing a solid foundation with Supabase for user authentication and profile management, which is crucial for the community aspect of the platform.
  • Interactive Demo: Developing an interactive demo that effectively showcases the core AI-powered features and community discussions, providing a clear understanding of the platform's value proposition.
  • Clean and Maintainable Codebase: Building the application with a modular component structure, TypeScript for type safety, and clear separation of concerns, which ensures the project is scalable and easy to maintain for future development.

What I learned

Through the development of Boardly PH, I gained significant experience and deepened my understanding in several areas:

  • Advanced React and TypeScript Patterns: Learned to build more complex and maintainable React applications using advanced hooks, context API, and robust TypeScript typing for better code quality and developer experience.
  • Tailwind CSS Mastery: Explored advanced Tailwind CSS features, including custom theme configuration, responsive design patterns, and utility-first development for rapid UI creation.
  • Framer Motion for Rich Interactions: Gained hands-on experience with Framer Motion, learning to orchestrate complex animations, manage component states, and create engaging micro-interactions that elevate the user experience.
  • Supabase Ecosystem: Deepened my knowledge of Supabase, particularly its authentication services, database interactions, and the importance of Row Level Security (RLS) for secure data management.
  • Design System Thinking: Understood the importance of creating a cohesive design system, from color palettes and typography to component variants and animation principles, to ensure a consistent and branded user interface.
  • User-Centric Development: Reinforced the importance of understanding the target audience's pain points and designing solutions that directly address their needs, as exemplified by the focus on Filipino freelancers.

What's next for Boardly PH - Bulletin Board

The future of Boardly PH involves expanding its core functionalities and refining the user experience:

  • Full Board and Post Functionality: Implementing the complete features for creating, viewing, and interacting with boards, posts, and replies, leveraging Supabase for data storage and real-time updates.
  • Enhanced AI Capabilities: Integrating more sophisticated AI models for deeper content analysis, personalized learning paths, and potentially AI-assisted content creation or moderation.
  • User Profile Enrichment: Expanding user profiles to include more details relevant to freelancers, such as skills, portfolios, and collaboration preferences.
  • Moderation Tools: Developing administrative tools for community moderation to ensure a safe and productive environment.
  • Mobile Optimization: Further optimizing the application for mobile devices to provide a seamless experience on the go.
  • Feedback Loop Implementation: Setting up mechanisms to gather user feedback and iterate on features based on community needs.
  • Monetization Exploration: Investigating potential monetization strategies, such as a token system for advanced AI features or premium community access.

Built With

Share this project:

Updates