CIN
CIN is a modern web platform for NGOs and organizations in Myanmar, focused on agriculture and community development. The project is built for scalability, security, and ease of content management.
Tailwind CSS
shadcn
Strapi
NextJs
ReactJs
TypeScript
MySQLOverview
CIN is a modern web platform for NGOs and organizations in Myanmar, focused on agriculture and community development. The project is built for scalability, security, and ease of content management.
Technology & Stack
-
Frontend
- Next.js 15 (App Router)
- React 18
- TypeScript
- Tailwind CSS
- MDX for dynamic content
- Shadcn UI components
-
Backend
- Strapi v5 (Headless CMS)
- Node.js 22
- MySQL 8 (mysql2)
- Custom Strapi plugins (Geo fields, oEmbed, etc.)
-
DevOps & Tooling
- pnpm for package management
- ESLint & Prettier for code quality
Features
-
Content Management
- Dynamic page creation with MDX and Strapi
- Rich media support (images, videos, oEmbed)
- Custom fields (Geo location, social links, etc.)
- Role-based access control for admin and users
-
Geo Information Privacy
- All geo-location data is strictly private.
- Only authenticated and authorized users can view geo information in the client application, ensuring sensitive location data is protected for security and privacy.
-
Frontend Experience
- Responsive design for desktop and mobile
- SEO metadata and Open Graph integration
- Custom favicon and branding
- Accessibility best practices (axe, sr-only, etc.)
- Google Analytics integration
-
API & Data
- REST endpoints
- Pagination, filtering, and search
- Real-time updates via hot reload (pnpm link for plugins)
- Secure CORS and Content Security Policy
-
User Features
- Sign-in with privacy policy link
- Social media links with accessible icons
- Dynamic navigation and footer
- Error handling and fallback UI for API downtime
Highlights
-
Custom Strapi Plugins
- Developed geo-location and oEmbed plugins for enhanced content types.
-
Type-Safe GraphQL
- Apollo Client with TypeScript for robust, type-safe data fetching.
-
Accessibility
- All interactive elements have discernible names and keyboard support.
-
Admin Experience
- Easy-to-use content builder, custom fields, and plugin management.