Nathaniel's Event And Decor

🏪What is Nathaniel's Event & Decor?

Nathaniel's Event & Decor is an open-source event planning platform that demonstrates advanced frontend development with dual-interface architecture. This project showcases building complex business applications with React, TypeScript, and TanStack Query, featuring both client-facing showcase and comprehensive admin management systems.

Perfect for developers interested in learning business application architecture, role-based interfaces, advanced state management with TanStack Query, and building professional service websites with admin dashboards.

Learning Focus: This project emphasizes dual-interface architecture, TanStack Query for complex state management, role-based access patterns, and building comprehensive business management tools with modern React patterns.

✨Features

Client-Facing Interface

• Professional Service Showcase - Comprehensive display of wedding, birthday, corporate, and specialty event services
• Interactive Portfolio Gallery - Dynamic gallery with advanced filtering, search capabilities, and high-quality project displays
• Service Management System - Detailed service pages with pricing, features, and direct booking capabilities
• Contact & Inquiry System - Professional contact forms with streamlined inquiry and booking request handling

Admin Management Dashboard

• Comprehensive Business Analytics - Real-time dashboard with key performance indicators and business metrics
• Service & Portfolio Management - Complete CRUD operations for services, pricing, and event portfolio management
• Client Database System - Full client information management with history tracking and communication logs
• Event Planning Tools - Project management interface for ongoing events, schedules, and coordination

✨Advanced Features

• Dual-Interface Architecture - Seamless switching between client and admin experiences within single application
• Role-Based Access Control - Secure admin authentication with permission management
• Real-time State Management - Advanced TanStack Query implementation for complex, interconnected business data
• Responsive Design Excellence - Mobile-first approach with adaptive layouts for all device sizes

🛠️Tech Stack

Frontend Framework

• React 18.3.1 - Modern React with hooks, concurrent features, and automatic batching
• TypeScript 5.5.3 - Complete type safety for enterprise-level business application development
• Vite 5.4.1 - Ultra-fast build tool with optimized development experience and hot module replacement

State Management & Data

• TanStack Query 5.56.2 - Powerful data synchronization, caching, and server state management
• React Hook Form 7.53.0 - Performant forms with comprehensive validation and error handling
• Local Storage - Client-side persistence demonstrating complex business data management
• React Context - Global state for user preferences, authentication, and UI settings

💅UI & Styling

• Tailwind CSS 3.4.11 - Utility-first CSS framework for consistent, professional design systems
• shadcn/ui - High-quality, accessible component library built on Radix UI primitives
• Lucide React - Comprehensive icon library with consistent professional styling
• Custom Design System - Carefully crafted design tokens and component patterns for business applications

🔧Development Tools

• React Router DOM 6.26.2 - Advanced routing with nested layouts and protected routes
• Radix UI - Accessibility-first primitive components for professional interfaces
• ESLint & Prettier - Code quality enforcement and consistent formatting

🚀Getting Started

Prerequisites

• Node.js 18+ and npm
• Git

Clone and Setup

1. Clone the repository

git clone https://github.com/cjjutba/nathaniels-event-decor.git
cd nathaniels-event-decor

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Access the application Navigate to http://localhost:8080 to see the client interface.

5. Admin Dashboard Access

• Visit /admin for the admin dashboard
• Username: admin
• Password: admin123

🏗️Build Commands

# Development
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

🤝Contributing

This project welcomes contributions from developers interested in business applications, dual-interface design, and advanced React patterns! Here are areas where you can contribute and learn:

🤝🚀 Beginner-Friendly Contributions

• UI/UX Enhancements - Improve design systems, add animations, or enhance the professional styling
• Accessibility Improvements - Add ARIA labels, improve keyboard navigation, or enhance screen reader support
• Form Enhancements - Add validation patterns, improve user feedback, or create reusable form components
• Responsive Design - Optimize mobile experiences or improve tablet layouts

🤝🔧 Intermediate Contributions

• Dashboard Analytics - Create more sophisticated business metrics and visualization components
• Advanced Filtering - Implement complex search and filtering capabilities for portfolio and services
• Email Integration - Add email functionality for client inquiries and booking confirmations
• Calendar Integration - Implement event scheduling and calendar management features

🤝🎯 Advanced Contributions

• Real Backend Integration - Replace local storage with actual API integration (Node.js, Django, etc.)
• Advanced Authentication - Implement JWT tokens, role-based permissions, and user management
• File Upload System - Add image upload capabilities for portfolio management with cloud storage
• Real-time Features - Implement WebSocket connections for real-time admin notifications and updates

💼Business Logic Contributions

• CRM Features - Advanced client relationship management and communication tracking
• Booking System - Complete booking workflow with payment integration and contract management
• Inventory Management - Decor and equipment tracking for event planning
• Financial Management - Invoice generation, payment tracking, and financial reporting

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/crm-system)
3. Make your changes with clear commit messages
4. Add comprehensive tests for business logic
5. Submit a pull request with detailed description

We encourage business application-focused contributions and provide detailed code reviews to help developers learn enterprise development patterns.

👨‍💻Author

Christian Jerald (CJ) Jutba

• 🌐 Portfolio: https://cjjutba.com/
• 💼 LinkedIn: https://www.linkedin.com/in/cjjutba/
• 🐙 GitHub: https://github.com/cjjutba
• 📧 Email: hello@cjjutba.com