Abraham Anak Agung

My Projects

be a groq guru in ten steps

This application is inspired by GROQ language, GROQ lesson by Magnus Holm in CSS-Tricks blog, and GraphQL of Thrones by Swyx.

Configuring Codemirror to work with React and Vite is quite challenging. I ended up using Codemirror 6 instead of version 5 because it work perfectly with Vite. Chakra UI is also great in creating simple application prototype like this one.

Feats:

  • code GROQ language in simple code editor
  • clear and step by step instruction
  • lots of GROQ sources

Todo:

  • showing GROQ syntax error in code editor
  • help options with code result
  • game points, so it is more interesting to learn
  • preserve user code in local storage

Stacks:

  • ReactJS
  • Vite
  • ChakraUI
  • Codemirror6
  • GroqJS
CODE SOURCE
groq of thrones app screenshot

Simple Landing Page Project for Client

I create this application based on design in Behance request by my client. It is simple landing page that integrate with Instagram post and Whatsapp for price quotation.

Instagram API is pretty clear and easy to understand. The only problem that I still had is renewing the long lived token and store it in the env variable. I still can't figure out the best way to do this yet.

Feats:

  • Connect with Instagram Post
  • Showing location with Google Map
  • Use Whatsapp for quoting price

Todo:

  • made a full e-commerce application
  • find the good payment gateway in my client country

Stacks:

  • ReactJS
  • Vite
  • Twin Macro
  • Styled Component
CODE SOURCE
marvelous florist website screenshot

Another Twitter clone application

I create this application based on Twitter. This app have basic feature of CRUD and it also had auth service with Firebase Auth.

This is the first time I wrote Firebase Function. It is much like writing REST API. The main challenge is that I need to carefully tought when updating or deleting data.

Feats:

  • authorization
  • post new whisper
  • edit whisper
  • delete whisper
  • post comment to whisper
  • update user avatar
  • like whisper
  • unlike whisper
  • notification on new comment

Todo:

  • follow user
  • delete whisper after 24 hours?

Stacks:

  • ReactJS
  • Redux
  • React Router
  • TypeScript
  • TailwindCSS
  • Firebase
  • Formik
  • Yup
  • Express
  • Axios
  • DayJS
CODE SOURCE
our whispers app screenshot

Video sharing application in React Native

I made this app out of curiosity about OnlyFans site. So I just think why I don't made something like that in React Native?

Creating native application with RN is not easy. There is much boilerplate, unknown error, and third party package is needed especially for Video. RN doesn't have Video element (Expo does), so it is very challenging for me to get the video, upload it and show it on the timeline.

Feats:

  • authorization
  • post video
  • user profile page
  • follow user
  • notification

Todo:

  • like video
  • delete video

Stacks:

  • ReactJS
  • React Native
  • TypeScript
  • Formik
  • Yup
  • Firebase
CODE SOURCE
capchiq app screenshot

AWWWARDS site clone

I create this clone site because I want to sharpen my skills in animation. Animation always fascinate me. But it surely takes time to master it

Working with animation in React is not easy. Framer motion makes it simple and responsive too. I learn much of using React useContext API. If I going to do this again, I probably will using Redux Tool Kit instead of useContext.

Feats:

  • custom cursor
  • light ~ dark theme
  • snap-cursor

Todo:

  • preserve theme
  • preserve canvas state when user change theme

Stacks:

  • Gatsby
  • Framer Motion
  • Styled-Component
CODE SOURCE
travel-sumatra site screenshot

I redesign my portfolio in 2020

I create this portfolio to showcase my projects and also blogging about what I learn or what I like to do when I'm not creating a beautiful app.

Page transition with Sapper is quite tricky. I can't make it work properly yet. So I combined it with GSAP to create smooth and simple page transition. Creating my first blog site with Sanity CMS is exciting. Sanity is a different beast. Setting up schema and using Sanity's GROQ is really a good developer experience. It is far simple than I tought it will be.

Feats:

  • page transition
  • blog with CMS
  • simple animation with GSAP

Todo:

  • design photo gallery

Stacks:

  • Sapper
  • Svelte
  • GSAP
  • Sanity CMS
  • TypeScript
CODE SOURCE
portfolio page screenshot

Other Projects:

twitter 2077 Theme UI

twitter in 2077 (UI Only)

Building clone project like this is a lot of fun. Especially when you love using the application. I love using Twitter as an application to connect with the world. And I also love watching Cyberpunk 2077 game (I don't have it yet, my computer can't handle it). The graphics was so good and the color was vibrant. So I combined dull Twitter theme with vibrant CyberPunk colors.

Tech:

  • svelte
twitter 2077 Theme UI

bigtextboks

I create this application inspired by bigtextbox.com. Creating theme and tackling Flash Of Unstyled Content on first render is surprisingly quite complex. I still can't fully figured it yet even tough I try to put my script at the top of the body element. Something is not quite connect, but I think for now the other feature is working well.

Tech:

  • JavaScript
  • HTML
  • CSS