DEV Community: Damian Emerah

How I Built A Real Estate Application With NodeJs

Damian Emerah — Fri, 23 Jun 2023 15:30:28 +0000

Real Estate LogoI embarked on an exciting solo project to develop a real estate application from scratch. As a budding full-stack engineer, this endeavor allowed me to test my skills and explore the world of web development. Throughout the process, I utilized technologies such as Pug, Node.js, Express, and MongoDB to create a robust backend, frontend, and database system.

Team: For this project, I took on the challenge individually, assuming the roles of both the frontend and backend developer. My name is Damian Emerah Chisom, and I immersed myself in this project to push my limits as a full-stack engineer. I decided to build this app alone to challenge myself. I encountered many challenges like building out the design for this web application since I am not a good designer. I am glad to have overcome these challenges together with other coding challenges like initially wanting to use React.js for the frontend. ChatGPT was also very helpful to me in finding things that would have taken a longer time to search through the documentation.

The real estate application I developed was created for individuals interested in buying, selling, or renting properties. It caters to both property seekers and real estate agents, providing them with a platform to connect and facilitate property transactions. The target audience includes potential homebuyers, property investors, landlords, and anyone involved in the real estate market.

As for my personal focus, it was twofold. Firstly, I aimed to demonstrate my abilities as a full-stack engineer by independently building a functional and user-friendly application. I wanted to showcase my proficiency in utilizing the chosen technologies, implementing key features, and delivering a polished product.
Secondly, I aimed to enhance my skills in various aspects of web development, including frontend design, backend logic, database integration, and API development. By working on this project alone, I challenged myself to tackle all these areas and expand my knowledge and expertise. It was an opportunity to learn and improve my abilities in building end-to-end web applications.

Overall, the project's purpose was to provide a valuable solution for individuals in the real estate market while allowing me to demonstrate my technical skills and grow as a full-stack engineer.
Technologies: To build my real estate application, I chose Pug as the web framework for its popularity and ease of use. Additionally, I leveraged my JavaScript experience by opting for Node.js as the backend technology. For the database, I turned to MongoDB, a widely used NoSQL database that perfectly complemented the chosen stack.

Technical Takeaways: Throughout the development of this real estate application, I gained several technical takeaways. Here are a few notable ones:

Proficiency in Pug: By choosing Pug as the templating engine for the frontend, I became well-versed in its syntax and functionality. I learned how to structure reusable components, pass data to templates, and enhance the overall HTML rendering process. Pug's simplicity and flexibility made it a valuable tool for building dynamic web pages.
Backend Development with Node.js and Express: Working with Node.js and Express on the backend allowed me to leverage the power of JavaScript for server-side development. I learned how to handle HTTP requests, implement routing, and manage middleware functions. This project improved my understanding of building RESTful APIs and handling database operations.
MongoDB Integration: Integrating MongoDB as the database for this project provided hands-on experience with a NoSQL database. I learned how to define schemas, perform CRUD operations, and leverage the flexibility of document-based storage. Understanding MongoDB's querying capabilities and indexing options proved crucial in optimizing data retrieval and storage.

What I Might Do Differently: Reflecting on this project, there are a few things I might do differently in future endeavors:

Improved UI/UX Design: While I made efforts to enhance the user interface, I realized the importance of dedicating more time and resources to UI/UX design. In future projects, I would allocate more attention to creating visually appealing and intuitive interfaces to deliver a better user experience.
Project Planning and Time Management: Given the challenges I faced during this project, such as initial stack selection and UI design struggles, I recognized the significance of thorough project planning and effective time management. In the future, I would allocate more time to project scoping, task prioritization, and setting realistic deadlines.
Enhanced Testing and Error Handling: Although I incorporated error handling mechanisms, I believe there is room for improvement in terms of comprehensive testing and error prevention. To ensure a more stable and reliable application, I would implement more rigorous testing practices, including unit testing, integration testing, and error logging.

What I Learned About Myself as an Engineer: This project provided valuable insights into my strengths and areas for improvement as an engineer. Here are a few things I learned about myself:

Adaptability and Problem-Solving: Throughout the development process, I discovered that I possess strong adaptability skills. I was able to quickly learn and integrate new technologies and overcome challenges. I also realized my ability to break down complex problems into manageable tasks and find effective solutions.
Perseverance and Determination: Building a full stack project independently proved to be challenging, but it taught me the importance of perseverance and determination. Despite facing difficulties and feeling overwhelmed at times, I remained committed to completing the project and continuously sought solutions to overcome obstacles.
Continuous Learning Mindset: This project reinforced my passion for learning and improving my technical skills. It sparked a curiosity to explore new technologies and frameworks, and I realized the importance of staying updated with industry trends. I embraced a continuous learning mindset, recognizing that the field of software engineering is constantly evolving.

How This Project Informs My Engineering Path in the Future: This project has greatly influenced my engineering path moving forward. It has reinforced my passion for full stack development and the satisfaction of building end-to-end applications. The challenges I encountered have motivated me to further enhance my skills and knowledge in areas such as UI/UX design, testing methodologies, and project management.

Additionally, this project highlighted the importance of collaboration and seeking support when needed. While I worked on this project independently, I recognized the value of engaging with the development community, seeking guidance from experienced peers, and leveraging tools like ChatGPT to save time and streamline my learning process.

Links:
Github
Landing Page

Flow of the request created when you type https://www.google.com in your browser and press Enter.

Damian Emerah — Sat, 17 Jun 2023 01:35:35 +0000

When you access any page through the browser, processes are undertaken to arrive at the final content you see on your screen.

Here's an outline illustrating the flow of the request created when you type "https://www.google.com" in your browser and press Enter:

1. Browser sends a request to the DNS (Domain Name System) resolver to resolve the domain name "www.google.com" into an IP address.
2. DNS resolver responds with the IP address of the Google server.
3. Browser initiates an encrypted connection (HTTPS) with the server IP address on port 443.
4. The encrypted request passes through firewalls, which monitor and filter network traffic.
5. The request reaches a load balancer (e,g lb-01), which acts as an intermediary between the browser and the web servers.
6. The load balancer forwards the request to an appropriate web server (e.g web-01) within the Google infrastructure.
7. The selected web server receives the request and processes it.
8. The web server generates an HTML response, which could be a pre-existing web page or dynamically generated content.
9. If required, the web server communicates with an application server or backend services to fetch additional data or perform specific tasks.
10. The application server interacts with the database to retrieve the necessary information.
11. The application server sends the retrieved data back to the web server.
12. The web server combines the data with the HTML template to generate a complete web page.
13. The web server responds to the browser with the requested web page.
14. The browser receives the response and renders the web page for the user to view.

In this flow, the request starts from the browser, goes through DNS resolution, traffic encryption, firewall, load balancer, web server, application server, and database, and finally, the response is sent back through the same path to reach the browser for rendering.

Please note that this is a simplified overview, and the actual infrastructure and processes involved may vary depending on the specific implementation and configuration of the Google infrastructure.

What Happens When You Enter "https://www.google.com" in Your Browser?

Damian Emerah — Mon, 22 May 2023 00:59:10 +0000

Introduction:
When you enter "https://www.google.com" in your browser and press Enter, a series of steps takes place behind the scenes to display the Google homepage. Let's explore this process in detail.

IP Addresses
Google has multiple IP addresses associated with its servers. Two of these addresses are 142.251.39.110 and 216.58.223.228. While you can type these IP addresses directly into your browser, it's more convenient to use the domain name "www.google.com."
The Role of DNS:
Domain names, like "www.google.com," are easier for humans to remember than IP addresses. The Domain Name System (DNS) translates domain names into IP addresses. When you click on a link or enter a domain name, your browser contacts a DNS server to find the IP address associated with that domain name.

3 Understanding TCP/IP:
TCP/IP (Transmission Control Protocol/Internet Protocol) is a set of communication protocols used for connecting devices and transmitting data over networks, including the internet.

The Lifecycle of a Browser Request:

DNS Resolution:
After you press Enter, your browser sends a request to a DNS server to obtain the IP address for "www.google.com." The DNS server responds with the corresponding IP address.
HTTP Request:
Your browser sends an HTTP GET request to the server associated with the IP address obtained from DNS. This request specifies the desired resource, such as the default page or other content related to "www.google.com."
Server Processing:
The server receives the HTTP request and processes it. It generates an HTTP response with a "200 OK" status code, indicating that the request was successful. The server breaks down the response into smaller data packets for efficient transmission.
Data Transmission:
The server starts sending the requested resource (web page content) as a series of data packets to your browser. These packets are transmitted over the network and may undergo error detection, correction, and congestion control processes.
Browser Rendering:
Your browser receives the data packets and begins rendering the web page. It interprets the HTML, executes any JavaScript code, applies CSS styles, and displays the web page's content in the browser window.

Conclusion:
In just a matter of seconds (depending on your internet speed), the entire lifecycle of a browser request and response occurs. This process involves DNS resolution, HTTP request and response, data transmission, and browser rendering. Understanding these steps helps us appreciate the complexity behind the seemingly simple act of loading a webpage.

Introduction to JavaScript

Damian Emerah — Sun, 04 Dec 2022 22:53:03 +0000

JavaScript: Unleashing the Power of Web Development

JavaScript, the versatile programming language, is a powerhouse in the world of web development. With its array of handy features, it has captured the attention of developers worldwide. In fact, according to the 2020 Stack Overflow survey, an impressive 70% of professional developers code in JavaScript. So, what makes JavaScript stand out and gain such widespread popularity? Let's delve into its unique qualities.

A Language for All Web Development Aspects:
JavaScript shines in both front-end and back-end development. Its versatility allows developers to build complete web applications using JavaScript alone. This comprehensive approach makes it a go-to language for creating dynamic and interactive web experiences.

Easy Syntax and Quick Setup:
JavaScript's scripting nature brings simplicity to its syntax, making it easy to understand and work with. Furthermore, JavaScript doesn't require any complex setup to run; it runs directly in the browser. This convenience makes it ideal for executing small tasks and scripts seamlessly.

Thriving Community and Abundant Libraries:
JavaScript's popularity has fostered a vibrant community of developers. This robust community support translates into an extensive collection of open-source libraries, readily available for free. The availability of these libraries empowers developers to leverage existing solutions and accelerates development processes.

Learning JavaScript only requires basic computer literacy and a fundamental understanding of HTML and CSS, making it accessible to aspiring developers.

Unveiling its Core Features

At its core, JavaScript is a scripting language that empowers web pages with dynamic and advanced functionality. While HTML creates static web content, JavaScript adds the magic touch that elevates web pages to new heights. From prompt content updates to interactive interfaces, animated graphics, and multimedia experiences, JavaScript is the driving force behind these enhancements. It seamlessly complements HTML and CSS, forming the trifecta of standard web technologies.

Key Aspects of JavaScript

Lightweight Scripting Language:
JavaScript is specifically designed as a lightweight scripting language for client-side execution in web browsers. It is tailored for web applications, and its library ecosystem primarily caters to web development needs.

Interpreter-Based Execution:
Unlike compiled languages, JavaScript is interpreted by the browser. Line by line, the browser interprets the JavaScript source code and executes it in real-time. This interpretive nature aligns JavaScript with languages like Ruby and Python.

Event Handling Capabilities:
Events drive interactivity on the web. JavaScript excels in event handling, enabling developers to respond to user actions or system occurrences. Whether it's a button click or a custom event, JavaScript empowers developers to capture and handle these events effectively.

Dynamic Typing:
JavaScript is dynamically typed, eliminating the need for explicit variable declarations. For instance:

var dynamicType = "Javascript is awesome"; //A string
dynamicType = 5; //A number

In JavaScript, variables can change their type dynamically without declaration. This flexibility allows developers to adapt and manipulate data seamlessly.

Objects and Functions as First-Class Citizens:
JavaScript treats objects and functions as first-class citizens. All non-primitive data types, including arrays, functions, and symbols, inherit properties from the Object prototype. This means that objects and functions can be passed as references, returned from functions, and assigned to variables for manipulation. JavaScript's support for higher-order functions amplifies its capability to return functions, making it a versatile language.
Functions as first-class citizens enable JavaScript to handle functions like any other variable, offering flexibility and enhancing code modularity.

JavaScript's versatility, coupled with its vast ecosystem of libraries and a thriving community, makes it an indispensable tool for modern web development. Embrace its power and unleash your creativity to build amazing web experiences.

const let var - The difference

Damian Emerah — Sun, 04 Dec 2022 22:50:31 +0000

In JavaScript, there are three keywords used to declare variables: 'var', 'let', and 'const'. Each of these keywords has its own characteristics and best practices for usage. Let's explore their differences and when to use them effectively.

var Keyword:

The 'var' keyword is the oldest way to declare variables in JavaScript.

Scope: Variables declared with 'var' have function scope or global scope. They are accessible throughout the entire function or globally if declared outside any function.
Hoisting: 'var' variables are hoisted to the top of their scope, allowing them to be accessed before their declaration.
Reassignment: 'var' variables can be reassigned and updated.

Example:

console.log(a); // Output: undefined
var a = 10;
console.log(a); // Output: 10

let Keyword:

The 'let' keyword was introduced in ECMAScript 6 (ES6) to overcome some of the limitations of 'var'.

Scope: Variables declared with 'let' have block scope, which means they are only accessible within the block where they are defined (e.g., inside loops or conditionals).
Hoisting: 'let' variables are not hoisted, so they cannot be accessed before their declaration.
Reassignment: 'let' variables can be reassigned and updated within their scope.

Example.

console.log(b); // Output: ReferenceError: b is not defined
let b = 9;
console.log(b); // Output: 9

const Keyword:

The 'const' keyword is used to declare constants, which are variables that cannot be reassigned once they are assigned a value.

Scope: Variables declared with 'const' also have block scope.
Hoisting: 'const' variables are not hoisted and need to be initialized during declaration.
Reassignment: 'const' variables cannot be reassigned after initialization, making them read-only.

Example:

const c = 10;
console.log(c); // Output: 10

c = 9; // Error: TypeError: Assignment to constant variable.

Best Practices:

Use 'const' for values that should not change (e.g., configuration settings, fixed values).
Use 'let' for variables that need to be reassigned or updated within their scope.
Minimize the use of 'var' since it has function scope and can lead to unintended consequences.

By understanding the differences and best practices of 'var', 'let', and 'const', you can write more reliable and maintainable JavaScript code. Choose the appropriate keyword based on the desired scope and mutability of your variables.

Git and GitHub

Damian Emerah — Sun, 27 Nov 2022 21:12:34 +0000

Programmers are always writing codes, either to add a new feature to an already existing code, or writing a new one.

Our source code can grow big fast. Also, as developers, we at some point work with other developers or need to study and update another's code, so we always need a way of tracking the changes we make in our codebase.

There are many ways and systems to track changes in our codebase, but in this short writeup, we will look at one of them, Git.

GIT

Git is a distributed version control system, used in tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

To get started with git, first, you will need to install Git on your system.

After installation, typing this command on your terminal will let you know if Git was successfully installed. If so, you will be able to see the current version of Git running in your system.

git --version

C:\Users\MyPC>git --version
git version 2.35.1.windows.2

Setting things up:

The first thing you will probably do is let Git know who you are. This will enable Git to determine who makes what changes in our code and the changes made.
To do this, you will need to set your username and email like this...

git config --global user.name "[firstname lastname]"
git config --global user.email "[valid email]"

Working with Git:

To get started with git, navigate to your fill folder using your terminal and type the following command; This will initialize a new git repository for your codebase.

git init

There are lots of commands we use while working with git, let's see some of them.

The git add [filename] command allows you to add a file to the staging area. With git add ., you can add all the files at once.

git commit -m "[commit message]": The git commit command is used to move files from the staging area to your local repository. This command comes after the 'git add' command.

git status command shows the state of your working directory and helps you see all the files which are untracked by Git, staged, or unstaged.

`git branch ": The git branch command allows you to create, list, rename and delete branches. Many operations on branches are applied by git checkout and git merge commands.

git push <remote> <branch>: The git push command is used to upload local repository content to a remote repository (e.g GitHub). Pushing is how you transfer commits from your local repository to a remote repo. It's the counterpart to git fetch, but whereas fetching imports commits to local branches, pushing exports commits to remote branches.

GitHub

GitHub is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project.

To get started with GitHub, you will need to create an account on their website .

GitHub allows us the flexibility of managing our code in a nice graphical interface.

Repository

A repository (abbreviated as repo) is a location where all our files for a particular project are stored. You can easily create a new repository on your GitHub page either by clicking the 'New repo' button or clicking on "New repository" on the plus icon from the navigation. Each repository can be accessed through a unique URL.

Forking

“Forking” is when you create a new project based on another project that already exists. This is an amazing feature that vastly encourages the further development of programs and other projects. If you find a project on GitHub that you’d like to contribute to, you can fork the repo, make the changes you’d like, and release the revised project as a new repo. If the original repository that you forked to create your new project gets updated, you can easily add those updates to your current fork.

Pull Requests

You’ve forked a repository, made a great revision to the project, and want it to be recognized by the original developers—maybe even included in the official project/repository. You can do so by creating a pull request. The authors of the original repository can see your work, and then choose whether or not to accept it into the official project. Whenever you issue a pull request, GitHub provides a perfect medium for you and the main project’s maintainer to communicate.

Social Networking

The social networking aspect of GitHub is probably its most powerful feature, allowing projects to grow more than just about any of the other features offered. Each user on GitHub has their own profile that acts like a resume of sorts, showing your past work and contributions to other projects via pull requests.

Project revisions can be discussed publicly, so a mass of experts can contribute knowledge and collaborate to advance a project forward.