Demonstration
Here, you will find some examples of our skill set relating to full-stack web development including using the very latest technologies:
TypeScript
,
Next.js
,
NextAuth
,
React
,
Zustand
 ,
tRPC
,
tailwindcss
,
SVGs
, and more.
We have chosen to limit our use or unnecessary third party libraries. To emphasise this, take a look at our package.json file for this site:
As you can see, we haven't used a lot of outside help.
We have used
bright
 and
react-element-to-jsx-string
 in the example code blocks throughout this site (including the one here) to save time.
For our
tRPC demos
: @tanstack/react-query, @trpc/client, @trpc/next, @trpc/react-query, @trpc/server, and zod are included.
For our
Zustand demo
: zustand is included.
As you can probably guess, the 'ui', 'ui_tailwind' and 'libraries' are internal libraries developed by Futoro.
The rest are mostly needed for a tailwind site running on Nextjs. Others are for testing, building, etc. We would only install libraries if we are going to use them.
"dependencies": {
  "@next/third-parties": "^14.2.1",
  "@tanstack/react-query": "^4.36.1",
  "@trpc/client": "^10.40.0",
  "@trpc/next": "^10.40.0",
  "@trpc/react-query": "^10.40.0",
  "@trpc/server": "^10.40.0",
  "bright": "^0.8.4",
  "libraries": "*",
  "next": "^14.2.1",
  "next-auth": "^4.24.4",
  "next-redux-wrapper": "^8.1.0",
  "next-themes": "^0.2.1",
  "react": "^18",
  "react-dom": "^18",
  "react-element-to-jsx-string": "^15.0.0",
  "react-redux": "^8.1.1",
  "sharp": "^0.33.2",
  "ui": "*",
  "ui_tailwind": "*",
  "zod": "^3.22.4",
  "zustand": "^4.4.6"
},
"devDependencies": {
  "@reduxjs/toolkit": "1.9.3",
  "@testing-library/jest-dom": "^6.1.4",
  "@testing-library/react": "^14.0.0",
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "autoprefixer": "^10.0.1",
  "cross-env": "^7.0.3",
  "eslint": "^8",
  "eslint-config-next": "14.0.3",
  "jest": "^29.7.0",
  "jest-environment-jsdom": "^29.7.0",
  "postcss": "^8",
  "prettier": "^3.0.3",
  "prettier-plugin-tailwindcss": "^0.5.5",
  "tailwind-merge": "^2.2.0",
  "tailwindcss": "^3.4.1",
  "ts-jest": "^29.1.1",
  "typescript": "^5"
}
One library we have used is
NextAuth
, which we hope you may find interesting. With this library, we have added Authentication which use third party providers (e.g. Google, Github, etc.) for logging in.
If you have already logged into this page, you will already have seen those providers as options during your logging in process and now notice an Avatar (top right of screen) taken from your chosen provider and the
Protected
 nav menu item. If you haven't logged in, why not give it a go by clicking the 'Login' nav menu item.

FUTORO