Web app: Calorie Counter Demo

Demo project showcasing the best practices for a TypeScript-based web app.

Features

• CRUD resources (e.g. user can create food entries)
• Authentication (email + password; social login) using auth cookies
• Authorization using user roles (user, admin)
• Tiered GraphQL queries (different user roles have access to different queries)
• User settings
• Admin reports and views

Frontend

• Apollo GraphQL
• TypeScript
• Vue3
• Vuetify

Backend

• GraphQL server
• TypeScript
• Prisma with PostgreSQL
• Authentication layer with Express + Passport.js
• Redis as a cache store
• Dockerized
• Reverse proxy using Nginx

Developer Experience

• Vite for fast development
• Latest tech stack (Vite + Vue3 + Vuetify3)
• ESLint + Prettier formatting on save
• GraphQL TypeScript types and frontend methods are autogenerated using graphql-codegen
• apollographql.vscode-apollo plugin provides hints for GraphQL queries
• Modularized project structure
• App config validation. Config is set by environment variable, but individual config values are set in-app, so config can be hot-reloaded during development
• Different docker-compose file for local environment, so the server can be run outside of docker for debugging.

Technologies

TypeScript, Node.js, Express.js, GraphQL, Apollo, Passport.js, User Authentication, User Authorization, Vite, Vue3, Vuetify3, PostgreSQL, Prisma, Redis, Docker