Stock Market Portfolio App using MERN Stack

The Stock Market Portfolio project is a web application that helps users manage and track their investments efficiently. Built using the MERN stack, it offers a scalable and responsive solution for modern financial management.

Prerequisites

Ensure you have the required technologies and tools installed to build and run the MERN-based application.

• Node.js and npm
• MongoDB
• React
• Express

Create Stock Market Portfolio App

Follow this approach to build a dynamic stock portfolio management application.

• The database stores a list of stock data fetched by the server.
• Users can also manually add stock data via API requests.
• The frontend includes two routes: one for all stocks and another for watchlisted stocks.
• Users can add favorite stocks to a watchlist.
• Stock prices are displayed in green if increasing and red if decreasing.

Steps to Create the Project

Follow these steps to build a full-stack stock market portfolio application using the MERN stack.

Step 1: Create a folder for the project backend and initialized the Express Application.

mkdir stock-market-portfolio
cd stock-market-portfolio
npm init -y

Step 2: Install Express and other required packages:

npm install express mongoose body-parser cors

Folder Structure:

👁 hk

Dependencies (Backend):

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.4"
}

Example: Create a file named server.js and add the following code.

Step 3: Open the MongoDB atlas or compass and insert the following JSON file in the "stocks" collection.

"https://gist.github.com/stevekinney/f96d5800852e91282f46#file-stocks-json".

Step 4: Create the Frontend (React.js) by running the below command.

npx create-react-app stock-market-frontend
cd stock-market-frontend

Step 5: Install the required dependencies.

npm install axios

Dependencies (Frontend):

"dependencies": {
 "@emotion/react": "^11.11.3",
 "@emotion/styled": "^11.11.0",
 "@mui/material": "^5.15.4",
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.6.5",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-router-dom": "^6.21.2",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Write the given code in the respective files.

Step 6: Start backend server

cd stock-market-portfolio
npm start

Step 7: Start frontend

cd stock-market-frontend
npm start

Output: