Yes, another ToDo app

The creatively named react-todo project is a recreation of the todoist web app.

This project exists solely to allow me to refresh my skillset with a modern React stack, having worked primarily with Vue/Nuxt for a couple of years.

Key Decisions

The current phase of this project has been built without a meta-framework e.g Next.js as I believe it would be overkill for a project of this size. Plus, I believe in prinicples-first learning - that learning how to build without a tool before learning how to build with it develops a far greater appreciation and understanding for that too - and the main purpose of this project is to learn!

To make this experience as realistic as possible, I have opted to use all of the tools that I would expect to find in a production codebase. This includes:

• Code linting & formatting
• Unit tests
• End-to-end test

Roadmap

I intend to expand this project to recreate the core functionality of the todoist app.

• Inbox page ✅
• Today page
• Global Search
• Build custom server to handle requests (currently uses DummyJson API)

The stack

This app is built using TypeScript along with these wonderful packages:

• 🏗️ Framework: React 18
• 📡 Routing & Request Handling: TanStack (Router & Query)
• 🎨 Styles: Tailwind
• 🖼️ UI Library: Shadcn
• 🧪 Unit Testing: Vitest (with HappyDom)
• 🧪 End-to-end Testing: Playwright
• 🔨 Build Tool: Vite
• 🔍 Linting: ESLint
• 👨‍🎨 Formatting: Prettier

Getting started

If for some reason, you want to run this app locally, follow the steps below.

1. Clone or fork this repo: git clone https://github.com/rstainsby/react-todo
2. cd into the project directory and run pnpm install
3. Once all dependencies are installed run npm run dev
4. Open http://localhost:5173 in your browser

Terminal commands

Serve the site locally

npm run dev

Build a production version of the site

npm run build

Run unit tests

npm run test

Run linter

npm run lint

To auto-fix errors

npm run lint:fix

Run code formatter

npm run format

Generate a test coverage report

npm run coverage