A full-featured, responsive product management system built from scratch with React, and Tailwind CSS .
lastdemocrud.mp4
CRUD App is a complete front-end product management application that delivers a full data management experience. Every feature — from creating and searching products, to editing and deleting — is fully implemented with real validation, persistent storage, and smooth animations .
This project was built entirely from scratch with no UI component libraries.
https://cru-dsystem-rxb4.vercel.app/
- Fill in Title, Price, Taxes, Ads, Discount, Count, and Category
- Auto-calculates Total in real time as you type
- $ sign shown next to every price field
- Create multiple copies of the same product using the Count field
- All fields validated before submission
- Click Edit on any row to fill the form with existing data
- Count field hidden during edit mode
- Cancel button appears to discard changes
- Delete individual products with the Del button
- Delete All button appears when products exist — shows count in brackets
- All deletions immediately reflected in localStorage
- Search by Title or Category — toggle between modes
- Live filtering as you type — no submit needed
- All products saved to localStorage automatically
- Data survives page refresh and browser restarts
- 10 default products pre-loaded on first visit
- Toggle between deep ocean dark and soft ice light
- Smooth transition on every element
- Custom PNG icons for each mode
- Typewriter effect on the title — types and deletes in a loop
- Neon breath animation on subtitle — glows and pulses
- Fade-up entrance on all cards with staggered delays
- Lottie animations on section labels and Create button
React is the core UI framework. The app is split into clean reusable components — TopBar, FormCard, SearchCard, ProductTable. React hooks useState, useEffect, useRef, and useCallback are used throughout.
Tailwind v4 handles all styling via utility classes. The full design system — colors, shadows, gradients, animations — is defined in the @theme block inside index.css. No separate config file needed for customization.
Three lottie animations bring the UI to life — plus, create, and searching animations loaded from local .lottie files.
All product data is persisted using the browser's built-in localStorage. No backend, no database, no server required.
A custom local font loaded from public/fonts/ using @font-face. All 8 weights registered and applied globally via Tailwind's --font-sans theme token.
This project is licensed under the MIT License - see the LICENSE file for details.
**Built with ❤️ using React + Tailwind CSS **