aulianza.id
Personal website was built originally from scratch using several powerful stacks.
Tech Stack :
Introduction
This website was meticulously crafted from the ground up using Next.js, along with various complementary technologies. Its inception dates back to June 2023.
Ongoing enhancements, encompassing both functionality and content, are in the pipeline. This website stands as a treasured repository of my acquired knowledge, also serving as a platform for me to disseminate insights.
Feel welcome to utilize this website as a point of reference, a wellspring of inspiration, or as a template, all in accordance with the provided license. The source code is at your disposal to suit your specific requirements.
Should you find value in this resource, your consideration of leaving a rating is greatly appreciated. πππ»
If you have any questions, suggestions, input or anything else, don't hesitate to contact meπ§βπ»
<br /><br />
Features
On this website there are several features that will continue to be updated and added in the future.
π€ ChatGPT AI
You can access this feature by opening the command palette [cmd+k], then typing whatever you want to search/ask for.
Note:
If you're using Chat Completions engine model of ChatGPT, please concern about this:
Due this site is using free cloud hosting services (Vercel) with certain limitations (Serverless Function Execution Timeout), sometimes an error will occur if the response from the open AI API is too long, but you can change it in the vercel.json file to upgrade memory and maxDuration to be bigger according to the capabilities of your vercel plan.
π» JavaScript Playground
A no-fuss pure JavaScript playground with a live feedback loop.
π¬ Real-time Chat
Real-Time Chat is powered by Firebase. Anyone can leave me a message in this website.
π§ Spotify
Displays song information being played on spotify in real time using the Spotify API and SWR.
π Wakatime
Data is retrieved using the Wakatime API and then displayed on the dashboard, built with Next.js API routes deployed as serverless functions.
π Blogs
The CMS Blog on this website utilizes the API from the dev.to platform. The displayed articles are one-to-one with the articles published on my dev.to blog and are updated in real-time.
The data fetching technique used to retrieve articles from dev.to involves using Client-Side Rendering (CSR) for the blog list and Server-Side Rendering (SSR) for the blog details.
π³ Projects
The data projects on this blog are taken from the MySQL database connected through the Prisma Client. The database for this application is hosted on PlanetScale DB.
The data fetching method used to retrieve data projects is Incremental Static Regeneration (ISR) with 1 second revalidation and Server-Side Rendering (SSR) for the project details..
<br /><br />
Performance
PageSpeed Insights
GTmetrix
<br /><br />
Getting Started
If you are interested in running this project on your local machine, you can do so in just 3 easy steps below. Additionally, remember to update the ".env.example" file to ".env" and replace the variables with your own in the ".env" file.
1. Clone this template using one of the three ways:
-
Clone using git
-
Using
-
Using
-
Deploy to Vercel or Netlify, etc
2. Install dependencies
It is encouraged to use yarn so the husky hooks can work properly.
3. Run the development server
You can start the server using this command:
Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying .
<br /><br />
License
Licensed under the GPL-3.0 license.