ahyaemonI’ve created a site called Web Dungeon.
https://web-dungeon.ahyaemon.com/en/
It’s a skill-testing site where you descend stairs and find answers on each floor.
Some floors are designed with the assumption that you'll use developer tools.
I hope it helps novice engineers or those aspiring to become engineers get familiar with some basic developer tools.
Veteran engineers, feel free to play around for fun.
Tech Stack
This is a simple SPA (Single Page Application) with only a frontend.
There is no backend.
Languages
Package Management
-
pnpm
- Feels faster overall for adding libraries and building.
- Alternatives like npm and yarn are available, but I chose pnpm for the best experience.
Bundler
Framework
-
React
- I considered Solid as well, but went with React for now.
Router
-
TanStack Router
- I initially used React Router, but switched to TanStack Router after seeing a 5kB reduction in size post-gzip.
Linter + Formatter
-
Biome
- Fast
- No need for the hassle of configuring eslint and prettier separately.
- Easy to fix code with check --write.
CSS
-
Tailwind
- Convenient
Deployment
- CloudFlare Pages
- There are edge servers all over the world.
- Deploying is straightforward by specifying the GitHub repository and setting the build command.
- I used CloudFlare for the domain, which made deploying to a subdomain easy.
Development
Here are the steps to set up a similar environment.
Creating a Vite Project
- Create a project
pnpm create vite
? Select a framework:
❯ React
? Select a variant:
❯ TypeScript
- Install packages
pnpm install
- Start development server
pnpm run dev
Introducing Biome
- Install
pnpm add --save-dev --save-exact @biomejs/biome
- Create configuration file
pnpm biome init
This command generates a configuration file (biome.json).
I prefer to minimize unnecessary semicolons, so I modified the configuration as follows:
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"useKeyWithClickEvents": "off"
}
}
- }
+ },
+ "javascript": {
+ "formatter": {
+ "semicolons": "asNeeded"
+ }
+ }
}
Introducing Tailwind
- Install
pnpm install -D tailwindcss postcss autoprefixer
- Create configuration file
pnpx tailwindcss init -p
This generates tailwind.config.js and postcss.config.js. Add the following to tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
theme: {
extend: {},
},
plugins: [],
}
- Modify index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Introducing TanStack Router
pnpm add @tanstack/react-router
With these settings, your development environment is set up.
About the Answer Logic
If answers are written in JS, they can be easily discovered by looking at the JS files.
Since there is no backend in this case, hiding answers on the backend is not an option.
Encryption or hashing answers and embedding them in the JS code is possible, but I decided to dynamically generate answers on the frontend.
The answers are generated at the time React components are created, making it impossible to share the answers with others.
By the way, the method for creating answers involves combining two words separated by _ and including random uppercase and lowercase letters to prevent brute-force attacks.
For example, BlAcK_SpideR.
Conclusion
Feel free to take the challenge!
https://web-dungeon.ahyaemon.com/en/
Additional Notes
Here’s an exceptionally clean commit history you might expect in personal development:
5c069e0 update
6deec1f update
89f267a update
fd8ff6f update
6c2b180 update
97c2caf update
ed751a6 update
1798d2f update
7002819 update
fdbb774 update
3435c3a update
2d7c9ce update
5c119e8 update
cb5eb44 update
adfeb5e update
8e48a88 update
eb41a5e update
15fa18f update
37f0623 update
9f8bc3f update
