mkdir recipe-app
cd recipe-app
npx create-react-app client
mkdir server
cd server
npm init -y

import React, { useState, useEffect } from 'react';

function RecipeList() {
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    fetch('/api/recipes')
      .then(response => response.json())
      .then(data => setRecipes(data));
  }, []);

  return (
    <div>
      {recipes.map(recipe => (
        <div key={recipe.id}>
          <h2>{recipe.name}</h2>
          <p>{recipe.description}</p>
          <p>{recipe.ingredients.join(', ')}</p>
        </div>
      ))}
    </div>
  );
}

export default RecipeList;

cd ../server
npm install express mongoose cors

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/recipe-app', { useNewUrlParser: true, useUnifiedTopology: true });

const recipeSchema = new mongoose.Schema({
  name: String,
  description: String,
  ingredients: [String]
});

const Recipe = mongoose.model('Recipe', recipeSchema);

app.get('/api/recipes', async (req, res) => {
  const recipes = await Recipe.find();
  res.json(recipes);
});

app.post('/api/recipes', async (req, res) => {
  const recipe = new Recipe(req.body);
  await recipe.save();
  res.sendStatus(201);
});

app.listen(5000, () => {
  console.log('Server is running on port 5000');
});

useEffect(() => {
  fetch('http://localhost:5000/api/recipes')
    .then(response => response.json())
    .then(data => setRecipes(data));
}, []);

npm install jsonwebtoken bcryptjs

const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({
  username: String,
  password: String
});

const User = mongoose.model('User', userSchema);

app.post('/api/register', async (req, res) => {
  const hashedPassword = await bcrypt.hash(req.body.password, 10);
  const user = new User({ username: req.body.username, password: hashedPassword });
  await user.save();
  res.sendStatus(201);
});

app.post('/api/login', async (req, res) => {
  const user = await User.findOne({ username: req.body.username });
  if (user && await bcrypt.compare(req.body.password, user.password)) {
    const token = jwt.sign({ id: user._id }, 'secret');
    res.json({ token });
  } else {
    res.sendStatus(401);
  }
});

docker build -t recipe-app .
docker run -p 80:80 recipe-app

docker build -t recipe-app .
docker run -p 80:80 recipe-app