Property Demo Frontend (React)

Basic real estate property listing UI with add, edit, and delete.

Prerequisites

• Node.js 18+ and npm
• Backend API running (ASP.NET Core) on https://localhost:7014

Quick start

1. Install dependencies:

   npm install

2. Start the dev server:

   npm start

3. Open http://localhost:3000 in your browser.

API configuration

• The API base URL is defined in src/api.js as API_BASE.

• If your backend runs on a different port/host, update it there. Example:

  // src/api.js
  const API_BASE = 'https://localhost:7014/api';

Features

• List properties with price/bed/bath and description
• Add new property
• Edit existing property
• Delete property

Project structure (key files)

• src/App.js: main page wiring list + form
• src/api.js: API client wrappers (fetch, create, update, delete)
• src/components/PropertyList.js: list view
• src/components/PropertyForm.js: add/edit form

Backend expectations

• CORS enabled for http://localhost:3000
• Endpoints:
  • GET /api/properties
  • GET /api/properties/{id}
  • POST /api/properties
  • PUT /api/properties/{id}
  • DELETE /api/properties/{id}

Troubleshooting

• SSL errors when calling the API:

  • Trust the ASP.NET Core dev certificate:

    dotnet dev-certs https --trust

  • Or open https://localhost:7014/swagger once and accept the cert.

• CORS error:

  • Ensure the backend allows origin http://localhost:3000 in CORS policy.

• API not reachable:

  • Verify the API port matches API_BASE in src/api.js.

Database setup (SQL script)

Use the provided backend script to create the database, table, and seed sample data.

1. Confirm the database name in backend appsettings.json:

   {
     "ConnectionStrings": {
       "DefaultConnection": "Server=DESKTOP-JF8AB6O;Database=PropertyListDemoDb;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True"
     }
   }

   The script uses PropertyListDemoDb automatically.

2. Run the script using SQL Server tools (SSMS or sqlcmd):

   • SSMS: open and execute PropertyListDemo/Scripts/seed_properties.sql.

   • sqlcmd:

     sqlcmd -S DESKTOP-JF8AB6O -E -i "..\\PropertyListDemo\\Scripts\\seed_properties.sql"

   Notes:

   • -S should match your SQL Server instance.
   • -E uses Windows auth; use -U user -P pass for SQL auth.

3. Verify data:

   USE PropertyListDemoDb;
   SELECT TOP 10 * FROM dbo.Properties;

4. Start backend and frontend after seeding. The UI will display the seeded properties.

Scripts

• npm start: start dev server
• npm run build: production build to build/
• npm test: run tests