Rework the Neon Todo App Demo

[clarkbw]

The Drizzle Next Neon tutorial is confusing and broken. The structure is confusing in the way it starts with the backend and then a separate front end later. As well the backend steps don't work, they produce an error immediately.

Confusing

The Backend + Frontend steps make this tutorial more confusing. Starting with the backend starts someone in an empty directory running npm install. And the Functions layout is confusing if it's a single file or multiple files because they each have their own imports. Finally going to the frontend with npx create-next-app@latest creates the front end in a subdirectory of the backend if a person was simply following along.

Broken

With the Backend I followed the backend steps:

1. npm i drizzle-orm @neondatabase/serverless
2. npm i -D drizzle-kit
3. mkdir -p db && touch db/drizzle.ts copy / paste a. We prefer DATABASE_URL over NEON_DATABASE_URL
4. touch drizzle.config.ts copy / paste
5. touch db/schema.ts copy / paste
6. npx drizzle-kit push

Which resulted in an Error ⚠️

Adding `npm i dotenv` will fix this error but we also don't cover the `.env` file at all. Perhaps this part should lean on the other tutorial https://orm.drizzle.team/learn/tutorials/drizzle-with-neon ``` drizzle-kit: v0.23.0 drizzle-orm: v0.32.0 No config path provided, using default path Reading config file '/Users/clarkbw/src/neon/tmp/drizzle.config.ts' node:internal/modules/cjs/loader:1145 const err = new Error(message); ^ Error: Cannot find module 'dotenv/config' Require stack: - /Users/clarkbw/src/neon/tmp/drizzle.config.ts - /Users/clarkbw/src/neon/tmp/node_modules/drizzle-kit/bin.cjs at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15) at Module._load (node:internal/modules/cjs/loader:986:27) at Module.require (node:internal/modules/cjs/loader:1233:19) at require (node:internal/modules/helpers:179:18) at Object. (/Users/clarkbw/src/neon/tmp/drizzle.config.ts:1:8) at Module._compile (node:internal/modules/cjs/loader:1358:14) at Module._compile (/Users/clarkbw/src/neon/tmp/node_modules/drizzle-kit/bin.cjs:17619:30) at Module._extensions..js (node:internal/modules/cjs/loader:1416:10) at Object.newLoader [as .ts] (/Users/clarkbw/src/neon/tmp/node_modules/drizzle-kit/bin.cjs:17623:13) at Module.load (node:internal/modules/cjs/loader:1208:32) { code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/clarkbw/src/neon/tmp/drizzle.config.ts', '/Users/clarkbw/src/neon/tmp/node_modules/drizzle-kit/bin.cjs' ] } Node.js v20.15.0 ```

Proposal

Change this tutorial to be a full stack tutorial only. Start the workflow with npx create-next-app@latest and then add the backend, functions, front end pieces. The Drizzle Neon tutorial has a good format for the backend which could be borrowed.

[clarkbw]

Should keep in mind the fix suggested here as well https://github.com/drizzle-team/drizzle-orm-docs/issues/278

[realmikesolo]

Hello @clarkbw. Thank you for your help. I have created PR with suggested fixes. Let me know if something should be changed.