Project archive

Everything I built to get here

The learning trail — from static pages in 2022 to full-stack applications. Kept public on purpose; the progression is part of the story.

See production work

Image Gallery

image can be drag and droppable. use react dnd-kit for drag and drop feature. first image is set to feature image. image can be position both vertically and horizontally.

HTMLTailwind CSSReactReact Router

Live·Source

Product Details Page

Single page product details design. user can magnify product image.

HTMLTailwind CSSNext.jsPure React Carousel

Live·Source

task-management-app

user can add to-do task, edit and delete them. can select status options. use MobX state manager for state management. store task data in local storage.

HTMLTailwind CSSNext.jsMobX

Live·Source

New

Ningjing Yoga Club

Developed a dynamic dashboard allowing users to register as students, select and enroll in classes with Stripe payment integration. Empowered admins to manage users, roles, and class approvals, while instructors could add and update classes. Implemented a sleek dark theme.

HTMLTailwind CSSReactReact Router

Live·Source

New

Cuddle Corner - Animal Toys For Kidz

Implemented user registration and login functionality, allowing registered users to add and manage toy details. Implemented dynamic fetching, query routing, sorting, and indexing of toy information on the backend using Express.js and MongoDB technologies.

HTMLTailwind CSSReactReact Router

Live·Source

New

Chinese cuisine recipe blog

Developed Milong Chinese cuisine recipe blog featuring 6 chefs and around 30 recipes with an appealing UI for easy navigation. Incorporated Firebase authentication for registration and login, supporting email/password and social login options.

HTMLTailwind CSSReactReact Router

Live·Source

Job Hunter - A job seekers website

Implemented Good UI design, on homepage applied job info card from local api, each job details can generated job details, applied job store on local storage and can fetch it from api

HTMLTailwind CSSReactReact Router

Live·Source

Rest Countries - Find country details

user can navigate region based country or search by country name.

HTMLTailwindReactReact Router

Live·Source

Aargon's Blog - a tech blog

Applied react state, useEffect for fetching data from local api, used react toastify for bookmark button. Used local storage for storing bookmark item.

HTMLTailwindReactReact toastify

Live·Source

Pixabay Nature Image Slider

Can show different type of image (backgrounds, fashion, nature, health, religion, places, animals, food, sports, travel, buildings, business, music) from pixabay API

HTMLCSSBootstrapVanilla Javascript

Live·Source

AI Universe - Recent AI Tech

Dynamically Generate AI features and their release date In modal - it shown their details, pricing plan, Features and Integrations

HTMLCSSTailwindVanilla Javascript

Live·Source

Phone Hunter Gallery

Auto Generated Phone Details from API, Show Phone details on Modal

HTMLCSSBootstrapVanilla Javascript

Live·Source

URL Shortener

Can shorten any URL Can copy shorten url

HTMLCSSTailwindVanilla Javascript

Live·Source

Geometry Genius - Geometry Calculation

Random Background Color change on Hover Calculate area of Triangle, Rectangle, Parallelogram, Rhombus, Pentagon, Ellipse

HTMLCSSTailwindVanilla Javascript

Live·Source

Text Editor

Can make text Bold, Underline, Italic, lowercase, uppercase, and can change font-size, text-align, color

HTMLCSSTailwindVanilla Javascript

Live·Source

Tea House - Landing Page

Contain Tea house header part Show Different types of tea in card section Tea Quality and super clients section Tea related news and events section footer section

HTMLCSSBootstrap

Live·Source

Demo Legal Solutions - Landing Page

In this webpage I use bootstrap components - Toggler Navbar,Dropdown Menu, Modal, Card, Carousel, Accordion

HTMLCSSBootstrap

Live·Source

Convention Center - Landing Page

In this webpage I use bootstrap components - Toggle Navbar, Carousel, Toasts, Badge, Card, Accordion

HTMLCSSBootstrap

Live·Source

G3 Architects - Landing Page

A Architechtural firm based company website. it contains their features, services, sponsors, projects and client review.

HTMLCSS

Live·Source

Influencer Gadgets - Landing Page

Photography based website. included Photographers gadget in a card section, sponsors on a slider section and a footer

HTMLCSS

Live·Source

New Year Resolution - Landing Page

A New year visionary plan website.

HTMLCSS

Live·Source

Donation - Landing Page

A Charity foundation website. Include Header, Donation, Plan, Card and Update section.

HTMLCSS

Live·Source

Portfolio Website - Landing Page

A Web Developer portfolio built on HTML, CSS. Include Header section, About Me, Skills, Contact Area.

HTMLCSS

Live·Source