The Peruvian government has authorized adventurers seeking treasures to explore the 85,182 km2 of the Madre de Dios department. Treasure Map Game is used to track the movements and collections of treasures made by adventurers.
Here is the map to be displayed by the Frontend:
- Mountain are colored with yellow.
- Treasure are colored with green.
- Adventurers are colored with blue.
- Clicking to "download" button, will download the output as a txt file.
The application consists of:
- a frontend to display and download the movements and collections of treasures made by adventurers.
- a GraphQL BFF to manage required output for all supported devices (mobile, web, etc.).
- a CMS module that exposes required static data.
- a commons module that holds all transversal commons utils and core.
🔴 Note that for a primary need (static data display), no BFB module is added and no database is configured.
🔴 An LRUCache is configured to replace a database.
The chosen architecture is a microservice architecture.
The efficient and lightweight nature of Node.js makes it the ideal platform for developing microservices.
What we gain from such an architecture is:
- low coupling between modules.
- flexibility of evolution (evolutionary architecture).
- resilience.
- independence in updates, maintenance and deployments.
- handle unexpected challenges and changes.
Our current architecture is modeled as follows:
This architecture accepts and tolerates updates, for example:
The main idea is to protect the frontend domain as much as possible and avoid structural change and regressions if a new service has been added to the pipeline:
The graphql opens several ports to attach other data sources: microservices, databases, CMS, etc. The coupling between graphql and data sources is weak, which allows for easy swappable data sources.
- pnpm as packages manager.
- pnpm as a mono-repo/workspaces manager.
- NX to boost node tasks: lint, test, build, ...
- husky git hooks to add special tasks before commit and push.
- ES6+.
- Functional Programming.
- Next.js for SSR rendering.
- React 18 as Frontend UI.
- Tanstack Query as asynchronous state management (graphql calls and cache).
- Jest as test runner.
- React Testing Library as testing framework.
- ESLint as static analyzer.
- Airbnb ESLint Configuration.
- Other recommanded ESLint plugins and configurations: react, react-hooks, jsx-a11y, code complexity.
- Babel as cross-browser transpiler.
- Webpack 5 as frontend bundler.
- ES6+.
- Functional Programming.
- NodeJS 20.
- Apollo GraphQL Server.
- Express.
- pm2 for production.
- nodemon for local development.
- Jest as test runner.
- ESLint as static analyzer.
- Google ESLint Config.
From the root folder:
pnpm installThis will install all needed dependencies for main and sub modules.
From the root folder:
pnpm start:devThis will use NX to call all start:dev scripts.
In local mode, BFF and CMS module will use nodemon.
API documentation is accessible through this link:
http://localhost:5001/treasure-map/graphqlOther available routes:
http://localhost:5001/treasure-map/graphql
http://localhost:5000/treasure-map/cms/monitoring
http://localhost:5000/treasure-map/cms/health-checks
http://localhost:5000/treasure-map/cms/data-store/treasure-mapFrom the root folder:
pnpm startThis will use NX to call all start scripts.
In production mode, BFF and CMS module will use pm2.
From the root folder:
pnpm lint
pnpm lint:fixThis will use NX to call all lint or lint:fix scripts.
From the root folder:
pnpm test
pnpm test:updateThis will use NX to call all test or test:update scripts.
All 'health check' routes are exposed through:
baseUrl/health-checksIt's possible to monitor each microservice through an exposed route or pm2:
baseUrl/monitoring
// or
pnpm monitor
pnpm info
pnpm logs