include obj and properties in gitignore and update MainPage

.gitignore

@@ -24,3 +24,7 @@ dist-ssr
 *.sw?
 
 .vs/
+
+# Ignore the obj and Properties directories
+obj/
+Properties/

README.md

@@ -40,6 +40,17 @@ I utilize third-party APIs for fetching live stock prices and other indicators f
 - Utilizes React for state management, including user input validation before sending data to the server
 - Implements cookie-based authentication to reduce the need for repeated sign-ins
 
+#### BuyPage Component
+The BuyPage component allows users to search for stock quotes, view their current portfolio, and purchase stocks. 
+It provides real-time stock data, calculates total costs, and ensures users have sufficient funds before completing transactions.
+
+#### PageTransaction Component
+The PageTransaction component displays a user's transaction history, including details such as transaction type, stock symbol, shares, 
+unit price, and total values. It also shows the user's current balance with an option to toggle its visibility.
+#### Login Component
+The Login component provides a simple user authentication interface, allowing users to enter their username and password to log in. 
+It displays success or error messages based on the login attempt and redirects the user to the main page upon successful authentication.
+
 # <span style="color:red">START APPLICATION</span>
 
 ### For Client

tradingwebapp.client/src/PageMain.tsx

@@ -3,6 +3,12 @@ import { readUser } from './api-user';
 import { readStock, Stock } from './api-stock';
 import { lookup } from './api-quote';
 
+//Hello Van Nguyen
+/*
+The MainApp page displays a user�s portfolio, showing their cash balance, stock holdings, total stock value, 
+and overall assets. It fetches data in real-time, calculates key metrics, and organizes stock details 
+in a table for easy viewing.
+*/
 const MainApp: React.FC = () => {
     const [userData, setUserData] = useState<{ username: string; cash: number; } | null>(null);
     const [stocks, setStocks] = useState<Stock[]>([]);

tradingwebapp.client/src/assets/styles.css

@@ -1,11 +1,13 @@
 /* Size for brand */
+/* Ensures the brand name appears prominently */
 nav .navbar-brand {
-    font-size: xxx-large;
+    font-size: xxx-large; 
 }
 
+/* Makes navigation links visually distinct */
 .navbar-nav .nav-item .nav-link {
-    font-weight: bold;
-    font-size: x-large; 
+    font-weight: bold; 
+    font-size: x-large;
 }
 
 /* Colors for brand */
@@ -24,6 +26,7 @@ nav .navbar-brand .yellow {
 nav .navbar-brand .green {
     color: #2e944b;
 }
+/* Main content styling */
 .Main {
     margin-top: 15px;
     margin-left: 20px;