๐Ÿ  Orphanage Wishboard

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.

๐Ÿš€ Key Features

  • ๐Ÿงพ 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.

๐Ÿ› ๏ธ Technologies Used

  • 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.

๐Ÿ“‚ Folder Structure

src/
โ”œโ”€โ”€ components/
โ”‚   โ”œโ”€โ”€ BudgetDisplay.tsx
โ”‚   โ”œโ”€โ”€ BudgetEntry.tsx
โ”‚   โ”œโ”€โ”€ ItemEntry.tsx
โ”‚   โ”œโ”€โ”€ Sidebar.tsx
โ”‚   โ””โ”€โ”€ WishList.tsx
โ”œโ”€โ”€ App.tsx
โ””โ”€โ”€ index.tsx

๐Ÿ’ป Getting Started

  1. Clone the repository:

    git clone https://github.com/anandhu2311c/wishboard.git
  2. Install dependencies:

    npm install
  3. Start the development server:

    npm run dev
  4. Build for production:

    npm run build

๐ŸŒ Deployment

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.

๐Ÿ”ฎ Future Enhancements

  • ๐Ÿ”’ 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.

๐Ÿ“š Learnings and Best Practices

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