Develop a TypeScript application that reads data from a MongoDB database, filters it based on user-defined criteria, and displays the results in a web page using HTML and CSS.
PLAINFORMAT
// Import necessary modules
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import mongoose, { Schema, Document } from 'mongoose';

// Define data model interface and schema
export interface IData extends Document {
  name: string;
  value: number;
}

const DataSchema: Schema = new Schema({
  name: { type: String, required: true },
  value: { type: Number, required: true },
});

const Data = mongoose.model<IData>('Data', DataSchema);

// Initialize Express app and middleware
const app = express();
const port = process.env.PORT || 3000;

app.use(cors());
app.use(bodyParser.json());

// Connect to MongoDB
const uri = 'mongodb://localhost:27017/my-app-db';
mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    console.log('Connected to MongoDB');
    app.listen(port, () => {
      console.log(`Server is running on port ${port}`);
    });
  })
  .catch((error) => {
    console.error('Error connecting to MongoDB:', error);
  });

// API endpoints
app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.post('/filter', async (req, res) => {
  const filter = req.body;

  try {
    const filteredData: IData[] = await Data.find(filter).exec();
    res.json(filteredData);
  } catch (error) {
    console.error('Error fetching filtered data:', error);
    res.status(500).send('Internal Server Error');
  }
});