dennisbochen/example-project

A small demo projects to showcase my methodology when building projects. It doesn't aim to be perfect, but rather to give an impression of what my code looks like.

Demo Project

A small demo projects to showcase my methodology when building projects. It doesn't aim to be perfect, but rather to give an impression of what my code looks like.

What's inside?

Some things showcased in this demo include:

• Monorepo with Turbo
• Packages with for configurations and shared UI
• General tooling: Prettier, ESLint
• React i18n for translation and string management
• Example REST & GraphQL API: NextJS with TypeScript
  • Built with Yoga
  • Resolver and Query type generation with graphql-codegen
  • Resolver Composition for protecting resolvers
  • Simple REST Endpoint
• Example Web Application: NextJS with TypeScript
  • TailwindCSS for styling
  • react-query for client side requests
  • graphql-request for client and server requests
• Jest for Unit Testing
  • Sample some simple tests

Apps and Packages

• api: a Next.js app using api routes to demo a REST and GraphQL endpoint
• web: a Next.js app for hosting a super simple frontend
• ui: a stub React component library shared by both web and potential future applications
• eslint-config: eslint configuration used throughout the monorepo
• ts-config: typescript configurations used throughout the monorepo
• jest-config: jest configuration used throughout the monorepo
• next-config: next configuration used throughout the monorepo
• tailwind-config: tailwind and postcss configurations used throughout the monorepo

Build

To build all apps and packages, run the following command:

# run this in root dir
npm install
npm build

Develop

To develop all apps and packages, run the following command:

# run this in root dir
npm install
npm dev

Utilities

This example uses the following tools:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• GraphQL Yoga (including some sub packages)
• graphql-request
• react-query
• TailwindCSS
• jest (ts-jest)

Useful Links

• Demo API GraphQL
• Demo API Rest
• Demo Web
• Initial Readme

Things that could be improved with more time and/or effort

• more and more complex/thorough (i.e. hook/components tests with react-testing-library) unit tests; more integration tests with cypress
• api URLs in preview builds pointing to frontend preview builds
• more fine tuned component structure and separation
• more complex GraphQL endpoints i.e. Prisma ORM integration
• Authentication layer with NextAuth
• NextJS app directory demo
• more complex UI example, not just a TailwindUI derivative