Title: Building a Vue.js Todo App: A Charanjit Chana Style Guide

Are you a recent graduate looking to expand your web development skills? Look no further than Charanjit Chana's style of building a Vue.js todo app. Vue.js is a progressive JavaScript framework that is beginner-friendly, yet powerful enough to build complex applications. In this guide, we'll walk you through the steps to build a basic todo app using Vue.js in the style of Charanjit Chana.

Step 1: Set up your development environment
Before we begin, make sure you have Node.js and Vue CLI installed. Check out this video tutorial by Traversy Media on how to set up a Vue.js development environment.

Step 2: Create a new Vue.js project
Open up your terminal and navigate to the directory where you want to create your project. Run the following command to create a new Vue.js project:

```
vue create todo-app
```

This will create a new project named `todo-app` with the default configuration. You can customize the configuration by selecting different options when prompted.

Step 3: Install dependencies
Next, we need to install the dependencies required for our todo app. We'll be using the following packages:

- `vue-router` for routing
- `axios` for making HTTP requests

Run the following commands to install the dependencies:

```
npm install vue-router
npm install axios
```

Step 4: Set up routing
We'll be using Vue Router to handle the routing for our app. In the `src` directory, create a new file named `router.js` and add the following code:

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import TodoList from './components/TodoList.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: TodoList }
]

const router = new VueRouter({
  routes
})

export default router
```

This sets up a single route for our app that maps to the `TodoList` component.

Step 5: Create the TodoList component
In the `src/components` directory, create a new file named `TodoList.vue` and add the following code:

```html
<template>
  <div>
    <h1>Todo List</h1>
    <input type="text" v-model="newTodoText">
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      todos: [],
      newTodoText: ''
    }
  },
  methods: {
    addTodo () {
      axios.post('/api/todos', { text: this.newTodoText })
        .then(response => {
          this.todos.push(response.data)
          this.newTodoText = ''
        })
    }
  },
  mounted () {
    axios.get('/api/todos')
      .then(response => {
        this.todos = response.data
      })
  }
}
</script>
```

This creates the main component for our todo app. It contains an input field and a button to add new todos, and a list of todos that are retrieved from the server using Axios.

Step 6: Create the server API
To retrieve and add todos, we need to create a server API. In the root directory of your project, create a new file named `server.js` and add the following code:

```javascript
const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())
app.use(express.json())

let todos = []

app.get('/api/todos', (req, res) => {
  res.send(todos)
})

app.post('/api/todos', (req, res) => {
  const newTodo = req.body
  newTodo.id = todos.length + 1
  todos.push(newTodo)
  res.send(newTodo)
})

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000')
})
```

This sets up a simple server API that listens on port 3000. It has two endpoints: `/api/todos` to retrieve all todos and `/api/todos` to add a new todo.

Step 7: Start the app
Finally, we can start our app by running the following command in the terminal:

```
npm run serve
```

This will start the development server and open up the app in your browser. You should be able to add and view todos using the input field and list.

Congratulations, you've just built a Vue.js todo app in the style of Charanjit Chana! For more resources on Vue.js, check out Charanjit Chana's YouTube channel or the official Vue.js documentation.