https://github.com/wmalarski/qwik-todo-mvc
Qwik City TODO MVC - Example App
https://github.com/wmalarski/qwik-todo-mvc
drizzle-orm qwik qwik-city todomvc typescript vite
Last synced: 6 months ago
JSON representation
Qwik City TODO MVC - Example App
- Host: GitHub
- URL: https://github.com/wmalarski/qwik-todo-mvc
- Owner: wmalarski
- License: mit
- Created: 2023-02-05T21:35:26.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-24T19:11:19.000Z (over 2 years ago)
- Last Synced: 2025-03-27T18:13:31.970Z (7 months ago)
- Topics: drizzle-orm, qwik, qwik-city, todomvc, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 692 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Qwik City - TODO MVC ⚡️
## TODO List
- [x] Simple email+password authorization
- [x] Cookie session management
- [x] DrizzleORM+Postgresql integration
- [x] Using `loader$` and `action$`(with `zod$` validation)
- [x] Filtering todo list
- [x] Listing and updating todos
- [x] Optimistic updates
- [x] Check no JS
- [ ] Docker Deployment
- [ ] Optimistic counter updates (waiting for fix to `onSubmit$`)
- [ ] No JS - clear all completed fix
## How to run?
1. `pnpm i`
2. create `.env` file based on `.env.example`
3. `pnpm db:push`
4. `pnpm dev`
## Project Structure
This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
Inside your project, you'll see the following directory structure:
```
├── public/
│ └── ...
└── src/
├── components/
│ └── ...
└── routes/
└── ...
```
- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
- `src/components`: Recommended directory for components.
- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
## Add Integrations and deployment
Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
```shell
pnpm qwik add # or `yarn qwik add`
```
## Development
Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
```shell
npm start # or `yarn start`
```
> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
## Preview
The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
```shell
pnpm preview # or `yarn preview`
```
## Production
The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
```shell
pnpm build # or `yarn build`
```
## Express Server
This app has a minimal [Express server](https://expressjs.com/) implementation. After running a full build, you can preview the build using the command:
```
pnpm serve
```
Then visit [http://localhost:8080/](http://localhost:8080/)