Building the Ultimate Workout Tracker with React Native & MongoDB

notJust․dev・2 minutes read

The tutorial focuses on building a workout tracker using React Native and IBM Staps for a GraphQL API, with an emphasis on implementing exercise tracking and displaying progress. The tutorial also covers styling components, setting up navigation with Expo Router, and integrating data from MongoDB to manage exercises and new sets efficiently.

Insights

  • The tutorial focuses on building a workout tracker utilizing React Native, GraphQL API with IBM Staps, and MongoDB Atlas for data storage.
  • The importance of separating rendering logic from styling logic is highlighted, emphasizing the use of Styles sheets in React Native for better organization.
  • Expo Router is introduced for navigation in React Native applications, enhancing user experience and enabling deep linking.
  • Utilizing the React Query library to manage and query data from the GraphQL API created with IBM Staps in React Native applications ensures efficient data handling and error management.

Get key ideas from YouTube videos. It’s free

Recent questions

  • How can I build a workout tracker?

    The tutorial focuses on creating a workout tracker using various technologies. It covers building an exercise database, logging exercise sets, and displaying progress on graphs. The front end utilizes React Native with Expo SDK 50 and Expo Router for navigation. The back end involves building a GraphQL API using IBM Staps, connecting to multiple data sources like an API for exercise data and a custom MongoDB database hosted on MongoDB Atlas. The project is fully connected with GraphQL using IBM Staps and is split into three parts: user interface, GraphQL API, and workout logger functionalities. Dummy data for exercises is provided in a JSON file in the assets folder, which can be imported and displayed in the app using React Native components and styling.

  • What technologies are used in the tutorial?

    The tutorial utilizes React Native with Expo SDK 50 and Expo Router for the front end. The back end involves building a GraphQL API using IBM Staps, connecting to multiple data sources like an API for exercise data and a custom MongoDB database hosted on MongoDB Atlas. The project is fully connected with GraphQL using IBM Staps. Dummy data for exercises is provided in a JSON file in the assets folder, which can be imported and displayed in the app using React Native components and styling.

  • How do I set up Expo Router for navigation?

    Setting up Expo Router for navigation in React Native applications involves changing the entry point to Expo Router, adding a scheme for deep linking in app.json, installing additional dependencies for web compatibility, modifying project configuration for the web bundler, adding presets for Babel preset Expo in Babel config.js, restarting the server and clearing cache after modifications, creating an app directory in the source folder for screens in Expo Router, defining the home screen as index.js in the app directory, deleting app.js after moving code to index.js, and adjusting relative paths for assets and components after moving code.

  • What is the importance of using GraphQL in the project?

    The project utilizes GraphQL to create a flexible and efficient API for interacting with multiple data sources. By using GraphQL, the tutorial simplifies the process of querying and updating data, allowing for seamless communication between the front end and back end. GraphQL also enables the project to easily adapt to changing requirements and scale as needed. Overall, GraphQL enhances the performance and maintainability of the workout tracker application.

  • How can I interact with the MongoDB API?

    To interact with the MongoDB API, one needs to set up and configure a MongoDB database using MongoDB Atlas. This involves creating a new project, deployment, and database user. Accessing the data API manager in MongoDB Atlas requires going to the organization settings and ensuring the organization name is provided. Enabling IP access list may be necessary for allowing access by IP. After enabling the data API, a URL endpoint will be generated to interact with the MongoDB API. Creating an API key named "staben" is essential for interacting with the API, and testing the API request involves copying and pasting the generated command into a terminal. Setting up queries in the schema generated automatically is crucial for seamless interaction with the MongoDB API.

Related videos

Summary

00:00

"Building Workout Tracker with GraphQL API"

  • The tutorial is about building a workout tracker using various technologies.
  • The focus is on creating an exercise database, logging exercise sets, and displaying progress on graphs.
  • The front end will use React Native with Expo SDK 50 and Expo Router for navigation.
  • The back end will involve building a GraphQL API using IBM Staps, connecting to multiple data sources.
  • The data sources include an API for exercise data and a custom MongoDB database hosted on MongoDB Atlas.
  • The project will be fully connected with GraphQL using IBM Staps.
  • The tutorial is sponsored by IBM Staps, a tool for building scalable GraphQL APIs in the cloud.
  • The tutorial will be split into three parts: user interface, GraphQL API, and workout logger functionalities.
  • Dummy data for exercises is provided in a JSON file in the assets folder.
  • Exercises can be imported and displayed in the app using React Native components and styling.

19:22

Styling Text in React Native Components

  • Values range from 100 to 900, with 700 being bold, 400 normal, and 500 slightly bolder than normal.
  • Choosing 500 for the second value and adjusting color to dim gray to reduce message importance.
  • Demonstrating text styling through inline styles and the importance of separating rendering logic from styling logic.
  • Utilizing a Styles sheet in React Native to define and apply styles to components.
  • Transitioning from inline styles to Styles sheet-defined styles for better organization.
  • Explaining the concept of a view as a container and the need for separate styling for individual components.
  • Creating a separate container for each exercise to allow independent styling.
  • Defining styles for the exercise container, including background color and padding.
  • Implementing border radius for rounded corners and adjusting text capitalization for muscle and equipment labels.
  • Adding spacing between lines using margin or the gap property for a more elegant appearance.

41:34

"Streamlining React Native App with Expo Router"

  • Moving code from app.js to exercise list item component
  • Importing necessary components like View, Text, etc.
  • Identifying and removing unnecessary imports highlighted in gray
  • Copying Styles from app.js to exercise list item component
  • Removing unused styles like container
  • Exporting the function to be able to import it in other files
  • Cleaning up Styles in app.js, keeping only styles for container
  • Adding padding top 70 to resolve display below the notch issue
  • Managing spacing between items using gap property
  • Ensuring unique key property for items in flat list for proper rendering
  • Capitalizing text using text transform in Styles
  • Introduction to Expo Router for navigation in React Native applications
  • Setting up Expo Router by changing entry point to Expo Router
  • Adding scheme for deep linking in app.json
  • Installing additional dependencies for web compatibility
  • Modifying project configuration for web bundler
  • Adding presets for Babel preset Expo in Babel config.js
  • Restarting server and clearing cache after modifications
  • Creating app directory in source folder for screens in Expo Router
  • Defining home screen as index.js in app directory
  • Deleting app.js after moving code to index.js
  • Adjusting relative paths for assets and components after moving code
  • Resolving display issues and adjusting colors for better visibility.

01:04:35

Enhancing Appearance with Shadow Generator Tool

  • Adding a shadow to items can enhance their appearance, achieved through a shadow generator tool.
  • Utilizing a shadow generator tool simplifies the process of creating shadows, with a value adjustment to two.
  • Placing the tiles in an exercise container and labeling it as "Shadow" improves the overall look.
  • Adjusting margins horizontally by two or three enhances the shadow effect.
  • Setting up Expo router for navigation to a separate page for exercise details.
  • Creating a file named "exerciseDetailsScreen" within the application folder to set up the details page.
  • Utilizing the Link component from Expo router to enable navigation by clicking on exercise names.
  • Transforming the view into a Pressable component to enable navigation by clicking on the entire exercise container.
  • Sending dynamic path parameters to the exercise details screen instead of the entire item data.
  • Implementing a Stack Navigator in the layout file to provide a header for navigation and a back button functionality.

01:26:46

Customizing Stack Navigator for Dynamic Content

  • Options for a stack navigator can be set, including titles for screens.
  • Changing screen options can be done through layout rendering or directly in the screen.
  • Utilizing the stack component from Expo Router allows for dynamic screen title changes.
  • Accessing data directly from the screen enables dynamic content display, like exercise names.
  • Setting up a stack navigator involves changing options for different screens.
  • The Details page displays additional information like exercise instructions.
  • Styling instructions can be done to enhance readability, like adjusting font size and line height.
  • Making a screen scrollable involves replacing the root view with a scroll view.
  • Implementing a "Read More" feature involves setting a state variable and updating the number of displayed lines.
  • The tutorial concludes with preparations for using IBM Steps and creating a GraphQL API with API Ninjas.

01:50:49

"Exploring API Routes for Full-Stack Applications"

  • API routes offer new possibilities for full-stack applications written in XO Google Map M solic EST GS or types DS in R native.
  • A new premium course on re native and Expo is in the works, focusing on the evolving re native ecosystem.
  • Over 1,600 applications are currently using Expo, indicating its popularity and relevance.
  • A survey has been distributed to shape the upcoming course content, with nearly 200 responses received.
  • An active course at Academy.noas Dev teaches building full-stack applications with re native, Expo, and AWS amplify.
  • The graphql API for exercises will be built using an API from API Ninjas, offering a free tier with ample API calls.
  • The curl command is used to interact with the API, with examples provided for sending requests with specific parameters.
  • The curl command can be transformed into a stepen import command to convert the rest API into a graphql API effortlessly.
  • The graphql schema is automatically generated by stepen, simplifying the process of creating a graphql API.
  • Deploying and running the API is straightforward with the steps and start command, allowing for easy exploration of the graphql endpoint.

02:13:35

"Optimizing Zen Step into Graphical API Deployment"

  • The text discusses optimizing a Zen step and transforming it into a graphical API hosted and deployed in seconds.
  • The schema generated can be adjusted flexibly with commands, allowing changes like renaming queries.
  • Automatic deployment occurs in seconds when file changes are detected, ensuring quick updates.
  • The dashboard interface allows for manual updates to queries, such as changing query names.
  • The schema can be directly modified to rename properties, facilitating easy adjustments.
  • Adding parameters to queries, like a name parameter, is simple and enhances search capabilities.
  • Demonstrates how to dynamically query specific data using variables instead of hardcoding values.
  • Integration with React Native involves querying the GraphQL API created using IBM Step Zen.
  • Utilizing the React Query library to manage and query data, including GraphQL APIs, in React Native.
  • Setting up a query client globally in the application to enable querying data from the GraphQL API.

02:40:17

Handling Errors and Enhancing Security in GraphQL

  • The error "Rate Property name of undefined" is handled by R query in the code.
  • To handle loading errors, a text "failed to fetch exercises" is returned.
  • The issue of unauthorized access is due to the lack of an API key for steps.
  • The authorization header is required in the request, which can be provided through environment variables.
  • A GraphQL client is created to preconfigure the endpoint and headers for requests.
  • Environment variables are used to securely store the API key.
  • The GraphQL client simplifies the request process and enhances security.
  • The query is modified to include equipment details for exercises.
  • A specific exercise can be queried on the exercise details screen using the exercise name.
  • The useQuery hook is utilized to fetch exercise details and display them on the screen.

03:06:57

"Building Flexible Applications with MongoDB Atlas"

  • MongoDB is used to build applications with flexible schemas, allowing for different document types on the go.
  • MongoDB Atlas facilitates quick database hosting and creation.
  • Prior to database work, user interface development is necessary to add new sets.
  • A new component, "new set input," is created to handle adding new sets.
  • Styling is applied to the new component for a cohesive look.
  • The component includes inputs for repetitions and weight, styled for a clean appearance.
  • A button is added to insert the input data, triggering a function to handle the addition.
  • State variables are introduced to control input values for better data management.
  • Keyboard types are specified for numeric inputs.
  • Instructions for setting up and configuring a MongoDB database using MongoDB Atlas are detailed, including creating a new project, deployment, and database user.

03:35:32

Managing MongoDB Atlas Data API Access

  • To access the data API manager in MongoDB Atlas, one needs to go to the organization settings and ensure that the organization name is provided.
  • IP access list is not required for the Atlas, but enabling it might be necessary to allow access by IP.
  • The maximum number of Ops for the product data API is limited to one.
  • Deleting previous projects and enabling the data API may be necessary to ensure proper functionality.
  • After enabling the data API, a URL endpoint will be generated to interact with the MongoDB API.
  • Creating an API key named "staben" is essential for interacting with the API.
  • Testing the API request involves copying and pasting the generated command into a terminal.
  • Setting up queries in the schema generated automatically is crucial for seamless interaction with the MongoDB API.
  • Rendering a list of sets in a component involves querying the GraphQL API and displaying the data accordingly.
Channel avatarChannel avatarChannel avatarChannel avatarChannel avatar

Try it yourself — It’s free.