FitX Inc.

A Fitness Social Community App

Comment

FitX - Your Fitness Journey Companion

Project Overview

Inspiration

The inspiration behind FitX stemmed from a desire to create a comprehensive and engaging fitness application that goes beyond simple workout tracking. We envisioned a platform where users could not only log their activities and monitor their progress but also connect with a vibrant community of like-minded individuals. The goal was to foster motivation through social interaction, shared achievements, and a sense of belonging.

We wanted to build an app that felt intuitive, visually appealing, and genuinely helpful in empowering users on their fitness journeys, whether they are seasoned athletes or just starting out. The idea was to blend personal fitness management with the dynamic elements of a social network, making fitness a more collaborative and enjoyable experience.

What I Learned

Throughout the development of FitX, I gained significant insights into building robust mobile applications with a focus on user experience and data management. I deepened my understanding of:

Expo and React Native Development

Mastering the intricacies of Expo's managed workflow, including navigation with Expo Router, responsive design across various screen sizes (phones and tablets), and integrating third-party libraries like lucide-react-native for icons and expo-linear-gradient for visual effects.

Supabase Integration

Implementing a full-fledged backend using Supabase, covering user authentication, real-time data synchronization, and complex database schema design. This included setting up tables, defining relationships, and configuring Row Level Security (RLS) policies to ensure data privacy and integrity. I learned how to effectively use Supabase's client-side SDK to interact with the database for CRUD operations.

Database Design and Optimization

Designing a relational database schema that supports various fitness-related entities such as user profiles, workouts, exercises, personal records, achievements, posts, comments, likes, and community features. Understanding how to structure data for efficient querying and maintain data consistency was crucial.

State Management in React Native

Managing complex application state, particularly for user sessions, activity tracking, and dynamic content like social feeds and community lists. The useAuth and useSupabaseData hooks were instrumental in centralizing data fetching and state logic.

Responsive UI/UX Principles

Applying responsive design principles to ensure the application looks and functions seamlessly on different devices and orientations. This involved using custom utility functions for responsive fonts, spacing, and component sizing.

Error Handling and User Feedback

Implementing robust error handling mechanisms to provide clear and actionable feedback to users, rather than relying on generic alerts. This involved displaying inline error messages and managing loading states effectively.

How I Built the Project

The project was built iteratively, starting with the core user authentication and profile management, then expanding to include fitness tracking, social features, and community functionalities.

Project Setup

Initiated the project using Expo Router, which provided a file-system-based routing solution, simplifying navigation setup.

Authentication

Integrated Supabase for user authentication, implementing sign-in and sign-up flows. The useAuth hook was developed to manage user sessions and profile data, ensuring a seamless authentication experience.

Database Schema Design

Designed a comprehensive PostgreSQL database schema within Supabase, including tables for profiles, workouts, exercises, personal_records, achievements, user_achievements, posts, post_likes, post_comments, follows, activities, communities, and community_members. Row Level Security (RLS) policies were meticulously configured for each table to enforce data access rules.

Data Management

Developed custom React hooks (useSupabaseData) to abstract data fetching and manipulation logic for various entities, making components cleaner and more reusable.

UI Development

Built the user interface using React Native components and StyleSheet.create for styling. Emphasis was placed on creating a modern, dark-themed aesthetic with clear typography and intuitive layouts. Responsive design utilities were crucial for adapting the UI to different screen sizes.

Feature Implementation

Activities

Implemented activity logging and tracking, including a live workout session timer and the ability to manually log activities.

Communities

Developed features for discovering, creating, joining, and leaving communities, with dynamic updates to member counts.

Social Feed

Created a social feed where users can view posts, like them, and see associated workout data. The post creation modal allows users to upload media and add captions.

Splash Screen

Designed an animated splash screen for a polished app launch experience.

Continuous Refinement

Regularly refactored code, optimized performance, and addressed UI/UX issues to enhance the overall quality of the application.

Challenges Faced

Building FitX presented several challenges:

Supabase RLS Complexity

Configuring Row Level Security policies for a complex relational database was challenging. Ensuring that users could only access and modify their own data, while also allowing for public visibility of certain content (like community posts or public profiles), required careful planning and testing of RLS rules.

Real-time Data Synchronization

While Supabase handles real-time updates, integrating these seamlessly into the React Native UI, especially for dynamic elements like like counts or member lists, required thoughtful state management and re-fetching strategies.

Responsive Design Across Platforms

Ensuring a consistent and appealing user interface across various screen sizes (mobile phones and tablets) and platforms (web, iOS, Android) using StyleSheet.create and custom responsive utilities was an ongoing challenge. Different aspect ratios and pixel densities needed careful consideration.

Image and Media Handling

Implementing media selection and preview for post creation, especially considering platform differences (web vs. native) and permissions, required careful use of expo-image-picker. The current implementation simulates upload, but a real-world scenario would involve Supabase Storage, adding another layer of complexity.

Error Debugging in Expo

Debugging network errors and unexpected behaviors in the Expo environment, particularly when interacting with external services like Supabase, sometimes required deep dives into console logs and understanding the nuances of fetch API errors.

Built With

Share this project:

Updates