TimeMomo is designed for presenters, streamers, and event managers who need to share timers with audiences in real-time, without the complexity of traditional WebSocket implementations.

What is TimeMomo?

TimeMomo is a collaborative timer application that allows users to create “rooms” where timers can be started, paused, and synchronized across all participants in real-time. Think of it as a professional timer platform for:

• Presenters who need to manage speaking time during conferences
• Streamers who want to share countdowns with their audience
• Event managers coordinating multiple sessions
• Meeting facilitators keeping discussions on track

The app features a clean, intuitive interface with room management, user authentication, and responsive design that works seamlessly on both desktop and mobile devices.

Using TimeMomo is simple.

Register > Create a room > Share the room URL with audience and presenters to see a common timer.

It is an alternative to apps like stagetimer.io, but let’s face it - there are many great apps and it’s not a great alternative. TimeMomo happens to be the app I built.

Use it for free (well, limited to 3 concurrent rooms and ~100 participants). http://timemomo.techformist.com/

Or, make the project your own! TimeMomo is open source and available on GitHub.

Try it out and let me know what you think!

Why I Built This

My motivation was twofold: learning and solving a real problem. Despite my reservations about React (I’ve always preferred Vue/Nuxt), I wanted to challenge myself with Next.js to understand what all the hype was about. At the same time, I kept encountering situations where I needed a reliable timer that could be shared across devices without the hassle of screen sharing or manual coordination.

The idea crystallized when I realized how many professional settings could benefit from a real-time timer platform - from agile ceremonies to public speaking events. And since I’m a big fan of keeping things simple, I wanted to build something that didn’t require complex infrastructure.

Technology Choices: Keeping It Simple and Powerful

Next.js: Facing My React Fears

Choosing Next.js was a deliberate step outside my comfort zone. As someone who’s struggled with React’s verbosity and component lifecycle complexities, I approached this with skepticism. However, Next.js 15’s improvements, combined with TypeScript, made the experience surprisingly smooth. The App Router and server components felt more intuitive than I expected, and the built-in optimization features handled performance concerns automatically.

PocketBase: Real-Time Magic

This is where the project really shines. PocketBase is absolutely incredible for real-time applications. While I always appreciated the one-file philosophy for entire backend, I was blown away by how it handles live synchronization without needing to set up WebSocket servers or manage connection states. The real-time subscriptions API is so clean and reliable that I could focus on building features rather than infrastructure.

The decision to use PocketBase instead of traditional WebSockets was a game-changer. It simplified the architecture dramatically:

• No need for separate WebSocket servers
• Built-in authentication and authorization
• SQLite backend that’s easy to deploy
• Automatic real-time updates across all connected clients

Shadcn/UI: The UI I Always Wanted

If PocketBase is the backend hero, Shadcn is definitely the frontend star. The developer experience is exceptional - copy-paste components that just work, with full TypeScript support and excellent documentation.

Dokploy: Deployment Adventures

Using Dokploy for the first time was an interesting experience. I always wanted the Vercel / Netlify experience at budget and this is certainly it. The ability to deploy both the Next.js frontend and PocketBase backend as containers with automated CI/CD made the whole process much smoother than traditional hosting setups.

Travails and Turbulences: The Learning Curve

Building TimeMomo wasn’t without its challenges. As someone new to React/Next.js, I hit several roadblocks:

React Learning Pains

• Understanding React’s component lifecycle and hooks took time
• State management across real-time updates required careful planning
• TypeScript integration had a learning curve, especially with complex types

I am still not a fan.

Real-Time Synchronization Headaches

• Love the real-time capabilities
• Debugging hooks - not so much

Deployment Drama

• Dokploy’s initial setup was trickier than expected
• Docker networking between Next.js and PocketBase containers

And finally.. addressing the AI in the room

AI tools were incredibly helpful throughout this project. I started out with Bolt, and switched to VSCode. Throughout the cycle, AI assistance was a game-changer for Next.js and Shadcn specifically. I was never very successful getting clean first versions out with Nuxt in the past, but with React I could certainly iterate much faster.

• Fast conversion of design ideas into working React components
• Query issues during development
• Get contextual answers for deployment issues

In Conclusion

This project taught me that sometimes stepping outside your comfort zone pays off. While I’m still not a React convert, I now understand its strengths and can appreciate why it’s so popular. The combination of Next.js + PocketBase + Shadcn proved to be incredibly productive.

Looking ahead, I’m excited about the potential improvements:

• Nuxt 4 with Nuxt UI and Shadcn-Vue MCP (that AI-assisted Vue development I keep hearing about)
• Laravel with Laravel Boost!

My plans for this app? Well, not much - unless I see people really interested.

I particularly liked the below features -

• React Server Components that makes life simpler, but the coding process is much more efficient
• The new directory structure that simplifies routes. Layouts are intuitive and simple
• Love the new links (yes, I had to say this)

What lays hidden in the first statement is all the power hidden in React Server Component itself and that of streaming SSR. Combined with the new way of writing pages, I think this came closest for me to reconsider coding in React.

• Write server and client code in context of a component
• Do not worry about writing an entire backend infrastructure
• Smaller JS download sizes
• Execute faster with streaming SSR - UI that loads instantly and maintains performance for all the magical stuff in your app

With easy deployment options and the ability to serve many things from edge, NextJS is compelling for any new apps in the React world.

Time for a To-do app

Let us try out the new features with a simple to-do app written with -

1. NextJS
2. Pico CSS for styling
3. PocketBase for backend

Setup

Create the NextJS app.

cd c:\dev\myprojects
pnpm create next-app todo-next13 --experimental-app

You may not want the experimental flag once the “app” directory and associated functions are main stream.

Install Pico CSS

You can just CDN into Pico CSS, a lightweight, easy-to-use CSS library that is perfect for experimental projects.

I just installed it for later use..

pnpm install pico-css

Setup PocketBase

PocketBase is turning out to be a God send for me to quickly try out applications with a robust backend. PocketBase is written in Go, is extensible since it can also act as a framework, and has a good database (uses SQLite).

As the first step, download PocketBase executable. Store the exe in <_root-folder_ > db.

You can serve PocketBase with -

./pocketbase serve

You can access the database using automatic REST APIs, or use the JS SDK. We will use the SDK since we never know when our To do app will blow up.

pnpm install pocketbase

Define data model in PocketBase

Once installed, you should be able to access the admin UI to create tables and enter dummy records in the database before you take your next gulp of your favourite drink.

Point your browser to http://127.0.0.1:8090/_/.

Click on them shiny buttons to create a table and a few columns.

Code the Todo app

It is time to write some magic.

Create layout and home page

In the _root-folder_ > app directory create a new file called ’layout.tsx’.

import Link from "next/link";
import "@picocss/pico/css/pico.min.css";
import "../app/css/custom.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head>
      
      </head>
      <body>
        <main className="container">

        <nav>
          <Link href="/">Home</Link>
          <Link href="/todos">Todo</Link>
        </nav>
        {children}
        </main>
      
      
        </body>
    </html>
  );
}

layout.tsx will serve as our home page container. You can code in-

1. All the elements that are common across components - e.g. Nav, etc.
2. Include CSS - Pico CSS and any custom CSS that you fancy

Don’t forget to create custom.css in css directory if you have included a custom CSS statement.

Create another file called page.tsx, which will serve as the root page of your app.

import Link from "next/link";

export default function HomePage() {
  return (
    <div>
      <h1>Home</h1>
      <p>Awesome Next Todo</p>
      <div className="padding-top: 3em">
        <Link href="/todos">View Todos</Link>
      </div>
    </div>
  );
}

Execute your Next app if you are have not already done so and see your beautiful app..

pnpm run dev

You are now ready to add the core functionality.

Create a folder called todos in _root-folder.

Add a new files called page.tsx..

export const fetchCache = false;
import Link from "next/link";
import PocketBase from "pocketbase";
import CreateTodo from "./CreateTodo";

const client = new PocketBase("http://127.0.0.1:8090");

async function getTodos(fromRec: number = 1, filter = "") {
  const res = await client.records.getList("todos", fromRec, 20, {
    filter: filter,
  });

  return res?.items as any[];
}
export default async function TodosPage() {
  const todos = await getTodos();

  return (
    <div>
      <h1>Todos</h1>

      {todos?.map((todo) => (
        <Todo key={todo.id} todo={todo}></Todo>
      ))}
      <div className="padding-top: 1em;padding-bottom: 1em;">
        <CreateTodo></CreateTodo>
      </div>
    </div>
  );
}

function Todo({ todo }: any) {
  return (
    <Link href={`/todos/${todo.id}`}>
      <div className="grid">
        <div className="todo-status">
          <input
            type="checkbox"
            name="status"
            id="status"
            checked={todo.status == "Complete"}
            value="Complete"
          />
        </div>

        <div className="todo-desc">{todo.description} </div>
        <div className="todo-date">
          <input
            name="todo-date"
            id="todo-date"
            className="todo-date-input"
            value={todo.planned_date}
            readOnly={todo.status == "Complete"}
          />
        </div>
      </div>
    </Link>
  );
}

page.tsx is the root page when you navigate to localhost:3000/todos. There is simple code here to -

1. Query todos from database
2. Display the todos
3. Enable creation of new todo through the CreateTodo component (which we will create next)

Create another file called CreateTodo.tsx in the same folder -

"use client";

import Link from "next/link";
import { useState } from "react";
import PocketBase from "pocketbase";
import { useRouter } from "next/navigation";

const client = new PocketBase("http://127.0.0.1:8090");

export default function CreateNote() {
  const [desc, setDesc] = useState("");
  const [status, setStatus] = useState("");
  const [plannedDate, setPlannedDate] = useState("");

  const router = useRouter();

  const createTodo = async () => {
    await client.records.create("todos", {
      description: desc,
      status: status,
    });
    setStatus("");
    setDesc("");
    router.refresh();
  };
  return (
    <div>
      <form onSubmit={createTodo}>
        <div>
          <i className="margin-bottom: 1em;">Create New Todo..</i>

          <label htmlFor="desc">Description</label>
          <input
            name="desc"
            value={desc}
            onChange={(e) => setDesc(e.target.value)}></input>

          <label htmlFor="status">Status</label>
          <input
            name="status"
            value={status}
            onChange={(e) => setStatus(e.target.value)}></input>
          <button type="submit">Create Todo</button>
        </div>
      </form>
    </div>
  );
}

use client denotes that the CreateTodo component needs to be interactive on the client. All the earlier components can execute code on server and send the results to the client, while CreateTodo has to be pushed as Javascript to client and the form needs to accept user inputs.

Other than the client interaction, CreateTodo is ‘more or less’ standard React.

The code described so far should be good enough to complete all the things that the app needs to do. However, let us add a dynamic route just because we can. (Also, this will eliminate the errors if you have copied the code as is).

Create a directory [id] under todos directory. Create a new file page.tsx -

import Link from "next/link";
import PocketBase from "pocketbase";

const client = new PocketBase("http://127.0.0.1:8090");

async function getTodo(todoId: string = "") {
  const res = todoId
    ? await client.records.getOne("todos", todoId)
    : { id: "", description: "", status: "" };

  return res;
}
export default async function TodoPage({ params }: any) {
  const todo = await getTodo(params.id);
  return (
    <div>
      <h1>Todo</h1>
      <div className="padding-bottom: 1em;">
        <Link href="/todos">Back to todos</Link>
      </div>

      <label htmlFor="id">Id</label>
      <input name="id" value={todo.id}></input>

      <label htmlFor="desc">Description</label>
      <input name="desc" value={todo.description}></input>

      <label htmlFor="status">Status</label>
      <input name="status" value={todo.status}></input>
    </div>
  );
}

You would have probably logged out by now, or know the drill..

1. page.tsx is the root page
2. The component accepts a parameter from the caller to query for a particular todo record
3. Display the todo

What is different is the [id] tag that indicates that the component is dynamic (spare me the suprise look).

Lo & behold, you now have a to do app that can make the next million dollar SaaS app.

See complete code for this incomplete app on GitHub.

Why I will not switch to NextJS

I really like where NextJS is going. I see compelling reasons for using Next - the tooling, ease of deployment, and the massive community that tells me how my code is completely wrong and how I should be thinking about solving world hunger.

But again, ReactJS is not exactly my favourite way to write apps (yes, that’s me being stupid). Also -

• I still think ReactJS is a lot of boilerplate
• I don’t quite enjoy writing a lot of code to maintain state, render a list or do the thousand things that every web app has to do
• I don’t have to answer to anyone or collaborate with 100 people for my side projects
• I don’t have a massive library of UI components built out in React that can help me speed up the development process

Till I can check at least three of the above boxes, I will continue to code in either Vue or Svelte.

Get Started

Use create-react-app to structure your project like any sane person would do -

npx create-react-app tasker-react-sample-app

Proceed to have a dozen cups of coffee while your app gets initialised. Open the project root folder in VSCode to see this beautiful structure.

Start your app..

npm run start

Navigate to http://localhost:3000 in your browser to see the app.

While the create-react-app seems to do a lot of things (it does), you only need to care about a few things at this time -

• The app gets anchored with one HTML file public/index.html and in a single node <div id="root"></div> (for the most part, bear with me). The file itself will not have direct reference to the javascript - that will be done through a build step
• src/index.js refers to the root element

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById("root")
  );
  

• App in index.js is where you will start coding React magic. You shall use JSX in the React components to do all that magic, or you shall perish -

  function App() {
    return (
      <div className="App">
        <header className="App-header"></header>
      </div>
    );
  }
  

Read more about JSX here, or just follow along by keeping mind two things -

• You can code all the HTML you want within JSX
• Use className instead of class to reference css classes
• Use { } notation within JSX for expressions, variables etc.

Let’s do a quick take on how the components work. Create a new file src/components/HelloWorld.js -

export default function HelloWorld() {
  return (
    <>
      <h3>Hello World</h3>
    </>
  );
}

JSX can have only one root - <></> tags take care of that. Rest is just plain HTML.

Include HelloWorld in App.js -

import logo from "./logo.svg";
import "./App.css";

import HelloWorld from "./components/HelloWorld";

// ...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* - existing code goes here - */}
      </header>
      <HelloWorld />
    </div>
  );
}

export default App;

You can see the bold words in your app almost immediately.

Before we proceed, install a few things to make your React development easier -

1. Install React Developer Tools. This will add a couple of tabs in your Chrome Developer Tools to view components. By default you should see Components and Profiler
2. Install VSCode extension ES7 React/Redux/GraphQL/React-Native snippets that will give you a bunch of useful snippets

You can use Emmet scripts to quickly create boilerplate and scripts - for e.g. create a new file and type in rfce and tab to see it in action.

Let us also include some styles, because well, we’re not cave-men.

Include the below line in your index.html to include a small, class-light library called chota.css -

<link rel="stylesheet" href="https://unpkg.com/chota@latest" />

Create a new file src/assets/styles.css and leave it blank for now. We will use it for custom styling. Include the file in App.js -

import "./assets/styles.css";

I will not really touch upon this topic again - but you can see the CSS code in the Github repo.

Creating Structure for your App

Let us create the basic elements for our app. First, the header - create a new file called src/components/Header.js.

function Header() {
  return (
    <div>
      <nav className="nav">
        <div className="nav-left">
          <a className="brand" href="#">
            Tasker
          </a>
        </div>
        <div className="nav-right">
          <div className="tabs">
            <a href="https://techformist.com">Techformist</a>
          </div>
        </div>
      </nav>
    </div>
  );
}

export default Header;

We have seen this earlier - JSX and stuff. The only difference is the CSS classes. Let’s include this Header in App.js.

// ...
import Header from "./components/Header";
// ... other code

function App() {
  return (
    // ...
    <div className="App">
      {/* .. */}
      <Header></Header>
      {/* .. */}
    </div>
  );
}

The above changes should give you a good idea about where we are going. We create a Header component, and include it in the main App so that it’s available everywhere in the app.

We can now include the main content just below Header.

Create Tasks Component

The simplest way to create a task component is familiar to us by now. Create a new file src/components/Tasks.js -

function Tasks() {
  return (
    <div className="row">
      <div className="col-12">Learn React</div>
      <div className="col-12">Profit</div>
    </div>
  );
}

export default Tasks;

Include Tasks in App.

// ...
import Tasks from "./components/Tasks";
// ... other code

function App() {
  return (
    // ...
    <div className="App">
      {/* .. */}
      <Header></Header>
      <button className="button">New</button>
      <Tasks></Tasks>
      {/* .. */}
    </div>
  );
}

You should now be able to see the tasks and a button “New” that doesn’t do anything.

Let’s level up. We will create a state variable tasks that will store tasks and can be accessible from different components. We could eventually use this variable to store tasks retrieved from a database or a file.

In the simplest design we could create tasks in Tasks component, but that would make it difficult to access in a different component. For example, we need tasks in both Tasks, which is a list of tasks, and TaskDetail, which shows the detail task and allows user to edit tasks. So, let’s create tasks in App.js for now.

import "./App.css";
import "./assets/styles.css";

import Header from "./components/Header";
import Tasks from "./components/Tasks";

import { useState } from "react";

function App() {
  const [tasks, setTasks] = useState([
    { desc: "Learn React", id: 1 },
    { desc: "Profit", id: 2 },
  ]);

  return (
    <div className="App">
      <Header></Header>
      <div className="container">
        <Tasks tasks={tasks}></Tasks>
      </div>
    </div>
  );
}

export default App;

We have done a couple of cool things here -

1. Import useState from React
2. Create tasks and initialize it. tasks is the variable name and setTasks is used to set this variable with a value. We will not be using setTasks right now, but directly provide the initial value as a param to useState

   const [tasks, setTasks] = useState([
     { desc: "Learn React", id: 1 },
     { desc: "Profit", id: 2 },
   ]);
   

3. Pass tasks as props to the Tasks component

Let us receive tasks prop in our Tasks component.

function Tasks({ tasks }) {
  return (
    <div className="row">
      <div className="col-12 text-right">
        <button className="button primary">New</button>
      </div>
      {tasks.map((task) => {
        return (
          <div className="col-12 text-left" key={task.id}>
            <h4>{task.desc}</h4>
          </div>
        );
      })}
    </div>
  );
}

export default Tasks;

As you can see -

1. We receive a destructured tasks prop in the function. You could also define param as simply props (no brackets, no destructuring), and refer to tasks as props.tasks
2. We cycle through tasks and display individual task using h3 element. The brackets contain the overall expression in JSX

   {
     tasks.map((task) => {
       return (
         <div className="col-12 text-left" key={task.id}>
           <h4>{task.desc}</h4>
         </div>
       );
     });
   }
   

You should now see..

Create Task Component

Tasks component is doing too many things -

1. List tasks
2. Show task
3. er.. that’s about it, but it has the potential to much more

Let’s break the component so that display of a task becomes concern of a different component.

Create a new file src/components/Task.js -

function Task({ task }) {
  return (
    <div className="col-12 text-left" key={task.id}>
      <h4>{task.desc}</h4>
    </div>
  );
}

export default Task;

The code is a direct copy of the fragment responsible to display a specific task in Tasks component.

Include Task in Tasks -

import Task from "./Task";
function Tasks({ tasks }) {
  return (
    <div className="row">
      <div className="col-12 text-right">
        <button className="button primary">New</button>
      </div>
      {tasks.map((task) => (
        <Task task={task} key={task.id} />
      ))}
      <div className="col-12"></div>
    </div>
  );
}

export default Tasks;

This is very similar to last time when we included one component in another. We are just using an additional attribute called key, which denotes the unique identifier of each element in the array (and that will be task.id in our case).

The added advantage of segregating task display is that we can use this Task component to display individual task anywhere in the application.

Fantastic.

Let us add more attributes to the task and beautify this a bit. Afterall, a task is not simply about the description.

Add more attributes to the task in App.

const [tasks, setTasks] = useState([
  { desc: "Learn React", id: 1, date: "2021-01-03 10:00", status: "Complete" },
  { desc: "Profit", id: 2, date: "2021-01-05 15:00", status: "Open" },
]);

Change Task.js to make tasks come alive -

function Task({ task }) {
  return (
    <div className="card text-left" key={task.id}>
      <div className="row">
        <div className="col-10">
          <h4>{task.desc}</h4>
          <div className="task-meta">
            <img
              src="https://icongr.am/feather/calendar.svg?size=12&color=b5b5b5"
              alt="calendar"
            />
            {task.date}
          </div>
        </div>

        <div className="col-2 is-center">
          <button className="button icon-only clear">
            <img
              src="https://icongr.am/feather/check-circle.svg?size=24&color=11d054"
              alt="Open"
            />
          </button>
        </div>
        <div className="col-12">
          <p>{task.remarks}</p>
        </div>
      </div>
    </div>
  );
}

export default Task;

And, voila..

Add Functionality: Complete Task

We have successfully displayed a task so far, but we don’t have any functionality enabled on the task. We will change that by inserting a button to toggle the task status.

Add a function that can get called to change status. If we had a global state (e.g. Redux), we would have more independence to decide where this function has to reside. Since we are using a simple state at App level, we will introduce the function to change that state also within App. Create a new function -

const onTglStatus = (task) => {
  console.log("completing task");
};

The child component (Tasks in our case) does not know about this method. We have to pass the function to the inner-most component that will call it for some greater good.

Change App.js to pass onTglStatus as a prop -

// ...
<Tasks tasks={tasks} onTglStatus={onTglStatus}></Tasks>
//  ...

Repeat the above code in Tasks.js -

function Tasks({ tasks, onTglStatus }) {
  // ...
  <Task task={task} onTglStatus={onTglStatus} />;
  // ...
}

Call the function in Task.js -

function Task({ task, onTglStatus }) {
  // ...
  <button className="button icon-only clear" onClick={() => onTglStatus(task)}>
    > "⬜"
  </button>;
  // ...
}

Click the button to see the debug statement in developer console.

We have moved props including variables(state) and functions that act on the state down the chain, and events get surfaced up the component chain!

Add the function to do something beyond just a debug statement in App.js -

const onTglStatus = (task) => {
  console.log("completing task");
  setTasks(
    tasks.map((chkTask) => {
      chkTask.complete =
        task.id === chkTask.id ? !chkTask.complete : chkTask.complete;
      return chkTask;
    })
  );
};

In the above code we use Array.map function to change status for the matching record. The matching record (task) is supplied by the function called by button click event.

Let us change the checkbox/button in indicate completed tasks in Task.js.

// ...
<button className="button icon-only clear" onClick={() => onTglStatus(task)}>
  {task.complete && "✅"}
  {!task.complete && "⬜"}
</button>
// ...

We use one of the old Javascript tricks to display ✅ when task is complete.

• {task.complete && "✅"} evaluates to ✅ when task.complete is true. Else this returns nothing
• The next expression {!task.complete && "⬜"} returns ⬜ when task.complete is false

Since our application is reactive to changes and the button label gets driven by data, we see the below behaviour.

Add Functionality: Add Task

We need to get task data from user and save new tasks. To that end, add the function to save tasks onSaveTask in App.js -

const onSaveTask = ({ desc, date }) => {
  console.log("saving tasks");
  setTasks([
    { desc: desc, date: date, id: Date.now(), complete: false },
    ...tasks,
  ]);
};

We are using setTasks like before, but this time we are adding a new element to the array. Again, we don’t add the element directly to array since the state variable is immutable. We rather do this -

1. create a new variable
2. Add { desc: desc, date: date, id: Date.now(), complete: false }, as the first element. desc and date are passed along by the form used to create new tasks. Date.now() is a simple way to make the id unique
3. Add the existing array elements to the new array variable ...tasks

Next, add a new form to collect data. Let’s create a new component src/components/TaskEdit.js. This component will receive the function onSaveTask as props and call it on button click.

import { useState } from "react";

function TaskEdit({ task, onSaveTask }) {
  const [desc, setDesc] = useState("");
  const [date, setDate] = useState("");

  const saveTask = (e) => {
    e.preventDefault();
    onSaveTask({ desc: desc, date: date });

    setDesc("");
    setDate("");
  };
  return (
    <div className="card">
      <h3>Add Task</h3>
      <form>
        <label htmlFor="desc">Description</label>
        <input
          type="text"
          name="desc"
          id="desc"
          value={desc}
          onChange={(e) => setDesc(e.target.value)}
        />

        <label htmlFor="date">Date</label>
        <input
          type="text"
          name="date"
          id="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />

        <div className="text-right">
          <button className="button dark" onClick={saveTask}>
            Save
          </button>
        </div>
      </form>
    </div>
  );
}

export default TaskEdit;

We have gone through some of the functions implemented here, while rest are mostly HTML -

1. const [desc, setDesc] = useState(""); creates a new state variale local to TaskEdit and initiates it to ""
2. a standard HTML form displays a couple of text boxes to collect desc and date
3. Save button calls a local method saveTask, which will call the onSaveTask function in App.js and resets form

Add functionality to New button so that it displays the TaskEdit component and associated form (and can also toggle to hide the form).

In App.js -

// ...
const [showTaskEdit, setShowTaskEdit] = useState(false);
// ...

<button
  className="button outline"
  onClick={() => setShowTaskEdit(!showTaskEdit)}>
  {!showTaskEdit && "New"}
  {showTaskEdit && "➖"}
</button>;

// ...
{
  showTaskEdit && <TaskEdit task={{}} onSaveTask={onSaveTask} />;
}
//  ...

We conditionally show TaskEdit only if showTaskEdit is true.

Time to see the complete application in action -

Next Steps

• Enable user to edit tasks to change description and dates
• Add a backend for your task manager

Code for this project is available in the Github repo.

But, why?

1. React continues to be a leader with ~50% market share. It enjoys a lot of developer confidence, community contribution and widespread adoption
2. More users have meant more support for the smallest of issues
3. React and associated frameworks have been at the forefront of new developments - that may be in the way pages interact with data (Hooks, Suspense), in how front-end gets/updates data (React Server Components), or how the latest technologies can speed up development and enable you to use hybrid frameworks to get things done (Next)

Vue will not be completely replaced in my toolbox - not unless I find a shiny new thing that can completely replace it. In today’s world everyone learns from each other and adapts rather quickly - so that scenario is not likely to play out.

Why Next?

• Next is a hybrid framework. From the same code base you can -
  • fetch content and generate pages on the server-side at runtime. Rapidly changing sites incl. eCommerce sites.
  • enable client-side data fetching for classic single page applications
  • generate static sites. Just fetch data and create final HTML pages at build time. Useful for Blogs, documentation sites. Oor, go rogue with incremental static files that can generate pages and hold on to them for specified time (I love this!)
• Built-in router that needs you to just create pages to enable routing. Not really a problem in the Vue world (Vue router becomes second nature), but I see React as more fragmented. Router in Next is easy to understand and scale
• Many features that optimize applications incl. code splitting, ability to use HTML or JSON to deliver pages, and so on
• Many, many features that make development of large apps easier
• Super active development and large community.

How to get started?

Here’s the complicated ceremonty to initiate a Next project.

1. Install NodeJS
2. Enter command npx create-next-app do-awesome

Run your app with npm run dev to meet this screen.

You have the standard SPA development experience - change page content to see the changes reflected immediately.

1. Add new page pages/todo.js
2. Enter below code -

   export default function Todo() {
     return <h3>Todo Awesome</h3>;
   }
   

Navigate to http://localhost:3000/todo to see the new page.

Let’s write some simple code in todos.

function Todo({ todos }) {
  return (
    <div>
      <h2>Todo Awesome</h2>
      {todos.map((todo, index) => (
        <li key={index}>
          {todo.description}&emsp;⇋ {todo.status}
        </li>
      ))}
    </div>
  );
}

export function getServerSideProps() {
  const todos = [
    { description: "Write blog post", status: "Open" },
    { description: "Learn magic trick", status: "Open" },
    { description: "Profit from blog", status: "Cancelled" },
  ];

  return {
    props: { todos },
  };
}

export default Todo;

We did good in a few lines of code -

1. Created some static data in todos as part of getServerSideProps and returned that as props
2. getServerSideProps gets executed for every function call, i.e., everytime we visit the route /todos. Rendering function Todo gets the data passed in as props
3. Todo takes care of rendering the todos

Rather simple and elegant.

Add Styles

There is more than one way to do things in Next, just like in React - unfortunately. I follow three distinct patterns.

Global or Module Level Styles

Include CSS in styles > global.css for all styles applicable globally. Similarly, <your-page>.module.css gets applied to <your-page>.

There’s nothing preventing you from going old school and simple do -

import "../styles.css";

.. in any component, but the previous pattern is simpler to use.

Global or Module Level CSS with CDN

Use the Next <Head></Head> tag anywhere - in _app for global styles or in any modules. Introduce CSS within the HEAD component.

Let us go ahead and do this for our app. Change _app.js to-

import "../styles/globals.css";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <link rel="stylesheet" href="https://unpkg.com/chota" />
      </Head>
      <div className="row">
        <div className="col-1"></div>
        <div className="col-10">
          <Component {...pageProps} />
        </div>
        <div className="col-1"></div>
      </div>
    </div>
  );
}

export default MyApp;

chota is a small CSS framework that provides you some cool things like class-less styling, grids, out-of-the-box icons - good enough for our small project.

Remember that we are dealing with JSX, so we use className instead of class in normal HTML.

Style Libraries from NPM

Install any CSS library through NPM. You can now include the library in _app.js for global styles.

import "bootstrap/dist/css/bootstrap.css";

Add a DB!

Our todo page is static and shows the same data each time. Let us change that.

First, let us add prisma to our project to make database access a breeze.

npm i -D @prisma/cli
npm i @prisma/client

Create a new folder data under project root.

Initialize prisma -

npx prisma init

Prisma CLI creates a few files including -

• .env file (if it doesn’t exist) with a database URL
• prisma/schema.prisma contains the database connection parameters and DB models

Open prisma/schema.prisma and replace its contents with the below code -

datasource db {
  provider = "sqlite"
  url      = "file:../data/data.db"
}

generator client {
  provider = "prisma-client-js"
}

model todo {
  id Int @id @default(autoincrement())
  description String
  status String
}

Run the below command to create migration and sync model to database.

npx prisma migrate dev --preview-feature

preview-feature flag may not be required in later versions of prisma. You can provide any name for the migration.

Finally, run the generate command to generate client that can be used in your application.

npx prisma generate

You can connect to the SQLite database using a client like HeidiSQL and verify whether all your changes are applied to the table.

Or, you could simply do -

npx prisma studio

.. to open the database with a simple UI.

You are all set to work with the SQLite database from Next using Prisma!

Get Todos

Change pages/todos.js -

import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();

function Todo({ todos }) {
  return (
    <div className="row">
      <h2 className="col-12 list-title is-center">My Todos</h2>

      <div className="col-12">
        {todoArr.map((todo, index) => (
          <div className="row" key={index}>
            <div className="col-1 list-desc" name="id">
              {todo.id}
            </div>
            <div className="col-5 list-desc" name="description">
              {todo.description}
            </div>
            <div className="col-4">
              <select
                name="status"
                id=""
                value={todo.status}
                onChange={handleStatusChange}
                onBlur={handleSubmit}>
                <option value="Open">Open</option>
                <option value="In Progress">In Progress</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  const todos = await prisma.todo.findMany({
    orderBy: {
      id: "desc",
    },
  });
  console.log("todos: ", todos);

  return {
    props: { todos },
  };
}

export default Todo;

The above code is straight-forward -

• getServerSideProps includes logic that executes on the server side when a request is made to http://localhost:3000/todos (remember that the file is at pages/todos.js)
• Next passes the data from getServerSideProps to render function function Todo({ todos })
• We display the todos data using JSX

Create/Edit Todos

We need Prisma (i.e., any DB operations) to run on the server. Next makes an easy task of creating backend APIs - no separate server needed (you could have your custom server though).

Create APIs

API: New Todo

Create new file pages/api/todos/index.js with below code -

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();
export default async function handle(req, res) {
  console.log("Processing todo request..");
  const id = req.query.id;
  if (req.method == "GET") {
    res.send("hello");
  } else if (req.method == "POST") {
    const newTodo = await prisma.todo.create({
      data: JSON.parse(req.body),
    });
    res.json(newTodo);
  }
}

Open the Developer Console in Chrome (Ctrl+Shift+i) and enter -

await fetch ('http://localhost:3000/api/todos')`

.. to see “hello” returned. And oh.. we added the actual method to accept data from frontend and create a new record using Prisma. All it took was a couple of lines of code.

API: Update/Delete Todo

While we are here, we will also handle -

1. Record-specific deletes (DELETE method that will use /api/todos/1 to delete record with id=1)
2. Record-specific updates (PATCH method to /api/todos/2 to update record with id=2)

The depicted URLs are standard REST resource URLs - nothing fancy here.

Create new file pages/api/todos/index.js.

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();
export default async function handle(req, res) {
  const id = req.query.id;
  if (req.method == "DELETE") {
    console.log("Processing todo delete..");
    const todo = await prisma.todo.delete({ where: { id: Number(id) } });
    res.json(todo);
  } else if (req.method == "PATCH") {
    console.log("Processing todo update..");
    const newTodo = await prisma.todo.update({
      data: JSON.parse(req.body),
    });
    res.json(newTodo);
  }
}

You might have noticed one key difference between the GET and POST/DELETE/PATCH. While we coded GET within the page itself, we used api folder to house update operations.

• While prisma was used in the todos.js page, getServerSideProps executes on server. So, we did not have any issues placing backend-specific logic there
• Updates are not tied to backend in such fashion. Instead we create APIs in the api folder and call them using fetch

Change UI to Call APIs

Before we go ahead with UI changes, you would have noticed a problem with our file structure. While APIs had index and [id] files grouped under a parent todos, we do not have this structure in the frontend yet. Let’s change that.

Create a new folder pages/todos - this will house all functions for todos. Move pages/todos.js to pages/todos/ and rename it to index.js.

Todo List

Replace current code in pages/todos/index.js with -

import { useState } from "react";
import { PrismaClient } from "@prisma/client";
import Link from "next/link";

const prisma = new PrismaClient();

function Todo({ todos }) {
  const [todoIn, setTodoIn] = useState("");
  const [todoArr, setTodoArr] = useState(todos);

  const handleNewTodoChange = (e) => {
    e.preventDefault();
    setTodoIn(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch("/api/todos", {
      method: "POST",
      body: JSON.stringify({ description: todoIn, status: "Open" }),
    });
    const newTodo = await res.json();
    setTodoArr([newTodo, ...todoArr]);
    setTodoIn("");
  };

  const handleStatusChange = async (e) => {
    e.preventDefault();
    console.log("target", e);

    const res = await fetch("/api/todos", {
      method: "POST",
      body: JSON.stringify({ description: todoIn, status: "Open" }),
    });
    const newTodo = await res.json();
    setTodoArr([newTodo, ...todoArr]);
  };

  const deleteTodo = (todo) => async (e) => {
    e.preventDefault();
    const res = await fetch(`/api/todos/${todo.id}`, {
      method: "DELETE",
    });
    const index = todoArr.indexOf(todo);
    setTodoArr([
      ...todoArr.slice(0, index),
      ...todoArr.slice(index + 1, todoArr.length),
    ]);
  };

  return (
    <div className="row">
      <h2 className="col-12 list-title is-center">My Todos</h2>

      <form className="col-12">
        <div className="row">
          <span className="col-1 list-desc">Add</span>
          <input
            type="text"
            onBlur={handleNewTodoChange}
            className="col-5"
            onChange={handleNewTodoChange}
            value={todoIn}
          />
          <button className="button col-2" onClick={handleSubmit}>
            Save
          </button>
        </div>
      </form>

      <div className="col-12">
        {todoArr.map((todo, index) => (
          <div className="row" key={index}>
            <div className="col-1 list-desc" name="id">
              {todo.id}
            </div>
            <div className="col-5 list-desc" name="description">
              {todo.description}
            </div>
            <div className="col-4">
              <select
                name="status"
                id=""
                value={todo.status}
                onChange={handleStatusChange}
                onBlur={handleSubmit}>
                <option value="Open">Open</option>
                <option value="In Progress">In Progress</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>

            <div className="col-2 icon">
              <button className="button icon-only" onClick={deleteTodo(todo)}>
                <img
                  src="https://icongr.am/feather/delete.svg?size=16&color=93939a"
                  alt="delete"
                />
              </button>
              <Link href={`/todos/${todo.id}`}>
                <button className="button icon-only">
                  <img
                    src="https://icongr.am/feather/edit-2.svg?size=16&color=93939a"
                    alt="edit"
                  />
                </button>
              </Link>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  const todos = await prisma.todo.findMany({
    orderBy: {
      id: "desc",
    },
  });
  console.log("todos: ", todos);

  return {
    props: { todos },
  };
}

export default Todo;

We have added below features -

• Add an input box and a button to add a new todo record. Add functions to handle changes to input and to respond to the click event
• Add functions to handle changes to call backend APIs for inserts and deletes, and make corresponding changes on the UI
• Create a button to delete a todo and call API DELETE method
• Create a button to navigate to a detail page upon clicking on any todo (the detail page is implemented in the next section)

Todo Detail

With a couple of functions you have created an app to query ( & display), create and delete todos!

Create a new page pages/todos/[id].js and input below code -

import { useRouter } from "next/router";
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();

export default function Todo({ todo }) {
  const router = useRouter();
  const { id } = router.query;
  return (
    <div className="text-center">
      <h3>
        <strong>{!!todo && todo.description}</strong>
      </h3>
      <p>{!todo && "This todo has migrated to the next universe."}</p>
        

      <p></p>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const todo = await prisma.todo.findFirst({
    where: { id: Number(params.id) },
  });
  console.log("todo: ", todo);

  return {
    props: { todo },
  };
}

This page just demonstrates how we could display a single todo on the frontend. We have not added any functionality to it.

What Next?

Find the app code at this Github repo.

You could extend the current app by -

1. Introducing update function - status changes should call PATCH method and change UI elements
2. Enable user to capture thoughts, ideas and other BS against each todo. Doing this would require you to provide functionality to add comments against any specific todo (utilising the Detail page)

Learning Resources

See more of Next and keep rocking.

• Learn NextJS by Vercel, creator of NextJS
• NextJS in 2 hours
• Create a Snippet Manager in Next