I Built a Full-Stack Vite + React + Tailwind + Node.js + TypeScript Boilerplate — Feedback Welcome!

Dev Khatri — Thu, 03 Jul 2025 16:33:20 +0000

Hi devs! 👋

I recently built a full-stack boilerplate combining Vite, React, TailwindCSS, Express, and TypeScript — and open-sourced it on GitHub!

🔗 Repo: https://github.com/khatridev/vite-react-node-ts

Why I Made This Boilerplate

Over the years as a full-stack JavaScript developer, I found myself:

Repeating setup steps for every project
Manually configuring TypeScript, ESLint, Prettier, etc.
Constantly tweaking dev scripts and folder structure
So I decided to package a clean, modern, monorepo setup that just works out of the box — and can serve as a starting point for real-world full-stack projects.

Tech Stack

Layer	Stack
Frontend	Vite + React + TailwindCSS + TypeScript
Backend	Express + TypeScript
Tooling	ESLint + Prettier + Vitest + TSX (dev)
Structure	Monorepo (client/ + server/)

🙏 Feedback Welcome!
I’d love to hear what you think:

What would you improve?
What features would make this more useful?

Feel free to drop a comment here or open an issue/PR on GitHub.

🌟 Star It If You Like It
If you think this boilerplate can help others — please consider starring the repo

Thanks for reading!

create todo app in react

Dev Khatri — Mon, 04 May 2020 08:15:13 +0000

Motivation

Learn some concepts of react while creating a todo list app

Let's start

A basic todo list would have following things for sure,

add todo
show todo
delete todo

visualization is more important, they say..

so let’s create something like this…

Add TODO

To add an item we would need a simple textbox

<input type="text"/>

let's put some state in place

this.state = { new_text: "" }

now text box takes the value from our state

<input type="text" value={this.state.new_text} />

now if we type anything in the textbox, we may not see any values getting typed in the textbox,
because textbox is getting the value from the state and that is empty and not getting updated yet.

How do we update our state now ?

<input type="text" onChange={handleChange} value={todo.text} />

function,

handleChange(e) {
    this.setState({ new_text: e.target.value })
}

now we have our todo in sync with component state,

but our state is handling one item at a time. we may have to update our state definition that stores multiple items,

this.state = {
    items: [],
    new_text: ""
}

let’s use form submit to set todo

<form onSubmit={this.handleSubmit}>
  <input type="text" onChange={this.handleChange} value={this.state.new_text} />
    <button>Add</button>
</form>

function,

handleSubmit(e){
    e.preventDefault();
    let newItem = {
        new_text : this.state.new_text
    }
    this.setState(state=>({
        items : state.items.concat(newItem),
        new_text:''
      }))
  }

Note: when any form submit is performed, page re-renders hence preventing it,

          event.preventDefault();

our next task is to show the todos in the list below the textbox.

Show todo

Add a list to show all the todos, to display the list items we add one more component [Todolist] and add a list in it

<ul>
  {this.props.items.map(item=>(
      <li>{item.new_text}
      </li>
  ))}
</ul>

and display just below the textbox,

 <Todolist items = {this.state.items} />

Now we have our app that lets us type text in text box , and shows the list under it, but what is this error in the console !!

this is caused when you are displaying items and has no unique identifier, hence we may have to add some unique identifier for the list item.

"Dates are important"

Let’s put the id wherever we are using our list items

 handleSubmit(e){
        e.preventDefault();
        let newItem = {
            new_text : this.state.new_text,
            id: Date.now()
        }
        this.setState(state=>({
            items : state.items.concat(newItem),
            new_text:''
        }))
    }

and while showing the list items,

<ul>
  {this.props.items.map(item=>(
      <li key={item.id}>{item.new_text}
      </li>
  ))}
</ul>

now we have our app running without any error.

This is the flow for our app,

Wait, we discussed delete as well right…

How do we accommodate delete functionality here, when one component triggers action and another component must be updated. Currently, child component does not have capability to update the state.

To achieve this, we will use react hooks.

There are many ways we can add hooks, I like the following,

we create a separate file that performs all the crud information on the state and uses the state internally

export const TodoRepo = (initialValue = []) => {
    const [todos, setTodos] = useState([]);
    return {
        todos,
        addTodo: item => {
            if (item.new_text != "") {
                setTodos(
                    todos.concat(item)
                )
            }
        },
        deleteTodo: item => {
            if (item.new_text != "") {
                setTodos(
                    todos.filter((td) => {
                        return td.id != item.id
                    })
                )
            }
        }
    }
};

and we use this js file in our first component [ Todo_App]

<ul>
    {todos.map(item => (
      <li key={item.id}>{item.new_text}<button onClick={()=>{deleteTodo(item)}}> delete</button></li>
    ))}
</ul>

Now we have the hooks configured in our app that adds/shows/deletes list items.I have setup the todo list with material-ui and have deployed here,
https://github.com/khatridev/react-todolist

I will keep adding more features in it, would be happy to hear any feedbacks.

Starting to write blog

Dev Khatri — Sun, 15 Mar 2020 06:16:03 +0000

I want to start writing technical blogs, want to know the starter plans

Forem: Dev Khatri