Building a Full Stack Workout Tracker with React Native & MongoDB
notJust․dev・2 minutes read
The project involves using React Native, Expo, SDK 50, GraphQL API with IBM Stabs, API Ninjas for data, MongoDB for storage, and Coral for sending POST requests, with today's goal being to save new sets to the database and implement features like charts, filtering, and pagination. To ensure functionality, correct API keys must be included, the GraphQL API must connect to API Ninjas and MongoDB, and the React Native application must be tested for adding new sets and viewing exercise details.
Insights
- IBM Stabs facilitates quick GraphQL API creation with a simple command, aiding in project development.
- The Coral utility is used to send a POST request to the MongoDB data endpoint with the action "insert one" to insert a set.
- To ensure real-time updates, the query key of the affected query is invalidated using the query client after a mutation, allowing for automatic UI updates.
- Implementing a context provider named "authContext.jsx" facilitates global state management for sharing data between components, such as storing and accessing usernames.
Get key ideas from YouTube videos. It’s free
Recent questions
How is GraphQL utilized in the project?
GraphQL API created with IBM Stabs for data retrieval.
What is the purpose of MongoDB in the project?
MongoDB used for storing set information.
How are new sets saved in the database?
Sets inserted using GraphQL mutation with variables.
How is user authentication handled in the project?
Device ID used for linking sets to users.
What features are planned for future development?
Goals include charts, searching, filtering, and pagination.
Related videos
notJust․dev
Building the Ultimate Workout Tracker with React Native & MongoDB
notJust․dev
Let's Build a STOCKS Price Tracker with React Native (step-by-step tutorial)
notJust․dev
🔴 Netflix Backend in React Native & AWS Amplify (Tutorial for Beginners)
notJust․dev
Building the Formula 1 App with React Native
notJust․dev
Build a Realtime Chat App in React Native (tutorial for beginners) 🔴