{"id":122,"date":"2025-03-14T18:11:11","date_gmt":"2025-03-14T18:11:11","guid":{"rendered":"https:\/\/database.victorzsantos.com\/?page_id=122"},"modified":"2025-04-25T15:19:20","modified_gmt":"2025-04-25T15:19:20","slug":"apps","status":"publish","type":"page","link":"https:\/\/database.victorzsantos.com\/?page_id=122","title":{"rendered":"Apps"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Below is a step-by-step<\/b><\/span> tutorial on how to start your database_app_2.0<\/b><\/span> project, which includes both the backend<\/b><\/span> (FastAPI) and the frontend<\/b><\/span> (React). We\u2019ll assume your folder structure looks like this:<\/p>

~\/Desktop\/database_app_2.0\/\n    \u251c\u2500\u2500 backend\/\n    \u2502    \u251c\u2500\u2500 main.py  (Your FastAPI code)\n    \u2502    \u251c\u2500\u2500 database.csv  (Optional original CSV)\n    \u2502    \u251c\u2500\u2500 ... other backend files ...\n    \u251c\u2500\u2500 frontend\/\n    \u2502    \u251c\u2500\u2500 src\/\n    \u2502    \u2502    \u251c\u2500\u2500 App.js  (Your React code)\n    \u2502    \u2502    \u251c\u2500\u2500 uploadcsv.js (Optional upload component)\n    \u2502    \u251c\u2500\u2500 package.json\n    \u2502    \u251c\u2500\u2500 ... other frontend files ...\n    \u2514\u2500\u2500 ...<\/code><\/pre>
If your paths differ, just adjust them accordingly.<\/p>
<\/span><\/p>
<\/p>
1. Start the Backend<\/b><\/b><\/p>
\t<\/span>1.\t<\/span>Open a Terminal<\/b><\/span> (on Mac, you can use Spotlight or Launchpad).<\/p>
\t<\/span>2.\t<\/span>Navigate<\/b><\/span> to your backend<\/span> folder:<\/p>
cd ~\/Desktop\/database_app_2.0\/backend<\/code><\/pre>

<\/p>
\t<\/span>3.\t<\/span>(Optional) <\/span>Activate your virtual environment<\/b> if you have one:<\/span><\/p>
source venv\/bin\/activate<\/code><\/pre>
\t<\/span>\u2022\t<\/span>You\u2019ll see (venv)<\/span> in your prompt if it\u2019s activated.<\/p>

<\/p>
\t<\/span>4.\t<\/span>Run<\/b><\/span> the FastAPI server with uvicorn:<\/p>
uvicorn main:app --reload --host 0.0.0.0 --port 3000<\/code><\/pre>
\t<\/span>\u2022\t<\/span>This starts your backend on http:\/\/localhost:3000<\/a>.<\/p>
\t<\/span>\u2022\t<\/span>You should see logs like:<\/p>
INFO:     Uvicorn running on http:\/\/0.0.0.0:3000 (Press CTRL+C to quit)<\/code><\/pre>

<\/p>
\t<\/span>5.\t<\/span>Check<\/b><\/span> http:\/\/localhost:3000\/properties\/<\/a> in your browser. If you see JSON (like []<\/span> or a list of objects), the backend is running fine.<\/p>

<\/p>
Leave this Terminal open<\/b><\/span> so the server keeps running. To stop it, press Ctrl + C<\/b><\/span>.<\/p>
<\/span><\/p>
<\/p>
2. Start the Frontend<\/b><\/b><\/p>
\t<\/span>1.\t<\/span>Open a New Terminal<\/b><\/span> window or tab (so the backend continues to run in the first one).<\/p>
\t<\/span>2.\t<\/span>Navigate<\/b><\/span> to your frontend<\/span> folder:<\/p>
cd ~\/Desktop\/database_app_2.0\/frontend<\/code><\/pre>

<\/p>
\t<\/span>3.\t<\/span>Install dependencies<\/b><\/span> if you haven\u2019t already:<\/p>
npm install<\/code><\/pre>

<\/p>
\t<\/span>4.\t<\/span>Start<\/b><\/span> the React development server:<\/p>
npm start<\/code><\/pre>
\t<\/span>\u2022\t<\/span>If your backend is on port 3000, Create React App usually picks port 3001 for the frontend.<\/p>
\t<\/span>\u2022\t<\/span>If everything is correct, your default browser will open http:\/\/localhost:3000<\/a> or http:\/\/localhost:3001<\/a>.<\/p>
\t<\/span>\u2022\t<\/span>If you see a prompt like \u201cSomething is running on port 3000, run on port 3001 instead?\u201d press Y<\/b><\/span>.<\/p>
<\/span><\/p>
<\/p>
3. Verify the App<\/b><\/b><\/p>
\t<\/span>\u2022\t<\/span>Backend<\/b><\/span>: http:\/\/localhost:3000\/properties\/<\/a> returns JSON data from FastAPI.<\/p>
\t<\/span>\u2022\t<\/span>Frontend<\/b><\/span>: Usually http:\/\/localhost:3001<\/a> if React had to pick a different port. You\u2019ll see your React UI with tabs like \u201cSystem,\u201d \u201cK\/B,\u201d etc.<\/p>
<\/span><\/p>
<\/p>
4. Uploading Data & Checking Results<\/b><\/b><\/p>
\t<\/span>1.\t<\/span>In your React UI<\/b><\/span>, you\u2019ll see a button or component (UploadCSV) to upload a new CSV.<\/p>
\t<\/span>2.\t<\/span><\/span>Choose<\/b><\/span> a CSV file (like <\/span>TexasData.csv or <\/span>database.csv).<\/span><\/p>
\t<\/span>3.\t<\/span>After upload<\/b><\/span>, open your backend logs (the Terminal where uvicorn runs) to see debug prints.<\/p>
\t<\/span>4.\t<\/span>Go to<\/b><\/span> your React app again, select the tab you want (enter the correct password if needed), and your new data should appear if it passes all filters.<\/p>
<\/span><\/p>
<\/p>
5. Stopping the App<\/b><\/b><\/p>
\t<\/span>\u2022\t<\/span>Frontend<\/b><\/span>: In the Terminal where you ran npm start<\/span>, press Ctrl + C<\/b><\/span>.<\/p>
\t<\/span>\u2022\t<\/span>Backend<\/b><\/span>: In the Terminal where you ran uvicorn main:app –reload<\/span>, press Ctrl + C<\/b><\/span>.<\/p>

<\/p>
Everything will shut down.<\/p>
<\/span><\/p>
<\/p>
6. Summary<\/b><\/b><\/p>
\t<\/span>1.\t<\/span><\/span>Backend<\/b>:<\/span><\/p>
cd ~\/Desktop\/database_app_2.0\/backend\nuvicorn main:app --reload --port 3000<\/code><\/pre>
(Activate your virtualenv if needed.)<\/p>

<\/p>
\t<\/span>2.\t<\/span>Frontend<\/b><\/span> (in a separate Terminal):<\/p>
cd ~\/Desktop\/database_app_2.0\/frontend\nnpm install\nnpm start<\/code><\/pre>

<\/p>
\t<\/span>3.\t<\/span>Open<\/b><\/span> your browser to http:\/\/localhost:3001<\/a> (or whichever port React chooses) to see your UI.<\/p>
\t<\/span>4.\t<\/span>Password-protected<\/b><\/span> tabs, filters, and the new CSV upload should all work now.<\/p>

<\/p>
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<\/p>
That\u2019s it! Let me know if you need any more details.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Database_app_2.0 Online<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Below is a concise<\/b><\/span> tutorial on how to run both<\/b><\/span> your FastAPI backend<\/b><\/span> and React frontend<\/b><\/span> on a DigitalOcean droplet non-stop<\/b><\/span>, so they continue running when you close your terminal or even reboot the server. We\u2019ll use PM2<\/b><\/span> to manage both processes.<\/p>
<\/span><\/p>
<\/p>
1. Prerequisites<\/b><\/b><\/p>
\t<\/span>\u2022\t<\/span><\/span>You have<\/b><\/span> your code on the droplet (e.g., <\/span>database_app_2.0\/backend and <\/span>database_app_2.0\/frontend).<\/span><\/p>
\t<\/span>\u2022\t<\/span>Python<\/b><\/span> is installed, along with your virtual environment for the backend.<\/p>
\t<\/span>\u2022\t<\/span>Node.js<\/b><\/span> is installed for the frontend.<\/p>
\t<\/span>\u2022\t<\/span>PM2<\/b><\/span> is installed globally:<\/p>
npm install -g pm2<\/code><\/pre>

<\/p>
<\/span><\/p>
<\/p>
2. Run the FastAPI Backend with PM2<\/b><\/b><\/p>

<\/p>
A) Create a Start Script (Optional but Recommended)<\/b><\/b><\/p>
\t<\/span>1.\t<\/span>Go<\/b><\/span> to your backend folder:<\/p>
cd ~\/database_app_2.0\/backend<\/code><\/pre>

<\/p>
\t<\/span>2.\t<\/span><\/span>Create<\/b><\/span> a script <\/span>start_backend.sh:<\/span><\/p>
nano start_backend.sh<\/code><\/pre>

<\/p>
\t<\/span>3.\t<\/span><\/span>Paste<\/b>:<\/span><\/p>
#!\/usr\/bin\/env bash\n# Activate the Python venv\nsource venv\/bin\/activate\n# Run FastAPI on port 8000\nuvicorn main:app --host 0.0.0.0 --port 8000<\/code><\/pre>

<\/p>
\t<\/span>4.\t<\/span>Make<\/b><\/span> it executable:<\/p>
chmod +x start_backend.sh<\/code><\/pre>

<\/p>

<\/p>
B) Start with PM2<\/b><\/p>
pm2 start .\/start_backend.sh --name my-backend<\/code><\/pre>
\t<\/span>\u2022\t<\/span>–name my-backend<\/b><\/span> helps you identify the process.<\/p>

<\/p>
C) Verify & Save<\/b><\/p>
pm2 status           # See if 'my-backend' is online\npm2 logs my-backend  # View logs if needed\npm2 save             # Save process list so it restarts on reboot<\/code><\/pre>

<\/p>
<\/span><\/p>
<\/p>
3. Run the React Frontend with PM2<\/b><\/b><\/p>

<\/p>
A) Production Build (Recommended)<\/b><\/b><\/p>
\t<\/span>1.\t<\/span>Go<\/b><\/span> to your frontend folder:<\/p>
cd ~\/database_app_2.0\/frontend<\/code><\/pre>

<\/p>
\t<\/span>2.\t<\/span>Install<\/b><\/span> dependencies:<\/p>
npm install<\/code><\/pre>

<\/p>
\t<\/span>3.\t<\/span>Build<\/b><\/span> the app:<\/p>
npm run build<\/code><\/pre>

<\/p>
\t<\/span>4.\t<\/span>Install<\/b><\/span> serve<\/span> (if not already):<\/p>
npm install -g serve<\/code><\/pre>

<\/p>
\t<\/span>5.\t<\/span>Create<\/b><\/span> start_frontend.sh<\/span> (optional but cleaner):<\/p>
nano start_frontend.sh<\/code><\/pre>

<\/p>
\t<\/span>6.\t<\/span><\/span>Paste<\/b>:<\/span><\/p>
#!\/usr\/bin\/env bash\ncd \/root\/database_app_2.0\/frontend\nserve -s build -l 3000<\/code><\/pre>

<\/p>
\t<\/span>7.\t<\/span>Make<\/b><\/span> it executable:<\/p>
chmod +x start_frontend.sh<\/code><\/pre>

<\/p>

<\/p>
B) Start with PM2<\/b><\/p>
pm2 start .\/start_frontend.sh --name my-frontend<\/code><\/pre>
C) Verify & Save<\/b><\/p>
pm2 status           # Should see my-backend & my-frontend\npm2 logs my-frontend # If you want to see logs\npm2 save<\/code><\/pre>
Now your <\/span>frontend<\/b><\/span> is served at <\/span>http:\/\/YOUR_DROPLET_IP:3000.<\/span><\/p>
<\/span><\/p>
<\/p>
4. Keep Everything Running on Reboot<\/b><\/b><\/p>
\t<\/span>\u2022\t<\/span>PM2<\/b><\/span> auto-start:<\/p>
pm2 startup systemd<\/code><\/pre>
Copy\/paste the suggested command.<\/p>

<\/p>
\t<\/span>\u2022\t<\/span>Save<\/b><\/span> your processes:<\/p>
pm2 save<\/code><\/pre>

<\/p>

<\/p>
If you reboot<\/b><\/span> the droplet:<\/p>
reboot<\/code><\/pre>
When it comes back up, run:<\/p>
pm2 status<\/code><\/pre>
Both my-backend<\/span> and my-frontend<\/span> should show \u201conline.\u201d<\/p>
<\/span><\/p>
<\/p>
5. Test in Your Browser<\/b><\/b><\/p>
\t<\/span>1.\t<\/span><\/span>Backend<\/b><\/span>: <\/span>http:\/\/YOUR_DROPLET_IP:8000 (or <\/span>\/properties\/ etc.).<\/span><\/p>
\t<\/span>2.\t<\/span><\/span>Frontend<\/b><\/span>: <\/span>http:\/\/YOUR_DROPLET_IP:3000.<\/span><\/p>
\t<\/span>\u2022\t<\/span>Make sure your React app fetches from http:\/\/YOUR_DROPLET_IP:8000<\/span>.<\/p>
<\/span><\/p>
<\/p>
6. Useful PM2 Commands<\/b><\/b><\/p>
\t<\/span>\u2022\t<\/span><\/span>List processes<\/b>:<\/span><\/p>
pm2 status<\/code><\/pre>

<\/p>
\t<\/span>\u2022\t<\/span><\/span>View logs<\/b>:<\/span><\/p>
pm2 logs my-backend\npm2 logs my-frontend<\/code><\/pre>

<\/p>
\t<\/span>\u2022\t<\/span>Restart<\/b><\/span> a process:<\/p>
pm2 restart my-backend<\/code><\/pre>

<\/p>
\t<\/span>\u2022\t<\/span>Stop<\/b><\/span> a process:<\/p>
pm2 stop my-frontend<\/code><\/pre>

<\/p>
\t<\/span>\u2022\t<\/span>Delete<\/b><\/span> a process from PM2:<\/p>
pm2 delete my-backend<\/code><\/pre>

<\/p>
<\/span><\/p>
<\/p>
Summary<\/b><\/b><\/p>
\t<\/span>1.\t<\/span>Install<\/b><\/span> PM2 globally.<\/p>
\t<\/span>2.\t<\/span>Create<\/b><\/span> small start scripts for backend (start_backend.sh<\/span>) and frontend (start_frontend.sh<\/span>).<\/p>
\t<\/span>3.\t<\/span>Run<\/b><\/span> them with pm2 start<\/span> and give them names.<\/p>
\t<\/span>4.\t<\/span>Save<\/b><\/span> PM2 (pm2 save<\/span>) and set up auto-start (pm2 startup systemd<\/span>).<\/p>
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<\/p>
\t<\/span>5.\t<\/span>Done<\/b><\/span>: Both the FastAPI backend (port 8000) and React frontend (port 3000) will keep running, even after you close the terminal or reboot. Enjoy!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t