Mmiri-Anyi is a community-driven civic issues reporting platform built with Next.js. The application connects citizens with local authorities, enabling people to detect, report, and resolve everyday problems in their communities including water issues, road potholes, street lighting, and waste management.
- Issue Reporting - Report various civic problems including water issues, road damage, lighting problems, and waste management
- Community Engagement - Connect citizens with local authorities for faster issue resolution
- Issue Tracking - Monitor the status and progress of reported issues
- Multi-category Support - Handle diverse civic problems from infrastructure to utilities
- Location-based Reporting - GPS-enabled issue reporting for precise problem identification
- Dashboard & Analytics - Track community issues and resolution patterns
- Mobile Responsive - Report and track issues from any device
Frontend: Next.js with React 19 and Tailwind CSS Backend: Next.js API Routes Styling: Tailwind CSS v4 Fonts: Geist Sans and Geist Mono
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone <repository-url>
cd communifi- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser to see the application.
communifi/
├── app/ # Next.js App Router
│ ├── api/ # API routes (backend)
│ ├── components/ # Reusable UI components
│ ├── dashboard/ # Dashboard pages
│ ├── monitoring/ # Water monitoring pages
│ ├── analytics/ # Analytics and reports
│ ├── globals.css # Global styles
│ ├── layout.js # Root layout
│ └── page.js # Home page
├── public/ # Static assets
├── lib/ # Utility functions and configurations
└── README.md
The backend API is built using Next.js API Routes and provides the following endpoints:
GET /api/issues- Retrieve reported civic issuesPOST /api/issues- Submit new issue reportsGET /api/categories- Get issue categories (water, roads, lighting, waste, etc.)GET /api/status- Check issue resolution statusPOST /api/status- Update issue statusGET /api/locations- List all reporting locationsPOST /api/locations- Add new reporting location
This project uses Tailwind CSS v4 for styling with a custom design system:
- Colors: Custom color palette optimized for civic engagement UI
- Typography: Geist font family for modern, clean text
- Components: Responsive design components for issue reporting and tracking
- Dark Mode: Built-in dark mode support
Mmiri-Anyi includes interactive charts and graphs for:
- Issue reporting trends over time
- Category-wise problem analysis
- Resolution time tracking
- Community engagement metrics
- Geographic distribution of issues
- Input validation and sanitization
- Rate limiting on API endpoints
- Secure data transmission
- Environment variable configuration for sensitive data
The easiest way to deploy Mmiri-Anyi is using the Vercel Platform:
- Push your code to GitHub
- Connect your repository to Vercel
- Configure environment variables
- Deploy with automatic CI/CD
Mmiri-Anyi can be deployed on any platform that supports Next.js:
- Netlify
- AWS Amplify
- Railway
- DigitalOcean App Platform
Refer to the Next.js deployment documentation for detailed instructions.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions:
- Create an issue in the GitHub repository
- Check the documentation
- Contact the development team