An open API service indexing awesome lists of open source software.

https://github.com/4cecoder/inspector

Inpsector: Next.js app
https://github.com/4cecoder/inspector

Last synced: 6 months ago
JSON representation

Inpsector: Next.js app

Awesome Lists containing this project

README

          

# EBS Inspector - Enterprise Property Inspection Platform

A modern, enterprise-ready B2B SaaS platform for property inspection professionals, built with Next.js 15, TypeScript, and shadcn/ui. This comprehensive solution streamlines property inspection workflows with professional reporting, team collaboration, and advanced analytics.

## ✨ Features

### 🏠 Core Platform
- **Modern Landing Page** - Vercel/AceternityUI inspired design with smooth animations
- **Comprehensive Dashboard** - Enterprise-grade property management interface
- **Property Detail Pages** - Detailed inspection tracking with photo galleries
- **Reports Management** - Professional report generation and sharing
- **Team Collaboration** - Multi-user support with role-based access
- **Mobile-First Design** - Responsive across all devices

### 🎨 Design System
- **shadcn/ui Components** - Modern, accessible UI components
- **Framer Motion Animations** - Smooth micro-interactions and transitions
- **Tailwind CSS** - Utility-first styling with custom design tokens
- **Dark/Light Mode Ready** - Built-in theme switching support
- **Accessibility First** - WCAG compliant components

### 🔐 Authentication & Security
- **Clerk Integration Ready** - User authentication and organization management
- **Role-Based Access Control** - Granular permissions system
- **Enterprise Security** - Bank-level security features
- **Compliance Ready** - GDPR, SOC2, and industry standards

### 📊 Business Features
- **Pricing Plans** - Flexible subscription tiers
- **Case Studies** - Client success stories and testimonials
- **Blog & Documentation** - Content management system
- **Analytics Dashboard** - Performance metrics and insights
- **API Integration** - RESTful API for third-party integrations

## 🚀 Tech Stack

### Frontend
- **Next.js 15** - App Router with React Server Components
- **TypeScript** - Type-safe development
- **Tailwind CSS** - Utility-first CSS framework
- **shadcn/ui** - Modern component library
- **Framer Motion** - Animation library
- **Lucide React** - Icon library

### Backend & Infrastructure
- **Next.js API Routes** - Serverless functions
- **Clerk** - Authentication and user management
- **Convex** - Real-time database (ready for integration)
- **Vercel** - Deployment and hosting
- **Stripe** - Payment processing (ready for integration)

### Development Tools
- **ESLint** - Code linting
- **Prettier** - Code formatting
- **TypeScript** - Static type checking
- **Tailwind CSS** - Styling

## 📁 Project Structure

```
├── app/ # Next.js App Router
│ ├── (marketing)/ # Public marketing pages
│ │ ├── page.tsx # Landing page
│ │ ├── pricing/ # Pricing page
│ │ ├── features/ # Features showcase
│ │ ├── case-studies/ # Client testimonials
│ │ └── blog/ # Blog and articles
│ ├── (auth)/ # Authentication pages
│ │ ├── signin/ # Sign in page
│ │ └── signup/ # Sign up page
│ ├── (app)/ # Protected application pages
│ │ ├── dashboard/ # Main dashboard
│ │ ├── properties/ # Property management
│ │ └── reports/ # Reports management
│ └── api/ # API routes
├── components/ # Reusable components
│ ├── ui/ # shadcn/ui components
│ └── navigation.tsx # Main navigation
├── lib/ # Utility functions
│ └── utils.ts # Common utilities
├── docs/ # Documentation
└── public/ # Static assets
```

## 🛠 Getting Started

### Prerequisites
- Node.js 18+ or Bun 1.0+
- Git

### Installation

1. **Clone the repository**
```bash
git clone
cd ebs-inspector
```

2. **Install dependencies**
```bash
npm install
# or
bun install
```

3. **Start development server**
```bash
npm run dev
# or
bun run dev
```

4. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000)

### Environment Setup

Create a `.env.local` file in the root directory:

```env
# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Clerk Authentication (Optional - for production)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret

# Convex Database (Optional - for production)
NEXT_PUBLIC_CONVEX_URL=your_convex_url
CONVEX_DEPLOYMENT=your_convex_deployment
```

## 🎨 Design System

### Components
The project uses shadcn/ui components with custom styling:

- **Button** - Various styles and sizes
- **Card** - Content containers
- **Input** - Form inputs
- **Badge** - Status indicators
- **Avatar** - User profile images
- **Dialog** - Modal dialogs
- **Tabs** - Content organization
- **Progress** - Progress indicators

### Color Palette
- **Primary**: Blue (#2563eb) to Indigo (#4f46e5)
- **Secondary**: Slate (#64748b)
- **Success**: Green (#16a34a)
- **Warning**: Yellow (#eab308)
- **Error**: Red (#dc2626)
- **Neutral**: Gray scale

### Typography
- **Headings**: Geist Sans (Bold, Semibold)
- **Body**: Geist Sans (Regular, Medium)
- **Code**: Geist Mono

## 📱 Pages Overview

### Marketing Pages
- **Landing Page** (`/`) - Hero section, features, testimonials
- **Pricing** (`/pricing`) - Subscription plans and features
- **Features** (`/features`) - Detailed feature showcase
- **Case Studies** (`/case-studies`) - Client success stories
- **Blog** (`/blog`) - Articles and insights

### Application Pages
- **Dashboard** (`/dashboard`) - Main property overview
- **Property Detail** (`/properties/[id]`) - Individual property inspection
- **Reports** (`/reports`) - Report management and generation

### Authentication Pages
- **Sign In** (`/signin`) - User authentication
- **Sign Up** (`/signup`) - User registration

## 🚀 Deployment

### Vercel (Recommended)

1. **Connect your repository to Vercel**
2. **Set environment variables** in Vercel dashboard
3. **Deploy** - Automatic deployments on push to main branch

### Manual Deployment

```bash
# Build the application
npm run build

# Start production server
npm start
```

## 🔧 Customization

### Branding
- Update colors in `tailwind.config.js`
- Replace logo in `components/navigation.tsx`
- Modify company information in metadata

### Content
- Blog posts live in `content/blog/*.mdx`
- New posts automatically appear on `/blog`
- Each post is rendered at `/blog/[slug]`
- Update testimonials in case studies
- Modify pricing plans in pricing page
- Customize feature descriptions

### Styling
- Modify global styles in `app/globals.css`
- Update component styles in `components/ui/`
- Customize animations in component files

## 📊 Performance

- **Lighthouse Score**: 95+ (Performance, Accessibility, Best Practices, SEO)
- **Core Web Vitals**: Optimized for LCP, FID, CLS
- **Bundle Size**: Optimized with tree shaking and code splitting
- **Images**: Next.js Image optimization
- **Fonts**: Optimized font loading

## 🔒 Security

- **Authentication**: Clerk integration ready
- **Authorization**: Role-based access control
- **Data Protection**: GDPR compliant
- **HTTPS**: SSL/TLS encryption
- **CSP**: Content Security Policy headers

## 📈 Analytics

Ready for integration with:
- **Vercel Analytics** - Performance monitoring
- **PostHog** - Product analytics
- **Google Analytics** - Traffic analysis
- **Mixpanel** - User behavior tracking

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🆘 Support

For support and questions:
- Create an issue in the repository
- Check the documentation in the `docs/` folder
- Review the component library at [shadcn/ui](https://ui.shadcn.com/)

## 🙏 Acknowledgments

- [shadcn/ui](https://ui.shadcn.com/) for the amazing component library
- [Vercel](https://vercel.com/) for the deployment platform
- [Tailwind CSS](https://tailwindcss.com/) for the styling framework
- [Framer Motion](https://www.framer.com/motion/) for animations
- [Lucide](https://lucide.dev/) for the icon library

---

**Built with ❤️ for property inspection professionals**