JPJapan Flag
ENGreat Britain Flag

Projects

Food Log

  • TypeScript
  • React
  • Next.js
  • RSC (React Server Components)
  • Server Actions
  • Tailwind CSS
  • Shadcn
  • react-hook-form
  • Zod
  • Prisma
  • Turso
  • Clerk

Food Log is a full stack web application that helps you keep track of your daily calorie intake and monitor your macronutrient intake. I made this application to learn and gain more experience with back-end technologies like databases, ORMs, RSC (react Server Components), Server Actions, and User Authentication.

  • User Authentication using Clerk
  • CRUD opertations using RSC (React Server Components) and Server Actions
  • Data storage using Turso (Database) and Prisma (ORM)
  • Form validation using react-hook-form and Zod
  • Custom design using Shadcn plus custom dark/light switch
  • SEO, asset, and performance optimizaion

AI Face Detection with Age, Gender, and Ethnicity Recognition

  • TypeScript
  • React
  • Next.js
  • Next.js API Routes
  • Tailwind CSS
  • RTK Query
  • Zod
  • UploadThing
  • Cypress

This AI-powered face detection application can detect faces at various angles and detect multiple faces in a photo simultaneously with high accuracy. It can also recognize the age, gender, and ethnicity of each detected face.

  • Data exchange with 3rd-party API using Next.js API routes
  • File Handling using UploadThing (upload, url generation, size, type, and count limit)
  • End-to-End testing using Cypress and intercepted API responses
  • Skeleton UI loading animation
  • SEO, asset, and performance optimizaion

Clothing Store E-Commerce Website - Rumusha

  • TypeScript
  • React
  • Next.js
  • Shopify
  • Tailwind CSS
  • GraphQL
  • Swiper
  • Framer Motion
  • Figma

This project is an e-commerce website for a Japanese clothing store called Rumusha that showcases my ability to design and implement e-commerce websites using component-based frameworks (React/Next.js) for the front end and Shopify for the back end.

  • Custom responsive design using Figma
  • Shopify Integration using the Storefront GraphQL API
  • Reveal animations using Framer Motion
  • Customized sliders using Swiper
  • State management using Search Params
  • SEO, asset, and performance optimizaion

Japanese Sushi Restaurant Website - Sushi Doshira

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • internationalization (i18n)
  • Swiper
  • Framer Motion
  • Figma

This is the website for a Japanese sushi restaurant called Sushi Doshira that showcases my ability to design responsive layouts and implement them using component-based frameworks (React/Next.js) with internationalization (i18n), SEO optimization, animations, and accessibility features.

  • Custom responsive design using Figma
  • English and Japanese internationalization (i18n) using next-intl
  • Reveal animations using Framer Motion
  • Customized slider using Swiper
  • SEO, asset, and performance optimizaion

Recipe Ranking Mobile Application

Recipe Ranking Mobile Application
  • TypeScript
  • React Native
  • Expo
  • NativeWind
  • RTK Query
  • Zod

This project is a mobile application for top cooking recipes that I made using React Native.

  • Custom design implemented using NativeWind
  • Data fetching from third-party API using RTK Query
  • API response validation using Zod
  • Modal elements, pull-to-refresh, loading indicators, and other functionalities
  • APK file built using EAS Build

My Portfolio

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • Material UI
  • Framer Motion
  • i18n

I have integrated different cutting-edge technologies with unique design ideas i've had after working on many smaller projects. It will allow you not only to read about my skills but to see them in action as well. Make sure to check the GitHub readme for a detailed list of features and technologies used in this project.

  • Unique design and Interactive elements
  • Internationalization (Japanese/English)
  • Designed with scalability and ease of use in mind
  • In-depth performance and asset optimization

Todo App

  • TypeScript
  • Vite.js
  • React
  • Tailwind CSS
  • Framer Motion
  • Firebase
  • Firestore

While it may seem like a smiple todo app at first glance, It contains extra featres like user authentication, database integration, latency compensation, drag/drop reordering, and animations.

  • User Authentication using Firebase (Email/Google)
  • Anonymouse User login and upgrade
  • Database storage using Firestore
  • Animations and reordering using Framer Motion

IP Address Tracker

  • TypeScript
  • Vite.js
  • React
  • Leaflet.js
  • Tailwind CSS
  • Node.js
  • Express.js
  • REST API

In this project i worked with Leaflet.js (for map display and interaction) and multiple public IP geolocation APIs and implemented my own API in Node.js/Express.js to pull data from them and send it to the front-end for extra security.

  • Custom API acting as a proxy between public APIs and the front-end
  • API security using CORS, private key, and rate-limiting per IP
  • Custom middleware to verify the private key, apply rate limiting, and add custom fields to the JSON response

Clipboard Landing Page

  • TypeScript
  • Vite.js
  • React
  • Material UI
  • AOS

This project's layout is done entirely using Material UI. I've also added reveal animations, scroll snapping, and full page navigation. you can check my process in this article.

  • Material UI Customization using TypeScript
  • Full page navigation and scroll snapping
  • Smooth animations using AOS library

More Projects

GitHub

I have many more projects on my GitHub account. make sure to check it out.

Frontend Mentor

I regularly do coding challenges on frontendmentor.io. you can see my progress over time.