programm a todo application in typescript in in typescript

To build a simple Todo application in Typescript, you can follow the steps below:

Step 1: Setup

Create a new Typescript project and install the necessary dependencies:


index.ts
npm init
npm install typescript react react-dom @types/react @types/react-dom
78 chars
3 lines

Step 2: Add React

Create a new index.tsx file and add the following code:


index.ts
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <div>Hello World</div>;
};

ReactDOM.render(<App />, document.getElementById('root'));
178 chars
9 lines

Step 3: Add Express

Install Express and add a simple server to serve the React app:


index.ts
npm install express @types/express
35 chars
2 lines

Create a new server.ts file and add the following code:


index.ts
import express from 'express';
import path from 'path';
const app = express();

app.use(express.static(path.join(__dirname, '../client')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/index.html'));
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});
324 chars
14 lines

Step 4: Add MongoDB

To add MongoDB, install the necessary dependencies:


index.ts
npm i mongoose @types/mongoose dotenv
38 chars
2 lines

In the root of the project create a .env file with the MongoDB connection string:


MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/test?retryWrites=true&w=majority
103 chars
2 lines

Create a new database.ts file and add the following code:


index.ts
import mongoose from 'mongoose';
import dotenv from 'dotenv';
dotenv.config();

const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGODB_URI!, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log(`MongoDB connected`);
  } catch (error) {
    console.error(`MongoDB connection error: ${error}`);
    process.exit(1);
  }
};

export default connectDB;
414 chars
19 lines