Developing the Name.am Domain Parking Page

The Name.am project was a challenging yet rewarding experience, allowing me to wear multiple hats as a UI/UX designer and web developer. Name.am is a platform designed for selling and managing domains, with a focus on providing a seamless and user-friendly experience for its users.

The Name.am platform required a robust and scalable solution that could handle high traffic and provide real-time updates. My responsibilities included designing an intuitive user interface, developing the frontend with modern tools, and ensuring the backend infrastructure was secure and efficient.

During the development of the Name.am platform, I utilized a range of modern technologies and tools to ensure the project met the highest standards of performance and user experience.

Webpack and Bootstrap

Webpack was used for module bundling and asset management, ensuring efficient loading and performance. Bootstrap provided a responsive grid system and pre-styled components, speeding up the development process.

Example: Advanced Webpack Configuration

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/js/main.js",
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        type: "asset/resource",
        generator: {
          filename: "assets/[name][ext]",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      minify: false, // Disable minification
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: "src/assets", to: "assets" },
        { from: "src/components", to: "components" },
      ],
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    watchFiles: ["src/**/*"],
    port: 9000,
    open: true,
    hot: true,
  },
  mode: "development", // Ensure this is set to development
};

SCSS was used for styling to take advantage of its variables, nesting, and mixins, which streamline the CSS development process.

Example: Advanced SCSS Structure

$primary-color: #3498db;
$secondary-color: #2ecc71;

@mixin transition($property, $duration) {
  transition: $property $duration ease-in-out;
}

body {
  font-family: Arial, sans-serif;
  color: $primary-color;
  background-color: lighten($primary-color, 40%);
}

.button {
  background-color: darken($primary-color, 10%);
  border: none;
  color: white;
  padding: 10px 20px;
  @include transition(all, 0.3s);
  &:hover {
    background-color: lighten($primary-color, 10%);
  }
}

The development process for Name.am involved several stages, from initial planning and design to implementation and testing. Ensuring the platform's security and performance was paramount due to the nature of domain sales and management.

Agile Methodology

We adopted an Agile methodology with regular sprints and iterations. This approach allowed us to continuously improve the platform based on user feedback and changing requirements.

User Experience (UX) Design

A significant focus was placed on UX design to ensure that the platform was intuitive and easy to use. This involved creating wireframes, prototypes, and conducting user testing to gather insights and make necessary adjustments.

Example: Advanced Wireframing

import React from 'react';

const Wireframe = () => (
  <div className="border border-secondary p-3 rounded">
    <h2>Wireframe Example</h2>
    <div className="border-bottom mb-3">
      <h3>Header</h3>
    </div>
    <div className="d-flex justify-content-between">
      <div className="flex-fill mr-3">
        <h4>Main Content</h4>
        <p>Placeholder for main content area.</p>
      </div>
      <div className="flex-fill">
        <h4>Sidebar</h4>
        <p>Placeholder for sidebar content.</p>
      </div>
    </div>
    <div className="border-top mt-3">
      <h3>Footer</h3>
    </div>
  </div>
);

export default Wireframe;

Several key features were implemented to enhance the functionality and user experience of the Name.am platform.

Automated Domain Management

We developed an automated system that allows users to manage their domains directly through the platform. This feature required integrating real-time data processing and notification systems.

Real-Time Notifications

Real-time notifications were implemented to keep users informed about domain status updates and offers. This was achieved using WebSocket and push notification technologies.

Example: WebSocket Implementation

const socket = new WebSocket('wss://name.am/notifications');

socket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log('New notification:', message);
};

Responsive Design

Ensuring that the platform was fully responsive was crucial. We utilized CSS frameworks and media queries to make sure the platform worked seamlessly across various devices and screen sizes.

Example: Advanced Responsive Design

.domain-management {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .domain-management {
    padding: 10px;
    flex-direction: column;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .domain-management {
    padding: 15px;
    flex-direction: row;
    justify-content: space-between;
  }
}

CSS Organization Methodologies

To maintain a scalable and maintainable codebase, we adopted CSS organization methodologies such as BEM, OOCSS, and SMACSS.

Example: BEM Methodology

// BEM naming convention
.button {
  &__icon {
    margin-right: 10px;
  }
  &--primary {
    background-color: $primary-color;
    color: white;
  }
}

Working on the Name.am project was a highly rewarding experience. It allowed me to apply and expand my knowledge in modern web development technologies and best practices. The collaborative environment and the focus on user-centered design provided valuable insights into building scalable and user-friendly platforms.

In conclusion, my time at Name.am was marked by significant professional growth and the satisfaction of contributing to a platform that makes a real difference in the domain management industry. The skills and experiences gained will undoubtedly be beneficial in my future projects.