This is a React-based web application that helps orphanages manage and track their wish list items. The app is designed to be simple and user-friendly, allowing staff members to easily add items, set budgets, and view top requested items.
- ๐งพ Wish List Management: Add, increment, or delete items with ease.
- ๐ธ Budget Tracking: Set and update the total budget. Real-time display of total spent and remaining budget.
- ๐ Top Requested Items: Automatically tracks and displays the top 3 most requested items.
- ๐พ Persistent Storage: Uses
localStorage
to ensure data (wish list and budget) persists across sessions. - ๐ฑ Responsive Design: Fully responsive, providing a smooth experience on both desktop and mobile devices.
- React (with JSX): For building the user interface.
- TypeScript: Ensuring type safety and improving maintainability.
- Tailwind CSS: For modern, responsive design.
- Lucide React: For high-quality icons and a polished look.
- LocalStorage: For data persistence across sessions.
src/
โโโ components/
โ โโโ BudgetDisplay.tsx
โ โโโ BudgetEntry.tsx
โ โโโ ItemEntry.tsx
โ โโโ Sidebar.tsx
โ โโโ WishList.tsx
โโโ App.tsx
โโโ index.tsx
-
Clone the repository:
git clone https://github.com/anandhu2311c/wishboard.git
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
The app is ready for easy deployment using platforms like Netlify or Vercel. Just connect your repository, and the app will be automatically deployed and hosted.
- ๐ Add user authentication for secure access.
- ๐ท๏ธ Implement categories or tags for better item organization.
- โฐ Add due dates and reminders for wish list items.
- ๐ก Integrate a backend API for centralized data management.
This project showcases modern web development practices, including React hooks, TypeScript for type safety, and a component-based architecture. The use of Tailwind CSS for responsive design and localStorage for data persistence makes it a scalable and user-friendly solution for managing resources in an orphanage.
Developed by Anandhu