Skills
Projects
Dynamic Form Builder
Dynamic Form Builder using React, leveraging useReducer for state management to dynamically add and handle form fields. It features a clean UI with ShadCN components, allowing users to select from various input types, customize labels, and set placeholders. The form preview updates in real-time, and form data is processed on submission with a formatted alert. It’s intuitive, scalable, and designed for seamless user interaction, showcasing my focus on functionality and user experience.
Todo List with Mark as Completed
The TodoApp component is a fully functional todo list application that allows users to: 1. Add new tasks. 2. Edit existing tasks. 3. Delete individual tasks or all tasks at once. 4. Mark tasks as completed or incomplete using checkboxes. 5. Interact with a responsive and styled UI. It uses React hooks (useReducer and useState) for state management, and third-party libraries like uuidv4 for unique task IDs and ShadCN for UI components.
Form Validation using useReducer Hook
This is a React-based Form Validation component I developed using useReducer for state management. It’s designed to validate email and password inputs with custom logic—checking for email format, disposable domains, and password strength (6+ characters, letters, and numbers). Errors are displayed conditionally via a reducer-driven state, and the form submits only when valid. Built with ShadCN UI, it’s a concise, reusable solution I created for secure and user-friendly form handling
Blog Cards with Pagination
This is a paginated blog card list I engineered with React, leveraging useReducer and useRef for state control. It’s built to display blog posts from a dataset, sliced into groups of eight, with dynamic pagination handled via a reducer. The component features responsive card layouts and a custom pagination UI using ShadCN components. I designed it to efficiently update the list on navigation, ensuring a seamless browsing experience for users.
Expandable Blog Cards
This is an infinite-load blog card list I constructed using React and useReducer for state management. It’s designed to initially display eight blog posts from a dataset, with a Load More button triggering the reducer to append the next eight entries. The responsive grid layout adapts across screen sizes, showcasing each post with an ImprovedBlogCard component. I built it to provide a smooth, incremental content-loading experience for users.
Canvas Drawing Board
This is a drawing board I built with React, leveraging useRef and useState for real-time functionality. It uses an HTML5 canvas (800x600) where the getCoordinates logic calculates mouse positions relative to the canvas. The startDrawing function initiates strokes on onMouseDown, draw tracks movement with onMouseMove, and onMouseUp/onMouseLeave stop it. The useEffect hook updates the 2D context’s strokeStyle with a color picker, enabling dynamic brush color changes for freehand sketching.
Video Player with Progress Tracking
This is a video player I built using React with useRef and useState for dynamic control. It’s designed with a custom timeline, where progress updates every 200ms via setInterval, and users can click to seek. The play/pause toggle and reset functionality are handled with button events, adjusting the video’s state. Styled minimally with a progress bar, it’s a lightweight, interactive component I created for seamless video playback control.
WebSocket Pingback
This is a WebSocket-based chat component I crafted with React, using useRef and useState for state handling. It connects to the Postman Echo WebSocket API (wss://ws.postman-echo.com/raw), which echoes messages back in real time. The logic listens for incoming messages via socket.addEventListener, appending them to a list, while the handleSubmit function sends user input to the server. Styled with ShadCN UI, it’s a simple, live chat interface I built for instant communication.
| Project Name |
|---|
UseEffect Examples |
Fetch Data on Mount |
Set Interval |
Update Document Title on State Change |
Window Resize Listener |
WebSocket Basics |
ChatApp using WebSocket |
UseRef Examples |
Basic UseRef |
Timeout Function |
AutoFocus |
Render Count |
Dynamic Height Textarea |
Click Outside to Close |
Calculator App |
Counter App |
Basic Todo App |
Theme Toggle |
Light and Dark Bulb App |
Number Doubler App |
Show/Hide Text App |
Step Increment/Decrement Counter |
Shopping Cart Manager |
Simple Tab Switcher |
Accordion Component |
Multi-Input Form State Manager |
Light & Dark Mode Toggle |
Counter with Undo and Redo |
Toggle Favorite Items |