Notion Table Clone

Frontend Developer


Overview:

A Notion-style editable task table featuring drag-and-drop functionality for columns and rows, tag inputs, persistent localStorage, and dark mode support. Built with React, TypeScript, and Vite, and styled using Chakra UI.

Technologies used:
React
TypeScript
Vite
Chakra UI
react-beautiful-dnd
localStorage
highlights:

Implemented drag-and-drop functionality with react-beautiful-dnd.Added dark mode support for better user accessibility.

Images
Notion Table Clone

More Projects

Issue Tracker

A comprehensive full-stack issue tracking application developed with Next.js 15, TypeScript, and Prisma/MySQL. Features include Google OAuth authentication via NextAuth, dynamic dashboards with chart visualizations, advanced filtering, pagination, and complete CRUD operations. Tailwind CSS and Radix UI were utilized for a responsive and accessible UI, while React Query ensured efficient data fetching and state management.

Next.js 15TypeScriptPrismaSupabaseTailwind CSSNextAuthReact QueryRadix UI
GameHub

A dynamic game discovery platform built with React.js, integrating the RAWG API to fetch and display popular games. Features include search functionality, genre-based filtering, infinite scrolling, and a responsive design achieved with Tailwind CSS and Chakra UI. React Query and Axios were employed for efficient data fetching.

React.jsTailwind CSSRAWG APIChakra UIReact QueryAxiosreact-infinite-scroller

An AI-powered image generation and editing tool featuring prompt enhancement and a feedback loop. The backend is developed with FastAPI using the Google GenAI Python SDK, while the Full-Stack is built with Next.js and React. Additional tools like Pydantic, Pillow, and n8n were integrated to handle data validation, image processing, and workflow automation.

FastAPIPythonGoogle GenAI SDKPydanticPillown8nNext.jsReact
JUHUU Marketplace

A marketplace website developed for JUHUU’s IoT-based platform, showcasing a range of services and products. Built with React.js and styled using Tailwind CSS, the site offers a clean and responsive user interface.

React.jsTailwind CSSJavaScript
JUHUU BikeBox Website

A promotional website for JUHUU’s BikeBox product, offering secure bike storage solutions. Developed using HTML, CSS, and JavaScript, the site delivers essential product information and contact options.

HTMLCSSJavaScript
Rentistan

A React Native rental management app designed to facilitate communication between tenants and property managers. Features include property listings, messaging, and user authentication, all backed by Firebase services. Expo and React Navigation were utilized for streamlined development and navigation.

React NativeExpoFirebase AuthFirestoreReact Navigation
Notion Table Clone

A Notion-style editable task table featuring drag-and-drop functionality for columns and rows, tag inputs, persistent localStorage, and dark mode support. Built with React, TypeScript, and Vite, and styled using Chakra UI.

ReactTypeScriptViteChakra UIreact-beautiful-dndlocalStorage