DEV Community

Causal Zap
Causal Zap

Posted on

Building the "Hole People" Website: Technologies Used

Here's an article you can post on dev.to to share the technologies used for building the Hole People website:

Building the "Hole People" Website: Technologies Used

When it comes to building interactive and engaging websites, choosing the right technologies is crucial. In this post, I'll walk you through the various technologies used to create the Hole People website, a platform where users can access level guides, walkthroughs, and much more for a puzzle game. If you're looking to build a similar website or curious about how modern web technologies come together, keep reading!

1. HTML5: The Foundation

HTML5 is the backbone of any website, and it plays a significant role in structuring the content. For Hole People, HTML5 provides the necessary skeleton, including:

  • Semantic elements like <header>, <main>, <section>, and <footer> to structure the content logically.
  • Forms and inputs for user interactions, such as the level search and range selectors.
  • Linking and navigation to ensure users can easily navigate through different levels, articles, and guides. 
<header>
  <div id="header-container"></div>
</header>
<main>
  <div id="hero-container"></div>
  <div id="levels-tools"></div>
  <div id="levels-grid"></div>
</main>
<footer>
  <div id="footer-container"></div>
</footer>
Enter fullscreen mode Exit fullscreen mode

2. CSS3: Styling the User Interface

CSS3 is used to style the website, create responsive designs, and give it a modern, attractive look. For Hole People, we use CSS for:

  • Responsive layouts: Media queries adjust the layout for different screen sizes, ensuring the site works on both mobile and desktop devices.
  • Grid systems: CSS Grid and Flexbox are used to create flexible and responsive designs for components like the level grid, search bars, and navigation.
  • Custom animations: CSS transitions and animations are used for interactive elements like buttons and hover effects.

Here's an example of a responsive CSS layout:

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .container {
    width: 95%;
  }
}
Enter fullscreen mode Exit fullscreen mode

3. JavaScript (ES6+): Adding Interactivity

JavaScript is at the heart of Hole People, making the site interactive. Here's how JavaScript is used:

  • Component-based structure: We inject HTML components dynamically using JavaScript. For example, we load the header, footer, level guides, and other components using the fetch API.
  • Event listeners: JavaScript is used to capture user actions, like clicking buttons, submitting forms, and navigating between pages.
  • State management: We use JavaScript to manage the state of the website, such as which level the user is viewing or if they are on the homepage.

Here's a quick example of loading content dynamically with JavaScript:

async function inject(id, url) {
  const host = document.getElementById(id);
  if (!host) return console.warn(`[inject] missing host #${id}`);

  const res = await fetch(url);
  const html = await res.text();
  host.innerHTML = html;
}
Enter fullscreen mode Exit fullscreen mode

4. React: For Efficient UI Updates

React is a powerful JavaScript library for building user interfaces, and it helps keep Hole People highly interactive and responsive. React allows us to:

  • Componentize UI: Breaking down the website into smaller, reusable components like buttons, cards, and modals.
  • Efficient updates: React ensures that the UI updates only when necessary, improving performance.
  • State management: With React hooks (e.g., useState, useEffect), we can manage the state of components, such as handling user inputs or page navigation. 
const [level, setLevel] = useState(null);

const loadLevel = async (n) => {
  const res = await fetch(`/levels/${n}.html`);
  const data = await res.text();
  setLevel(data);
};
Enter fullscreen mode Exit fullscreen mode

5. Node.js + Express: Backend Infrastructure

For the backend, we used Node.js with Express to serve the website’s content. The backend handles:

  • Serving static assets: The backend serves HTML, CSS, JavaScript files, and images to the client.
  • API endpoints: Node.js provides routes for dynamically loading content based on user requests (e.g., loading levels, guides, and metadata).
  • Server-side rendering (SSR): We use SSR for rendering certain components on the server, improving SEO and load times. 
const express = require('express');
const app = express();

app.get('/levels/:id', (req, res) => {
  const level = loadLevelFromDatabase(req.params.id);
  res.send(level);
});
Enter fullscreen mode Exit fullscreen mode

6. Webpack: Bundling and Optimization

To optimize the website, we use Webpack for bundling JavaScript, CSS, and other assets. Webpack:

  • Bundles files: Combines JavaScript and CSS files into a smaller set of files, reducing the number of HTTP requests.
  • Minifies code: Minifies JavaScript and CSS for faster loading.
  • Transforms code: We use Babel to compile modern JavaScript (ES6+) into a version that works across all browsers.

Here’s a basic example of a Webpack configuration:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};
Enter fullscreen mode Exit fullscreen mode

7. Cloudflare: Content Delivery and Security

We host Hole People on Cloudflare to ensure fast performance and security:

  • Content delivery network (CDN): Cloudflare caches static assets across various global locations, reducing latency and improving loading speed.
  • DDoS protection: Cloudflare provides protection against distributed denial-of-service (DDoS) attacks.
  • SSL/TLS encryption: All traffic is encrypted using SSL/TLS, ensuring secure communication between the client and the server.

8. GitHub Actions: Continuous Deployment

We use GitHub Actions for continuous integration and deployment (CI/CD). Each time changes are pushed to the repository:

  • Automatic build: GitHub Actions runs Webpack to bundle and optimize the assets.
  • Automated tests: Unit and integration tests are run to ensure the website functions as expected.
  • Deployment: Once the build passes, the website is automatically deployed to production. 
name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - run: npm run deploy
Enter fullscreen mode Exit fullscreen mode

Conclusion

Building the Hole People website involved a combination of modern technologies like HTML5, CSS3, JavaScript, React, Node.js, and cloud-based services. These technologies together provide a seamless, interactive experience for users, with fast load times, smooth animations, and dynamic content loading.

If you are building a similar project or just curious about the tech stack behind a modern web application, these technologies will give you a solid foundation for building fast, secure, and interactive websites.

If you like Stickman's puzzle games, try Hole People Level.

Top comments (0)