<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tech Insight &#8211; Fredo Ronan</title>
	<atom:link href="https://blog.fredoronan.web.id/category/tech/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.fredoronan.web.id</link>
	<description>S.Kom &#124; Youtuber &#124; Backend Developer &#124; Full-stack Developer &#124; Tech Enthusiast</description>
	<lastBuildDate>Wed, 08 Apr 2026 09:23:41 +0000</lastBuildDate>
	<language>id</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://blog.fredoronan.web.id/wp-content/uploads/2025/10/cropped-Channel-Logo-maybe-squared-32x32.png</url>
	<title>Tech Insight &#8211; Fredo Ronan</title>
	<link>https://blog.fredoronan.web.id</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Bikin server sendiri yang bisa handle CI/CD + hosting?</title>
		<link>https://blog.fredoronan.web.id/2026/04/08/bikin-server-sendiri-yang-bisa-handle-ci-cd-hosting/</link>
					<comments>https://blog.fredoronan.web.id/2026/04/08/bikin-server-sendiri-yang-bisa-handle-ci-cd-hosting/#respond</comments>
		
		<dc:creator><![CDATA[fredoronan]]></dc:creator>
		<pubDate>Wed, 08 Apr 2026 09:21:54 +0000</pubDate>
				<category><![CDATA[Cerita]]></category>
		<category><![CDATA[Tech Insight]]></category>
		<guid isPermaLink="false">https://blog.fredoronan.web.id/?p=133</guid>

					<description><![CDATA[Sumber gambar: unsplash.com Saya punya server yang saya rangkai/bikin sendiri di rumah. Servernya ada 2 macam, yang satu khusus untuk proses berat misal build aplikasi dan lain2, yang satunya khusus untuk hosting saja. Perangkatnya sendiri sebenarnya hanya laptop bekas dan stb bekas, hah? Seriusan? Iyesss gak salah baca kamu wkwk. Di tambah lagi salah satu [&#8230;]]]></description>
										<content:encoded><![CDATA[
<img decoding="async" src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&#038;w=2534&#038;auto=format&#038;fit=crop&#038;ixlib=rb-4.1.0&#038;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="100%"/>



<p style="font-size: 15px; font-style: italic;">Sumber gambar: unsplash.com</p>



<p class="wp-block-paragraph">Saya punya server yang saya rangkai/bikin sendiri di rumah. Servernya ada 2 macam, yang satu khusus untuk proses berat misal build aplikasi dan lain2, yang satunya khusus untuk hosting saja. Perangkatnya sendiri sebenarnya hanya laptop bekas dan stb bekas, hah? Seriusan? Iyesss gak salah baca kamu wkwk. Di tambah lagi salah satu servernya punya kemampuan CI/CD dengan konfigurasi ketika ada event github push pada salah satu repository, dia otomatis langsung build dan deploy ke server hosting/production, ala ala Vercel gitu tapi punya sendiri/milik pribadi, asik kan?</p>



<h2 class="wp-block-heading">Apa itu server?</h2>



<p class="wp-block-paragraph">Tapi server itu sebenarnya apa si? Simpelnya server itu ya komputer sebenarnya. Cuma kalau kelas enterprise kapabilitas dan desain komponennya itu dirancang khusus untuk menghandle proses yang cukup besar dan simultan. Makanya perangkat server untuk enterprise itu keliatan beda banget sama komputer pada umumnya.</p>



<p class="wp-block-paragraph">Dulu saya pernah kepikiran, kalau konsepnya server itu ya komputer berarti bisa dong bikin sendiri? Pakai laptop bekas yang di ubah menjadi server harusnya bukan tidak mungkin. Nah, dari sini muncul ide untuk membuat server sendiri dengan memanfaatkan laptop bekas yang sudah lama tidak terpakai.</p>



<h2 class="wp-block-heading">Kenapa bikin server sendiri?</h2>



<p class="wp-block-paragraph">Tujuan saya kenapa &#8220;ngotot&#8221; bikin server sendiri ini salah satunya adalah pengen mempelajari bagaimana cara server bekerja. Karena jika di telusuri secara mendalam, pernak perniknya itu banyak banget loh. Mulai dari setup networknya, alokasi manajemen sumber daya komputer/laptopnya, teknologi2 yang dipakai untuk keperluan monitoring, keamanan, efisiensi atau kecepatan proses2 yang bekerja di dalamnya yang nanti berhubungan dengan optimasi sumber daya, manajemen file2 konfigurasi, cache dan masih banyak lagi.</p>



<h2 class="wp-block-heading">Keuntungan punya server sendiri</h2>



<p class="wp-block-paragraph">Tujuan lain bikin server sendiri ini adalah pengen punya kontrol penuh atas berbagai macam aplikasi/website yang saya hosting nantinya dan juga sekalian belajar bagaimana proses deployment sebuah aplikasi itu dilakukan. Keuntungan lainnya ya tidak lain dan tidak bukan adalah menghemat biaya wkwk.</p>



<p class="wp-block-paragraph">Lah emangnya sehemat apa sih? Kalau misalnya teman2 sudah punya laptop bekas bisa dari keluarga atau saudara misalnya, biaya untuk membuat server sendiri ini hanya butuh sewa domain dan bayar kuota internet doang loh. Sewa domain gak harus yang bagus2 dulu juga gapapa, yang paling murah saja per tahunnya. Lalu beli kuota internet untuk keperluan download dan install software2 yang diperlukan untuk setup servernya, atau kalau sudah langganan yaudah sih berarti hanya sewa domain per tahun wkwk.</p>



<h2 class="wp-block-heading">Caranya gimana tuh?</h2>



<p class="wp-block-paragraph">Gampang2 susah sih setup server sendiri tu, cuma mungkin karena saya pertama kali, jadi masih banyak trial and error. Tapi secara garis besar, urutannya sebagai berikut:</p>



<ul class="wp-block-list">
<li>Install OS server (saya prefer Ubuntu Server/Armbian OS sesuai arsitektur perangkatnya)</li>



<li>Setup SSH server</li>



<li>Install Docker (supaya enak, karena ibarat cuma bikin kotak2 tempat aplikasi dijalankan dan terisolasi dari perangkat aslinya)</li>



<li>Pasang beberapa alat2 monitoring sebagai Docker container (contoh: Prometheus, Grafana, Loki, Promtail)</li>



<li>Pasang Nginx Proxy Manager sebagai Docker Container juga supaya mudah routing aplikasi yang di hosting dan juga sebagai layer keamanan tambahan</li>



<li>Terakhir setup dan pasang cloudflare tunnel lalu arahkan ke Nginx Proxy Manager, karena semua aplikasi yang di hosting jalan di belakangnya</li>
</ul>



<p class="wp-block-paragraph">Lah trus CI/CD nya? Nahh untuk keperluan ini berarti kita butuh software yang bisa menjalankan dan mengakomodasi keperluan CI/CD tersebut. Kalau saya pilih Jenkins yang saya pasang juga sebagai Docker Container. Jujur untuk setup Jenkinsnya cukup ribet, karena terkait dengan izin akun github untuk bisa otomatis clone dan build aplikasinya. Selain itu untuk bisa otomatis deploy, kita juga harus setup SSH key jika server hostingnya berbeda, tapi kalau sama ya tidak perlu.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">Kalau dari saya, server untuk hosting dan CI/CD seperti Jenkins baiknya di pisah, karena supaya aplikasi yang di hosting tidak terganggu atau bahkan down ketika proses build sedang berjalan di Jenkins. FYI, build proses seringkali memakan resource yang cukup signifikan, oleh karena itu kadang bisa mengganggu proses lain.</p>
</blockquote>



<p class="wp-block-paragraph">Disini kita belum bahas teknisnya, kita baru bahas secara garis besar kalau ternyata memungkinkan loh untuk punya server sendiri ala ala Vercel yang bisa otomatis deploy versi terbaru gitu. Kalau secara teknis kedepannya mungkin saya akan bagikan setiap konteksnya, misalnya gimana cara saya setup script custom supaya Jenkins bisa clone github repository otomatis, gimana cara bikin Jenkins Agent untuk build aplikasi sesuai framework, dan masih banyak lagi pernak pernik nya, so stay tuned ya <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f642.png" alt="🙂" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.fredoronan.web.id/2026/04/08/bikin-server-sendiri-yang-bisa-handle-ci-cd-hosting/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Snake Game without graphics.h</title>
		<link>https://blog.fredoronan.web.id/2025/10/19/snake-game-without-graphics-h/</link>
					<comments>https://blog.fredoronan.web.id/2025/10/19/snake-game-without-graphics-h/#respond</comments>
		
		<dc:creator><![CDATA[fredoronan]]></dc:creator>
		<pubDate>Sun, 19 Oct 2025 14:18:34 +0000</pubDate>
				<category><![CDATA[Project]]></category>
		<category><![CDATA[Tech Insight]]></category>
		<guid isPermaLink="false">https://blog.fredoronan.web.id/?p=35</guid>

					<description><![CDATA[Snake Game Console build in C language but without graphics.h headerOS : Version : v1.1.0 README Indonesian Version (README Versi Indonesia) Library Requirements : Standard C Library such as.. This is the simple snake game that run on windows console/command prompt/CMD without using graphic library or graphic.h for display the graphic thing on language.The main [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Snake Game Console build in C language but without <code>graphics.h</code> header<br>OS : <img decoding="async" alt="Windows" src="https://img.shields.io/badge/Windows-0078D6?logo=windows&amp;logoColor=white&amp;style=flat"></p>



<p class="wp-block-paragraph"><code>Version : v1.1.0</code></p>



<h3 class="wp-block-heading"><a href="https://github.com/Fredo-Ronan/Snake-Game-Console-without-graphics.h/blob/main/README%20(Indonesian%20Version).md">README Indonesian Version (README Versi Indonesia)</a></h3>



<p class="wp-block-paragraph">Library Requirements : Standard C Library such as..</p>



<pre class="wp-block-code"><code>#include &lt;stdio.h&gt;
#include &lt;stdlib.h&gt;
#include &lt;string.h&gt;
#include &lt;stdbool.h&gt;
#include &lt;time.h&gt;</code></pre>



<p class="wp-block-paragraph">This is the simple snake game that run on windows console/command prompt/CMD without using graphic library or <code>graphic.h</code> for display the graphic thing on <img decoding="async" alt="C lang" src="https://img.shields.io/badge/-3178C6?logo=C&amp;logoColor=white&amp;style=flat"> language.<br>The main idea is to make movement of the snake using looping and every loop, the coordinate of the snake and it&#8217;s tail is different sequencially.<br>This snake game is build just using the basic syntax of the C language without any special syntax from another C library.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph"><strong>NOTE</strong> : <em>This snake game console actually have a little bug when generating food on random location. If you want to contribute to fix that bug and another bug while trying from source code, read the <a href="https://github.com/Fredo-Ronan/Snake-Game-Console-without-graphics.h/blob/main/CONTRIBUTING.md">CONTRIBUTING.md</a> file to know how to contribute to this little fun project</em></p>
</blockquote>



<p class="wp-block-paragraph"><a href="https://github.com/Fredo-Ronan/Snake-Game-Console-without-graphics.h/issues/1">Random food coordinate generating bug issue</a></p>



<h3 class="wp-block-heading">Demo Video Gameplay</h3>



<h2 class="wp-block-heading"><img decoding="async" alt="DemoVideo" src="https://user-images.githubusercontent.com/128687596/230856656-8397bdf4-502c-4c4e-92d4-87ffca699512.gif" width="500"></h2>



<h1 class="wp-block-heading">Features <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /></h1>



<ul class="wp-block-list">
<li>Move the snake using W A S D on keyboard <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/27a1.png" alt="➡" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b05.png" alt="⬅" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b06.png" alt="⬆" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b07.png" alt="⬇" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2328.png" alt="⌨" class="wp-smiley" style="height: 1em; max-height: 1em;" /></li>



<li>Store the history of the player including the player names and the date time achieved <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4be.png" alt="💾" class="wp-smiley" style="height: 1em; max-height: 1em;" /></li>



<li>Access the history even when the program has been terminated (persistence text file based) <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c2.png" alt="📂" class="wp-smiley" style="height: 1em; max-height: 1em;" /></li>



<li>Pause the game when anything disturb while playing <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/23f8.png" alt="⏸" class="wp-smiley" style="height: 1em; max-height: 1em;" /></li>
</ul>



<h1 class="wp-block-heading">Limitations <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a0.png" alt="⚠" class="wp-smiley" style="height: 1em; max-height: 1em;" /></h1>



<ul class="wp-block-list">
<li>Unfortunately, this snake game console runs using the principle of looping and without using a graphics engine such as the <code>graphics.h</code> header, so its performance depends on CPU speed, the higher the CPU speed, the smoother the &#8220;snake&#8221; moves in the game.</li>



<li>This snake game only run on Windows Operating System in CMD form/console program.</li>
</ul>



<h1 class="wp-block-heading">Preview Images <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f440.png" alt="👀" class="wp-smiley" style="height: 1em; max-height: 1em;" /></h1>



<ul class="wp-block-list">
<li><strong>Main Menu</strong> <em>Main menu of the snake game console program</em></li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229764982-313bc5e1-3dbf-425a-a264-dc392f266f03.png" alt="" style="width:533px;height:auto"/></figure>



<ul class="wp-block-list">
<li><strong>Confirmation to play</strong> <em>Asking for confirmation that the player really want to continue to the game</em> </li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229765083-deb3b2e5-7ace-4a38-a1b0-0b0f3bc3ea7f.png" alt="" style="width:537px;height:auto"/></figure>



<ul class="wp-block-list">
<li><em>Asking for the player name (can be random name) for storing history purpose</em></li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229765106-18b2297b-ede9-4318-bfcc-5dd6131b11db.png" alt="" style="width:544px;height:auto"/></figure>



<ul class="wp-block-list">
<li><strong>See the History</strong> <em>See all players history data</em> </li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229767767-461826b9-d8f4-4afb-9a7f-eab00d67eb0d.png" alt="" style="width:549px;height:auto"/></figure>



<ul class="wp-block-list">
<li><em>Search and see the specific player history by name</em></li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229768005-349115bc-96f0-427f-b281-7ac2c36b373e.png" alt="" style="width:550px;height:auto"/></figure>



<ul class="wp-block-list">
<li><strong>Game Play</strong> <em>Game Play in action</em> </li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229838794-11e8df48-f933-4cf3-9df8-643e010873c1.png" alt="" style="width:549px;height:auto"/></figure>



<ul class="wp-block-list">
<li><em>Game Paused by pressing P key on keyboard</em> </li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229783462-23544d67-ad28-400f-af97-f243fd6a9466.png" alt="" style="width:550px;height:auto"/></figure>



<ul class="wp-block-list">
<li><em>Game Over</em></li>
</ul>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://user-images.githubusercontent.com/128687596/229838230-cc1bafa6-49d4-4986-a6e7-30ddd584045f.png" alt="" style="width:551px;height:auto"/></figure>



<h1 class="wp-block-heading">Build and Run the source file <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6e0.png" alt="🛠" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2699.png" alt="⚙" class="wp-smiley" style="height: 1em; max-height: 1em;" /></h1>



<ul class="wp-block-list">
<li><strong>Windows</strong></li>
</ul>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph"><em>If you want to run this code from text editor like VS CODE, you <strong>MUST HAVE</strong> GCC Compiler installed on your computer environment</em><br><em>These are couple of way to get the GCC Compiler installed in your computer :</em></p>



<ul class="wp-block-list">
<li>Installer called MinGW is pretty popular among windows users, you can directly search in google by keyword : MinGW C Compiler download OR <a href="https://www.scaler.com/topics/c/c-compiler-for-windows/">you can click this to download MinGW and read installation instructions</a> to get the GCC Compiler install in your computer</li>



<li>Other installer is msys2 which i use in my computer, <a href="https://www.msys2.org/">click here for the msys2 download and install instructions</a>.</li>
</ul>



<p class="wp-block-paragraph"><strong>You can actually automate the download and installation using my script, <a href="https://github.com/Fredo-Ronan/Snake-Game-Console-without-graphics.h/tree/main/Automate%20Msys2%20Download%20Script">click here to download the automate download script</a>.</strong></p>



<p class="wp-block-paragraph"><strong><em>NOTE</em></strong><em> that not only install the GCC Compiler using one of the installer, but also configure the PATH to your windows system environment</em></p>



<p class="wp-block-paragraph"><em>RECOMMENDED is using IDE such as Dev C++ or Microsoft Visual Studio</em></p>



<ul class="wp-block-list">
<li><a href="https://www.bloodshed.net/">Click here to download the Dev C++ IDE from official website</a>.</li>



<li><a href="https://github.com/Fredo-Ronan/Dev-C-IDE-Installer">Click here to download Dev C++ version that i use in my computer</a></li>
</ul>
</blockquote>



<ul class="wp-block-list">
<li>Download the source code (see the download instructions)</li>



<li>Extract the zip downloaded source code to the directory that you want If you are using VS CODE, follow these instructions =====================================</li>



<li>Open the CMD on your windows machine to that directory (see the shortest way to open directly from the directory)</li>



<li>type <code>code .</code> then press ENTER</li>



<li>After that, your VS CODE will be open to that directory</li>



<li>Open those source files by double click it, or using CTRL + P to search and open</li>



<li>Open the terminal inside your VS CODE (you can use shortcut CTRL + ` on your keyboard)</li>



<li>type <code>gcc main.c source.c -o snake</code> Actually the <code>snake</code> can be replace according to your preference what to name the .exe file for the output of the program. So the format is :<br><code>gcc &lt;sourceFiles sourceFiles> -o &lt;outputName></code></li>



<li>type <code>start snake.exe</code> or <code>./snake</code> to run the program</li>



<li>Enjoy <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f642.png" alt="🙂" class="wp-smiley" style="height: 1em; max-height: 1em;" /> When compile and running from the source using Vs Code, ignore these files inside the source code folder :</li>
</ul>



<pre class="wp-block-code"><code>  - Project1.layout
  - Project1.dev
  - Project1.exe
  - MakeFile.win
  - source.o
  - main.o</code></pre>



<p class="wp-block-paragraph"><strong>Because they are actually autogenerated from Dev C++ IDE and it&#8217;s important just for compiling inside the Dev C++ IDE.</strong></p>



<p class="wp-block-paragraph"><strong>If you are using Dev C++, follow these instructions </strong>=====================================</p>



<ul class="wp-block-list">
<li>Extract the downloaded source file zip</li>



<li>Follow these step to open project in Dev C++ :
<ul class="wp-block-list">
<li>Open Dev C++</li>



<li>Click on File > Open <img decoding="async" width="500" src="https://user-images.githubusercontent.com/128687596/229816000-fbfa6578-d826-4b88-9929-bc14e2a77b7a.png"></li>



<li>Navigate to the directory you&#8217;ve download and extract the source file</li>



<li>Click on Project1.dev then click Open <img decoding="async" width="500" src="https://user-images.githubusercontent.com/128687596/229818293-1ced2a03-20a7-49d5-84ac-6b6ed58323df.png"></li>



<li>Click on the Compile &amp; Run icon or press F11 for the shortcut <img decoding="async" width="500" src="https://user-images.githubusercontent.com/128687596/229819444-9025daac-90ec-4d48-9bb9-568c7ae0ebb1.png"></li>



<li>After that, Dev C++ will compile it and automatically run the program also</li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading">Enjoy <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f642.png" alt="🙂" class="wp-smiley" style="height: 1em; max-height: 1em;" /></h2>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.fredoronan.web.id/2025/10/19/snake-game-without-graphics-h/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Live Chat Web Project</title>
		<link>https://blog.fredoronan.web.id/2025/10/18/live-chat-web-project/</link>
					<comments>https://blog.fredoronan.web.id/2025/10/18/live-chat-web-project/#respond</comments>
		
		<dc:creator><![CDATA[fredoronan]]></dc:creator>
		<pubDate>Sat, 18 Oct 2025 04:35:06 +0000</pubDate>
				<category><![CDATA[Project]]></category>
		<category><![CDATA[Tech Insight]]></category>
		<guid isPermaLink="false">https://blog.fredoronan.web.id/?p=29</guid>

					<description><![CDATA[This project is my own experiment to learn about HTML, CSS, JavaScript and WebSocket connection by creating a simple Web Based Live Chat platform that everyone can run it on their own machine and it&#8217;s open-sourced. This project only depends on Express JS for API and WebSocket library which is Socket IO in order to [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-large"><img decoding="async" src="https://fredo-ronan.github.io/assets/live-chat-demo.png" alt=""/></figure>



<p class="wp-block-paragraph">This project is my own experiment to learn about HTML, CSS, JavaScript and WebSocket connection by creating a simple Web Based Live Chat platform that everyone can run it on their own machine and it&#8217;s open-sourced. This project only depends on Express JS for API and WebSocket library which is Socket IO in order to established connection among clients that are connected at the same time on whoever the host of this platform. The fun thing is, with some network knowledge, you can create a temporary live chat session with your friends actually without hosting it on dedicated server or VPS.</p>



<p class="wp-block-paragraph">There is a docker version also of this project so you can easily run this on containerized form in case you worried about some security concern.</p>



<h2 class="wp-block-heading"><strong>How to use?</strong></h2>



<p class="wp-block-paragraph">In order to run this website or app, there are 2 ways, build from the source code and run in a docker container.</p>



<p class="wp-block-paragraph">If you want to build and run from the source code, the steps is</p>



<ul class="wp-block-list">
<li>Open command prompt on your desired directory and clone the repository using git</li>
</ul>



<pre class="wp-block-code"><code>git clone https://github.com/Fredo-Ronan/Live-Chat-Web.git</code></pre>



<ul class="wp-block-list">
<li>cd to repo directory</li>
</ul>



<pre class="wp-block-code"><code>cd Live-Chat-Web</code></pre>



<ul class="wp-block-list">
<li>Install the packages</li>
</ul>



<pre class="wp-block-code"><code>npm install</code></pre>



<ul class="wp-block-list">
<li>That&#8217;s it, you can run by typing this command</li>
</ul>



<pre class="wp-block-code"><code>npm run start</code></pre>



<p class="wp-block-paragraph">That should run the Live Chat Web on <code>http://localhost:5000</code>.</p>



<p class="wp-block-paragraph">But if you want to run it in a docker container, you just need to install docker on your system and then just run <code>docker compose up</code> in the repo directory you&#8217;ve cloned and then it should automatically build and run from a docker container and visit <code>http://localhost:5000</code>.</p>



<h2 class="wp-block-heading">Into the next level</h2>



<p class="wp-block-paragraph">Well, on the previous steps that i have explained it&#8217;s just running on localhost which mean it&#8217;s just can be accessed on your local machine on through your favorite browser. Actually, there is a trick to make that accessible from anywhere in the internet. This include some networking knowledge and i can&#8217;t tell it directly here. But if you want that, i will make the article for that, actually it&#8217;s relatively very easy but i don&#8217;t want anybody there take advantage of this tool, because this tool is completely private and nothing was stored anywhere, so you know what i&#8217;m talking about. Just let me know in the comment section bellow if you want.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.fredoronan.web.id/2025/10/18/live-chat-web-project/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
