DuoFeed

Two feeds in one. 100X the fun.

Comment

DuoFeed

Inspiration

We're more connected than ever, but lonelier than before. I love social media, but I hate jumping between apps just to stay in touch with friends. It wastes time and wears me out.

Young people know they're addicted to their phones but don't know how to stop.

Johann Hari got it right: "The opposite of addiction isn't sobriety, it's human connection."

We don't need to ditch technology. We need to build it better–so it brings us closer together instead of pulling us apart.

What it does

DuoFeed is a conceptual social media application designed to address common issues with traditional platforms by offering a more mindful and intentional user experience. It features two distinct feeds: a "Friends Feed" for close connections and a "Discovery Feed" for curated content. The application integrates "mindful prompts" to encourage users to take breaks and engage in real-world interactions, fostering genuine connections over endless scrolling. It also includes features like nearby friend detection and direct messaging to facilitate in-person meetups.

How we built it

DuoFeed was built as a modern single-page application (SPA) using React for the user interface, leveraging its component-based architecture for modular and maintainable code. Tailwind CSS was used for rapid and consistent styling, allowing for a highly customized and responsive design without writing extensive custom CSS. Lucide React provided a comprehensive set of icons, ensuring a clean and professional aesthetic.

The development process was iterative, starting with a basic HTML structure and progressively enhancing it. Key steps included:

  • Setting up the development environment: Utilizing Vite for a fast development server and build process.
  • Component-based UI development: Breaking down the application into reusable React components for feeds, posts, navigation, and modal elements.
  • Implementing core logic: Managing application state with React hooks to handle screen navigation, active tabs, and user interactions.
  • Integrating mindful features: Developing a scroll tracking mechanism to trigger mindful prompts, encouraging user well-being.
  • Mock data integration: Using local mock data to simulate dynamic content for both friends and discovery feeds, as well as chat messages.
  • Refining user experience: Adding subtle animations, hover effects, and clear navigation paths to enhance usability.
  • Deployment: Deploying the application to Netlify for easy access and demonstration.

Challenges we ran into

During the development of DuoFeed, several challenges were addressed:

  • Integrating the demo into the landing page: Ensuring the interactive demo application (src/App.tsx) could be seamlessly embedded and function correctly within the static landing page (enhanced-landing.html), while maintaining responsiveness and performance.

  • Implementing mindful scroll tracking: Designing a robust mechanism to detect prolonged scrolling activity in the Discovery feed and trigger the mindful prompt effectively, without being overly intrusive. This involved careful management of scroll events and timers.

  • Integrating ConvertKit email: Unsuccessful integrating ConvertKit's email marketing system with the existing Bolt.new form while maintaining the custom design and user experience, requiring API key handling and form submission restructuring to replace Netlify's basic form collection. Happy Outcome - Bolt altered the original form to include data collection.

  • Maintaining a consistent design system: Ensuring that the custom CSS for the landing page and the Tailwind CSS within the React application worked harmoniously to create a cohesive visual experience.

  • Dynamic content management: While using mock data for the demo, structuring the data and components in a way that would easily scale to a real backend integration in the future.

Accomplishments that we're proud of

We are particularly proud of:

  • The intuitive dual-feed system: Successfully implementing two distinct feeds that cater to different social needs (close friends vs. general discovery) within a single, cohesive interface.

  • The mindful scrolling feature: Creating a unique and impactful feature that genuinely promotes user well-being by prompting breaks and encouraging real-world interaction.

  • The polished user interface: Achieving a production-ready design with thoughtful details, smooth transitions, and a modern aesthetic, demonstrating the power of React and Tailwind CSS.

  • The interactive demo: Providing a fully functional and engaging demo application that effectively showcases DuoFeed's core concepts and user experience.

  • Seamless integration with Bolt: Successfully integrating the Bolt logo and linking it to the Bolt platform, demonstrating the ease of use and capabilities of the Bolt development environment.

What we learned

This project reinforced the value of:

  • Component-driven development: Breaking down complex UIs into smaller, manageable components significantly speeds up development and improves maintainability.

  • Utility-first CSS (Tailwind CSS): How quickly and efficiently a beautiful and responsive design can be built by composing utility classes directly in the markup.

  • Iterative design and development: The importance of continuously refining features and user experience based on feedback and testing.

  • Mindful design principles: The potential for technology to be designed with user well-being in mind, rather than solely focusing on engagement metrics.

What's next for DuoFeed

The next steps for DuoFeed would involve:

  • Back-end Integration

    • Implement a robust backend (e.g., Supabase) for user authentication, persistent data storage for posts and profiles, and real-time chat functionality.
    • Content moderation pipelines to filter out harmful or irrelevant material.

  • Advanced Mindful Features

    • Explore more sophisticated mindful prompts (e.g., context-aware reminders).
    • Provide personalized usage insights and analytics dashboards.
    • Integrate with external wellness APIs for guided breathing, meditation, or screen-time management.

  • Location-Based Services

    • Enhance the “Nearby” feature with real-time location updates.
    • Implement precise friend-finding capabilities and geofenced meet-up suggestions.

  • Social Graph Expansion

    • Invite links for seamless onboarding of friends.
    • Group creation and interest-based communities to deepen connections.

  • Mobile App Deployment

    • Package the React web app into a React Native build for iOS & Android (using Expo).
    • Ensure smooth UX parity and offline support on mobile devices.

  • A/B Testing & Optimization

    • Optimize prompt timing (when and how often mindfulness breaks appear).
    • Fine-tune feed-algorithm parameters for maximum user wellbeing and engagement.

Built with

Technologies

  • Languages: JavaScript, TypeScript, HTML, CSS
  • Frameworks/Libraries: React, Tailwind CSS, Lucide React
  • Build Tool: Vite
  • Deployment Platform: Netlify
  • Other Technologies/Concepts: Responsive Web Design, Single-Page Application (SPA) Architecture, Git (for version control, though not directly used in this environment), Mock Data for prototyping

Links

  • Live Demo: https://duofeed.app
  • Code: The project code is available in this development environment.

Built With

Share this project:

Updates