<h2>What is Blog v2</h2>
<p>My personal blog site built with Next.js and TypeScript.</p>
<h2>Architecture</h2>
<p><img src="/images/websites/blog-v2/architecture.png" alt="Architecture"></p>
<h2>Features</h2>
<ul>
<li>Dark Mode</li>
<li>i18n</li>
</ul>
<h2>Link</h2>
<ul>
<li><a href="https://www.chotto.dev/">https://www.chotto.dev/</a></li>
</ul>


Moving Sale

Authenticator

Blog v2

<h2>What is Authenticator</h2>
<p>Full-stack application for just authenticating made of TypeScript.</p>
<h2>Why I created</h2>
<p>To understand how authentication flow works. I thought that the part of authentication is more difficult and important than others when it comes to applications. Also, most applications have an auth feature. So I decided to build it to comprehend every single detail of authentication flow.</p>
<h2>OAuth flow</h2>
<p><img src="/images/websites/authenticator/OAuth-flow.png" alt="OAuth flow"></p>
<h2>Architecture</h2>
<p><img src="/images/websites/authenticator/architecture.png" alt="Architecture"></p>
<h2>Links</h2>
<ul>
<li>Production (<a href="https://authenticator-neon.vercel.app/">https://authenticator-neon.vercel.app/</a>)</li>
<li>Staging (<a href="https://authenticator-neon-staging.vercel.app/">https://authenticator-neon-staging.vercel.app/</a>)</li>
</ul>
<p>Note: Before visiting the website, please disable cross-site tracking permission on chrome or safari settings.</p>
<h2>Upcoming Features</h2>
<ul>
<li>Add JWT authentication</li>
<li>Add other OAuth providers, such as Facebook and Instagram</li>
</ul>


Portfolio

weather-react-icons

<h2>What is Moving Sale</h2>
<p>A platform that enables people to sell and/or buy their stuff 👀</p>
<p><img src="/images/websites/moving-sale/screenshot.png" alt="Screenshot"></p>
<h2>Features</h2>
<ul>
<li>User authentication</li>
<li>Invitation-only</li>
<li>Leave comments to products</li>
<li>Save products to your favorites</li>
<li>Contact sellers via SNS services</li>
</ul>
<h2>Architecture</h2>
<p><img src="/images/websites/moving-sale/architecture.png" alt="Architecture"></p>
<h2>Technologies</h2>
<ul>
<li>Installed user authentication with JSON web token to avoid session ID verification with database every request</li>
<li>Implemented on Next.js and deployed to Vercel with SSG, which reduces critical rendering path in end-users’ side</li>
</ul>


Company's websites

My Work Place

My Work Space

Impactraction

Gatsby Blog

My Portfolio

<h2>What is My Work Space</h2>
<p>My Work Space is <strong>an advanced Todo List</strong>.</p>
<h2>Features</h2>
<ul>
<li>Organize tasks by weeks or projects.</li>
<li>Dark Mode</li>
<li>Change color theme</li>
</ul>
<p>It's no need sign-up, your todo is saved automatically. Let's get started My Work Space 🔥</p>


<h2>What is Gatsby Blog</h2>
<p>A personal blog site made of Gatsby.js.</p>
<h2>Technologies</h2>
<ul>
<li>Implemented Headless Content Management System (Headless CMS), that enable users to update and post with graphical user interface easily.</li>
<li>Implemented on Gatsby with SSG, which reduces critical rendering path in end-users’ side</li>
</ul>
