Zhuhai Property Pulse: Uncovering Historical Transaction Prices through Data Analysis and Visualization

I have deployed it on my own cloud server.

Here (https://zhproperty.bakaawt.com/)

• Zhuhai Property: The name of the project
• zhuhai-property: The name of the repository, the yarn workspace, and the root folder
• zhproperty: The name of the SQL database and the user

• design: The project's design prototypes, including software design specifications, project reports, database design prototypes, ER diagrams, etc.
• src: Project source code repository, covering all frontend, backend, and database-related code files.
  • frontend: Frontend source code repository
    • build: Contains precompiled static web page files
    • config: Used to set some style specifications for the page
    • node_modules: All package files
    • public: Static web page generation template
    • scripts: Used for debugging
    • src: React code repository, containing all page source files
      • assets: Some non-JSX files
      • common: Layout files, etc.
      • hooks: React Router related
      • models: JSX page preprocessors
      • pages: Core, all frontend pages
      • router: Used for indexing and navigation between pages
  • backend: Backend source code repository
    • api: Backend core code
  • database: Database-related code
• LICENSE: Open-source license file
• README.md: Project README file in Markdown format (English)
• README_zh.md: Project README file in Markdown format (Chinese)

Made with React, package manager configuration is required to build and run.

The compiled static files was placed on the folder ./src/frontend/build, and you just need to put the content of the build folder in the root directory into the XAMPP website directory, and access it via a browser.

In src/frontend/src/assets/js/config.js, there is such a line:

const siteName = 'Zhuhai Property';
const siteUrl = 'https://zhproperty.bakaawt.com';
const siteDescription = 'Zhuhai Property';
const apiBaseUrl = 'https://zhproperty-api.bakaawt.com';
// const apiBaseUrl = 'http://localhost:8000';

export { siteName, siteUrl, siteDescription, apiBaseUrl };

Comment out the line 4, and uncomment the line 5, like this:

const siteName = 'Zhuhai Property';
const siteUrl = 'https://zhproperty.bakaawt.com';
const siteDescription = 'Zhuhai Property';
// const apiBaseUrl = 'https://zhproperty-api.bakaawt.com';
const apiBaseUrl = 'http://localhost:8000';

export { siteName, siteUrl, siteDescription, apiBaseUrl };

This successfully changes the address of the API server used by the frontend.

You should install NodeJS and yarn(optional) to run it via development environment.

How to install NodeJS: https://nodejs.dev/en/learn/how-to-install-nodejs/

cd frontend
yarn install
yarn start

or

cd frontend
npm install
npm start

Visit here then. (http://localhost:3000/)

cd frontend
yarn install
yarn build

Sidebar layout: The main navigation is placed in a fixed position on the left side of the page, and the secondary menu is placed at the top of the workspace. Suitable for systems with multi-level navigation menus and multiple layers of nested menus.

Top-bottom layout: The main navigation is placed at the top of the page. Due to the limited horizontal space of the navigation bar, this layout is suitable for systems with fewer top-level navigation items.

Top-side layout: Having both the top navigation and sidebar, this layout is suitable for application-type websites, but it sacrifices some content space.

Written in Python, but some packages need to be installed in advance.

cd src/backend
pip3 install -r requirements.txt
python3 run.py