Scrape from https://musclewiki.com/directory and display on my // screens/ExercisesScreen.js
import React, { useEffect, useState, useContext } from 'react';
import { View, Text, FlatList, Image, StyleSheet, ActivityIndicator, Alert } from 'react-native';
import axios from 'axios';
import { AuthContext } from '../context/AuthContext';

const ExercisesScreen = () => {
    const { authToken } = useContext(AuthContext);
    const [exercises, setExercises] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchExercises = async () => {
            try {
                const res = await axios.get('http://10.0.0.203:5000/api/exercises', {
                    headers: {
                        Authorization: authToken
                    }
                });
                setExercises(res.data);
            } catch (err) {
                console.error(err);
                Alert.alert('Error', 'Failed to fetch exercises.');
            } finally {
                setLoading(false);
            }
        };
        fetchExercises();
    }, [authToken]);

    const renderItem = ({ item }) => (
        <View style={styles.itemContainer}>
            {item.imageUrl && <Image source={{ uri: item.imageUrl }} style={styles.image} />}
            <Text style={styles.title}>{item.name}</Text>
            <Text>{item.description}</Text>
            {item.videoUrl && <Text style={styles.link}>Video Tutorial: {item.videoUrl}</Text>}
        </View>
    );

    if (loading) {
        return (
            <View style={styles.loader}>
                <ActivityIndicator size="large" color="#0000ff" />
            </View>
        );
    }

    return (
        <FlatList
            data={exercises}
            keyExtractor={(item) => item._id}
            renderItem={renderItem}
            contentContainerStyle={styles.list}
        />
    );
};

const styles = StyleSheet.create({
    itemContainer: { padding: 10, borderBottomWidth: 1, borderColor: '#ccc' },
    image: { width: '100%', height: 200, marginBottom: 10 },
    title: { fontSize: 18, fontWeight: 'bold' },
    link: { color: 'blue', marginTop: 5 },
    loader: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    list: { paddingBottom: 20 },
});

export default ExercisesScreen;

here is server.js
// server.js
require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();

// Middleware
app.use(express.json());

// CORS Configuration
app.use(cors({
    origin: '*',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    credentials: true,
}));

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, {
    // Removed deprecated options as per earlier advice
})
.then(() => console.log('MongoDB Connected'))
.catch(err => console.log(err));

// Routes
app.get('/', (req, res) => {
    res.send('Fitness App Backend');
});

const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);

const exerciseRoutes = require('./routes/exercises');
app.use('/api/exercises', exerciseRoutes);

const progressRoutes = require('./routes/progress');
app.use('/api/progress', progressRoutes);

// Start Server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

// models/Exercise.js
const mongoose = require('mongoose');

const ExerciseSchema = new mongoose.Schema({
    name: { type: String, required: true },
    description: String,
    musclesTargeted: [String],
    equipment: [String],
    imageUrl: String,
    videoUrl: String,
    difficulty: { type: String, enum: ['beginner', 'intermediate', 'advanced'], default: 'beginner' },
}, { timestamps: true });

module.exports = mongoose.model('Exercise', ExerciseSchema);

// routes/exercises.js
const express = require('express');
const router = express.Router();
const Exercise = require('../models/Exercise');
const auth = require('../middleware/auth');

// Get exercises based on user goals
router.get('/', auth, async (req, res) => {
    const userId = req.user;
    try {
        // Fetch user data
        const User = require('../models/User');
        const user = await User.findById(userId);

        // Example logic: Recommend exercises based on desiredPhysique and fitnessGoals
        let query = {};
        if (user.desiredPhysique === 'muscular') {
            query = { musclesTargeted: { $in: ['chest', 'biceps', 'triceps'] }, difficulty: 'intermediate' };
        } else if (user.desiredPhysique === 'lean') {
            query = { musclesTargeted: { $in: ['legs', 'core'] }, difficulty: 'beginner' };
        }
        // Add more logic based on fitnessGoals

        const exercises = await Exercise.find(query).limit(20);
        res.json(exercises);
    } catch(err) {
        res.status(500).json({ error: err.message });
    }
});

// const adminAuth = require('../middleware/adminAuth');

// router.post('/', adminAuth, async (req, res) => {
//     // Only admins can add new exercises
// });
// Add new exercise (Admin use)
router.post('/', auth, async (req, res) => {
    // Implement admin authentication if necessary
    const { name, description, musclesTargeted, equipment, imageUrl, videoUrl, difficulty } = req.body;
    try {
        const newExercise = new Exercise({
            name,
            description,
            musclesTargeted,
            equipment,
            imageUrl,
            videoUrl,
            difficulty,
        });
        await newExercise.save();
        res.status(201).json(newExercise);
    } catch(err) {
        res.status(500).json({ error: err.message });
    }
});

module.exports = router;