PHORM is a cutting-edge, map-based business directory application designed specifically for the Prince Hall Masonic community. Our platform connects users with businesses owned by Prince Hall Freemasons, fostering economic empowerment and community support.
Live Demo | Report Bug | Request Feature
- About The Project
- Key Features
- Technology Stack
- Architecture
- Getting Started
- Development Workflow
- API Documentation
- Testing
- Deployment
- Roadmap
- Contributing
- License
- Contact
PHORM (Prince Hall's Online Registry of Merchants) is a specialized business directory application that leverages modern web technologies to create a seamless, interactive experience for users seeking to discover and support businesses owned by Prince Hall Freemasons.
The application combines geospatial mapping, user authentication, and business management features to create a comprehensive platform that serves both business owners and consumers within the Prince Hall Masonic community.
- Interactive Map Interface: Discover businesses through an intuitive Google Maps integration with custom markers and clustering
- Advanced Search & Filtering: Find businesses by name, category, location, and more
- User Authentication: Secure login via email, phone, or social providers using Firebase Authentication
- Business Management: Create, edit, and manage business listings with detailed information
- User Profiles: Customizable user profiles with membership information and class year connections
- Responsive Design: Seamless experience across desktop, tablet, and mobile devices
- Real-time Updates: Instant updates to listings and user data through Firebase integration
- Verification System: Business verification process to ensure authenticity
PHORM is built with a modern, scalable technology stack:
- Next.js: React framework for server-rendered applications
- TypeScript: Strongly-typed JavaScript for enhanced developer experience
- Chakra UI: Component library for accessible, responsive UI
- SWR: React Hooks for data fetching with caching and revalidation
- React Hook Form: Performant, flexible forms with easy validation
- Google Maps API: Interactive mapping with custom markers and clustering
- Framer Motion: Animation library for enhanced user experience
- Firebase: Authentication, Firestore database, and cloud functions
- Next.js API Routes: Serverless API endpoints for data operations
- Zod: TypeScript-first schema validation
- Vercel Edge Functions: Serverless computing for API functionality
- Vercel: Deployment platform with CI/CD integration
- GitHub Actions: Automated workflows for testing and deployment
- ESLint & Prettier: Code quality and formatting
- Jest & React Testing Library: Comprehensive testing suite
- Husky & lint-staged: Pre-commit hooks for code quality
PHORM follows a modern, component-based architecture:
PHORM/
├── components/ # Reusable UI components
│ ├── forms/ # Form components
│ ├── profile/ # Profile-related components
│ └── ...
├── contexts/ # React context providers
├── db/ # Database operations and schemas
├── hooks/ # Custom React hooks
├── pages/ # Next.js pages and API routes
│ ├── api/ # API endpoints
│ └── ...
├── public/ # Static assets
├── styles/ # Global styles
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
The application uses a hybrid rendering approach with:
- Static Generation (SSG): For content that can be pre-rendered
- Server-Side Rendering (SSR): For dynamic, personalized content
- Client-Side Rendering: For interactive components and real-time updates
- Node.js (v14 or later)
- npm or Yarn
- Google Maps API key
- Firebase project
-
Clone the repository
git clone https://github.com/Kiel-H-Byrne/PHORM.git cd PHORM -
Install dependencies
npm install # or yarn install -
Set up environment variables
cp .env.example .env.local # Edit .env.local with your API keys and configuration -
Start the development server
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser
- Components: Reusable UI elements following atomic design principles
- Pages: Next.js pages with data fetching and layout composition
- API Routes: Serverless functions for data operations
- Contexts: Global state management with React Context API
- Hooks: Custom hooks for shared logic and state management
PHORM uses Chakra UI for component styling with:
- Theme customization for consistent branding
- Responsive design utilities
- Accessibility-first approach
- Dark/light mode support
- Local State: React useState for component-level state
- Global State: React Context for authentication and shared state
- Server State: SWR for data fetching, caching, and synchronization
PHORM provides a comprehensive API for data operations:
/api/auth/*: Authentication endpoints
/api/listings: CRUD operations for business listings/api/listings/[id]: Single listing operations
/api/users: User management endpoints/api/users/[id]: Single user operations/api/users/class/[year]: Class year member operations
/api/connections: User connection management
PHORM includes a comprehensive testing suite:
# Run all tests
npm test
# Run tests in watch mode
npm run test:watch
# Generate coverage report
npm run test:coverageWe use:
- Jest: JavaScript testing framework
- React Testing Library: Component testing
- Mock Service Worker: API mocking
- Cypress: End-to-end testing (planned)
PHORM is deployed on Vercel with:
- Automatic deployments from GitHub
- Preview deployments for pull requests
- Environment variable management
- Edge function support for API routes
See the TODO.md file for a detailed roadmap of upcoming features and improvements.
Contributions are welcome! Please check out our Contributing Guidelines for details on our code of conduct and the process for submitting pull requests.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Kiel H. Byrne - @kielbyrne
Project Link: https://github.com/Kiel-H-Byrne/PHORM
Built with ❤️ for the Prince Hall Masonic community