Stock Market Portfolio App using MERN Stack

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

const uri = "Your Mongo URI";

mongoose
  .connect(uri)
  .then(() => console.log("MongoDB connected"))
  .catch((err) => {
    console.error("MongoDB connection error:", err);
    process.exit(1);
  });

const stockSchema = new mongoose.Schema({
  company: String,
  description: String,
  initial_price: Number,
  price_2002: Number,
  price_2007: Number,
  symbol: String,
});

const Stock = mongoose.model("Stock", stockSchema, "stocks");

const watchlistSchema = new mongoose.Schema({
  stockId: { type: mongoose.Schema.Types.ObjectId, ref: "Stock" },
  addedAt: { type: Date, default: Date.now },
});

const Watchlist = mongoose.model("Watchlist", watchlistSchema);

app.get("/api/stocks", async (req, res) => {
  try {
    const stocks = await Stock.find();
    res.json(stocks);
  } catch (error) {
    res.status(500).json({ error: "Internal Server Error" });
  }
});

app.get("/api/watchlist", async (req, res) => {
  try {
    const list = await Watchlist.find().populate("stockId");
    res.json(list);
  } catch (error) {
    res.status(500).json({ error: "Internal Server Error" });
  }
});

app.post("/api/watchlist", async (req, res) => {
  try {
    const { stockId } = req.body;
    const exists = await Watchlist.findOne({ stockId });
    if (exists) return res.json({ message: "Already in watchlist" });
    const item = new Watchlist({ stockId });
    await item.save();
    res.json({ message: "Added to watchlist" });
  } catch (error) {
    res.status(500).json({ error: "Internal Server Error" });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

// src/App.js
import React, { useState, useEffect } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink,
  Navigate,
} from "react-router-dom";
import "./App.css";

function computeColor(stock) {
  if (!stock) return "black";
  const current = stock.initial_price;
  const compare = stock.price_2007;
  if (typeof current === "number" && typeof compare === "number") {
    return current >= compare ? "green" : "red";
  }
  return "black";
}

const Stocks = ({ addToWatchlist }) => {
  const [stocks, setStocks] = useState([]);

  useEffect(() => {
    fetch("http://localhost:5000/api/stocks")
      .then((res) => res.json())
      .then((data) => setStocks(data))
      .catch((error) => console.error("Error fetching stocks:", error));
  }, []);

  return (
    <div className="App" style={{ padding: 16 }}>
      <h1>Stock Market MERN App</h1>
      <h2>Stocks</h2>
      <ul>
        {stocks.map((stock) => (
          <li key={stock._id || stock.symbol} style={{ marginBottom: 8 }}>
            <strong>{stock.company}</strong> ({stock.symbol}) -
            <span style={{ color: computeColor(stock), marginLeft: 8 }}>
              ${stock.initial_price ?? "N/A"}
            </span>
            <button
              style={{ marginLeft: 12 }}
              onClick={() => addToWatchlist(stock)}
            >
              Add to My Watchlist
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

const Watchlist = ({ watchlist }) => {
  return (
    <div className="App" style={{ padding: 16 }}>
      <h1>Stock Market MERN App</h1>
      <h2>My Watchlist</h2>
      {watchlist.length === 0 ? (
        <p>No items in watchlist.</p>
      ) : (
        <ul>
          {watchlist.map((item) => {
            const stock = item.stockId || item;
            return (
              <li key={item._id} style={{ marginBottom: 8 }}>
                <strong>{stock.company}</strong> ({stock.symbol}) -
                <span style={{ marginLeft: 8 }}>
                  ${stock.initial_price ?? "N/A"}
                </span>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
};

function App() {
  const [watchlist, setWatchlist] = useState([]);

  const loadWatchlist = () => {
    fetch("http://localhost:5000/api/watchlist")
      .then((res) => res.json())
      .then((data) => setWatchlist(data))
      .catch((err) => console.error("Error loading watchlist:", err));
  };

  useEffect(() => {
    loadWatchlist();
  }, []);

  const addToWatchlist = (stock) => {
    fetch("http://localhost:5000/api/watchlist", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ stockId: stock._id }),
    })
      .then((res) => res.json())
      .then((data) => {
        alert(data.message || "Action completed");
        loadWatchlist();
      })
      .catch((error) => {
        console.error("Error adding to watchlist:", error);
        alert("Failed to add to watchlist");
      });
  };

  return (
    <Router>
      <nav style={{ padding: 12 }}>
        <NavLink to="/stocks" style={{ marginRight: 12 }}>
          Stocks
        </NavLink>
        <NavLink to="/watchlist">Watchlist</NavLink>
      </nav>

      <Routes>
        <Route path="/" element={<Navigate to="/stocks" replace />} />
        <Route path="/stocks" element={<Stocks addToWatchlist={addToWatchlist} />} />
        <Route path="/watchlist" element={<Watchlist watchlist={watchlist} />} />
      </Routes>
    </Router>
  );
}

export default App;