Garden Gnomes Manager

A React-based single page application for managing a collection of garden gnomes. Built with TypeScript, Redux Toolkit, and modern CSS.

Features

• Gnome Management: View, create, edit, and delete garden gnomes
• List and Grid Views: Switch between table and card layouts
• Filtering: Search gnomes by name
• Group Management: Assign gnomes to groups
• Export Functionality: Export gnome data in CSV or XLSX format
• Settings: Configure display preferences
• Contact Form: Get in touch (demo functionality)
• Responsive Design: Works on desktop and mobile devices

Technology Stack

• Frontend: React 18 with TypeScript
• State Management: Redux Toolkit
• Styling: CSS3 with modern design patterns
• HTTP Client: Axios
• Export: Factory pattern implementation

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

3. Open http://localhost:3000 to view it in the browser.

Project Structure

src/
├── components/          # React components
│   ├── GnomeList.tsx   # List view component
│   ├── GnomeGrid.tsx   # Grid view component
│   ├── GnomeDetail.tsx # Detail/edit view
│   ├── Contact.tsx     # Contact form
│   ├── Settings.tsx    # Settings page
│   ├── ExportModal.tsx # Export functionality
│   └── Navigation.tsx  # Navigation component
├── store/              # Redux store
│   ├── index.ts        # Store configuration
│   ├── gnomesSlice.ts  # Gnomes state management
│   ├── groupsSlice.ts  # Groups state management
│   └── settingsSlice.ts # Settings state management
├── services/           # API services
│   └── api.ts         # HTTP client configuration
├── types/              # TypeScript interfaces
│   └── index.ts       # Type definitions
└── App.tsx            # Main application component

API Integration

The application expects a backend API with the following endpoints:

• GET /api/gnomes - Get all gnomes
• GET /api/gnomes/:id - Get specific gnome
• POST /api/gnomes - Create new gnome
• PUT /api/gnomes/:id - Update gnome
• DELETE /api/gnomes/:id - Delete gnome
• GET /api/groups - Get all groups
• POST /api/gnomes/:id/groups/:groupId - Link gnome to group
• DELETE /api/gnomes/:id/groups/:groupId - Unlink gnome from group

Features Implemented

✅ List View: Table layout with all gnome properties
✅ Grid View: Card layout with photos
✅ Filtering: Search by name
✅ CRUD Operations: Create, read, update, delete gnomes
✅ Group Management: Assign/unassign gnomes to groups
✅ Export Function: CSV and XLSX export with factory pattern
✅ Settings: Toggle total count and price display
✅ Contact Form: Input fields for telephone, email, and message
✅ Responsive Design: Mobile-friendly interface
✅ Redux Architecture: State management with Redux Toolkit

Version

1.0.0

License

This project is created as a practice work for demonstrating React and Redux skills.