Software Engineering and Web Development Services
About this site
Intended audience(s): project managers, business managers and agents.
Purpose and Scope
This site is a demonstration of bleeding edge APIs for Next JS 14, React and Redux Toolkit to serve as a stable, predictable foundation for building highly scalable apps with complex state modelling and storage requirements. Top level pages are delivered as React Server Components and data is fetched directly from endpoints and server actions providing a very secure, robust, typesafe, server based data access layer. Next 14 really has blurred the lines between client and server development making it much easier to create typesafe full stack solutions with Next than any other framework.
Feature Summary
Demonstrations have been kept as modular and simple as possible to demonstrate (and understand!) new key React and Next features in isolation. However a few more complex applications and features are included.
Authentication
This website implements both session and jwt logins for demonstration purposes only and is not production ready. For a complete production ready solution visit the Syntapse NextAuth demo site with Oauth provider authentication, automatic local account creation, email verified registrations, and 2FA logins.
Service Introduction
- Next JS full stack software engineering using latest APIs for fast, secure, modular content delivery
- Integration between client state using Redux and Next JS server state with server components and actions.
- Integration with Nest JS websocket gateways for realtime data streaming.
- Extensible user management with secure, scalable authentication and authorisation, email logins and 2FA.
- Open source telemetry for realtime monitoring, fault diagnosis and performance monitoring and altering.
- Extensible poly and monorepos to maximise code reuse and enable consistent typing between clients and servers.
- Streamlined Docker based development environments for extensible poly and monorepos and parallel package development.
Monorepo github README.md
pnpm monorepo
This a a pnpm monorepo. (performant) npm offers a streamlined and efficient approach to managing multiple projects under a single repository, significantly enhancing development workflows.
Benefits of pnpm
- Adopting a pnpm monorepo can lead to more cohesive codebases, improved developer productivity, and a more scalable architecture for growing projects.
- pnpm has a highly efficient, unique node_modules structure that avoids duplication of packages, thus saving disk space and accelerating installation processes. This efficiency is particularly advantageous in a monorepo setting, where numerous projects might share dependencies.
- pnpm's strict linking strategy ensures that dependencies are precisely matched, reducing the chances of encountering "works on my machine" issues.
- pnpm workspaces facilitate seamless dependency linking among projects within the monorepo, making it easier to develop interdependent packages without publishing them to a registry for testing.
General project structure
- All source code is located in /src
- /common contains resources shared by client and server code, enabling for example shared types between client and server code
- /packages contains any packages intended to be re-used by multiple clients, servers or any other project included in the monorepo. e.g. currently /packages/client contains /components and /hooks that can be reused across Next JS projects with no additional configuration and will resolve at compile and run time.
- Shared resources are resolved by both tsconfig (compile time) and next.config.mjs (run time).
package.json structure
The package.json structure is designed to ease maintenance and upgrades. Providing parent package.json minimise the amount of duplication across projects. pnpm provides a highly efficient storage mechanism for node_modules but will not eliminate cross project version dependencies when upgrades are required. Minimising package duplications provides an easier upgrade path.
Summary of existing package.json configuration:
- the root /package.json contains packages available to all projects - client, server or anything else.
Client/Next projects
The following root folders have package.json file to share packages across next projects
- /src/apps/next/package.json - share packages across Next projects.
Server Projects
The following combination of root folders package.json files make it easy to avoid duplication across existing projects and the pattern makes it easy to add new platforms and frameworks.
- /src/apps/server/package.json - share packages across all server projects
- /src/apps/server/express/package.json - share packages across express projects
- /src/apps/server/nest/package.json - share packages across nest projects
docker notes
This monorepo consists of a number of individual projects sharing common resources but designed to run as ndependent docker containers each resolvable to a public URL.
- the root docker-compose file is configured for installing and uninstalling packages, and all packages should be conducted from within the container (not the host). It is not designed to run individual projects and is not resolvable to external URL.
- the docker-compose files to run each container are located in the root of each project folder with the correct docker mounts to enable access to shared resources, packages and libraries for building an running as a dev server.
- All docker containers run using the same image for node js consistency and ease of future upgrades.
Server application state loaded into client
Prod build: This message is set on the server redux application state and is included in all routes. This will only show in production builds
Practical Applications
- Secure API Management with Next JS server components and actions
- Redux ecommerce store with products, orders, transactions and email notifications
- Persisetnt Redux library manager with authors and articles.
- Websocket room based chat manager served by a dedicated Nest JS Chat Gateway
- Websocket modular chat component ready for use as a block in any layout
- Websocket drawing component with replay/pause controls using integrated NestJS RXJS Observable streams
Redux Toolkit demo
Redux Toolkit Counter Demo
A simple reference example for Redux Toolkit using thunks for asynchronous actions. Todo examples on this site also include Sagas and Listeners for more complex processes. All code is available for review on github.
Developer Notes
Application notes
- This site is a project within a well structured monorepo with facilities for global styling, components, services and other common code which can be very easily shared across projects.
- Redux is modified to work with Next and supports consistent state between HMR updates. Without recommended mods Redux state will reset on every HMR code change. Redux is also configured to initialise common app state on the server which is available across all slices and routes (production build only).
- It has basic responsiveness so all pages and components will adjust to desktop, tablet and mobile views. As this site is for tech demonstration not all edge cases and browsers have been tested.
- It includes demos for Todo Lists using thunks, sagas and the new RTK createListenerMiddleWare API.
- It includes demos for secure encrypted authentication using cookies and jwts, using both actions and fetch endpoints.
- It includes some of the newest Next API features including parallel and intercepted routes and tests for cacheing pages and endpoints
- Layout components (tabs, accordions, modals) have been designed and coded using no dependencies or UI frameworks to fully explore the new React APIs e.g. the tabbed container has an option to incorporate useTransitiions.
Docker notes
- Docker can significantly streamline development of multiple apps and packages with the correct configuration.
- This monorepo has a docker container for installations and separate docker containers with public URLs for consistuent projects.
- Docker containers have public https URLs accessible on the public internet via a secure container-aware proxy making it very easy to add new secure apps and services.
- This site is running both production and development builds concurrently from a single codebase mapping the .next dist folder to host files .next.dev and .next.prod respectively.
- By using careful docker configuration packages and sites can be developed together and updated in realtime.
- Packages can be exported as required, but can also run in companion containers to keep a streamlined development process