diff --git a/README.md b/README.md index a0b2f9f..f8c60a6 100644 --- a/README.md +++ b/README.md @@ -1,477 +1,37 @@ # Atlas Green Morocco -## Strategic Framework & Deployment Playbook for Building a Green Energy / Hydrogen Business in Morocco (2026–2035) -[![React](https://img.shields.io/badge/React-18-blue)](https://react.dev) -[![Vite](https://img.shields.io/badge/Vite-4.5-purple)](https://vitejs.dev) -[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.4-06B6D4)](https://tailwindcss.com) -[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-3178C6)](https://www.typescriptlang.org) -[![Docker](https://img.shields.io/badge/Docker-Ready-2496ED)](https://docker.com) +Interactive grant strategy platform for building renewable energy and green hydrogen businesses in Morocco — deployed at https://grants.degelas.be. ---- +## Layout -## What is Atlas Green Morocco? +``` +grants/ +├── src/ # React + Vite frontend (single-file SPA) +│ ├── components/ # UI sections (Hero, Position, Grants, Studio, Vault, …) +│ ├── data/ # Grant programs, zones, markets, deployment phases +│ ├── i18n/ # Trilingual strings (EN / FR / Darija) +│ └── lib/ # Analytics, Degelas API, AI, vault, profile +├── server/ # Express API proxy (AI generation, vault persistence) +├── index.html # Entry point with Umami analytics snippet +├── Dockerfile # Multi-stage: frontend-builder → nginx / api-builder → node +└── docker-compose.yml # Frontend (:8081) + API server (:3001) +``` -**Atlas Green Morocco** is a production-ready, interactive strategic playbook for entrepreneurs building renewable energy, green hydrogen, or industrial decarbonization businesses in Morocco. +## What's NOT in this repo -Instead of static PDF documents, the playbook is a **modern web application** that guides founders through: +- `.env` — API keys for OpenAI, Degelas, etc. (see `.env.example`) +- `node_modules/`, `dist/`, `dist-server/`, `generated_docs/` -1. **5 Business Models**: From energy software to hydrogen production -2. **7 Deployment Phases**: 12–36 month roadmap from idea to market dominance -3. **4 Opportunity Categories**: Software, infrastructure, desalination, manufacturing -4. **Specific Actions**: 100+ tactical steps with timelines, resources, and success metrics -5. **Practical Guidance**: Checkpoints, pitfalls, and daily execution checklists - ---- - -## Why Atlas Green Morocco? - -### The Opportunity - -Morocco is not just "another emerging market." It is: -- **The energy bridge** between Africa and Europe -- **A green industrial platform** with world-class renewable potential -- **A future hydrogen exporter** to the EU - -But building a hydrogen production company directly requires €50M+, extreme complexity, and massive regulatory risk. **The smartest startups don't produce hydrogen—they enable it.** - -### The Problem - -Existing resources are: -- ❌ Generic (not Morocco-specific) -- ❌ Static (PDF files, outdated) -- ❌ Academic (strategy without execution tactics) -- ❌ Incomplete (no daily checklists or deployment timeline) - -### The Solution - -**Atlas Green Morocco** is: -- ✅ Morocco & green hydrogen-specific -- ✅ Interactive, web-based, always up-to-date -- ✅ 100% tactical (actions, timelines, resources) -- ✅ Complete (strategy + playbook + checklists + Docker deployment) - ---- - -## Features - -### 📊 Strategic Analysis -- **5 Business Models Comparison**: Capital requirements, complexity, scalability, recommendation -- **4 Opportunity Categories**: A–D ranked by capital needs and market potential -- **Interactive Selection**: Click each model to explore detailed analysis - -### 🗺️ Geographic Strategy -- **5 Moroccan Free Zones**: Tangier, Kenitra, Casablanca, Dakhla (future) -- **Tax Jurisdiction Guidance**: UAE, Netherlands, Luxembourg, Estonia holding structures -- **Investment Incentives**: Tax exemptions, subsidies, customs benefits - -### 📋 12–36 Month Deployment Playbook -Detailed phase-by-phase roadmap: -- **Phase 0**: Foundation & Strategy Validation (weeks 1–4) -- **Phase 1**: Legal Structure & Incorporation (weeks 4–8) -- **Phase 2**: Product & Market MVP (weeks 8–20) -- **Phase 3**: Revenue & Customer Traction (weeks 20–32) -- **Phase 4**: Scale & Market Expansion (weeks 32–52) -- **Phase 5**: Seed Funding & Institutional Validation (weeks 48–72) -- **Phase 6**: Product Scale & Infrastructure Build (months 6–15) -- **Phase 7**: Market Dominance & Expansion (months 15–36) - -### 🎯 For Each Phase: -- **Objective**: Clear goal and duration -- **Actions**: 5–6 specific, detailed actions with owners and timelines -- **Checkpoints**: Success criteria that must be met -- **Success Metrics**: Quantified targets (ARR, churn, NPS, etc.) -- **Pitfalls**: Common mistakes to avoid with explanations - -### 📱 Responsive Design -- **Mobile-first**: Works perfectly on phones, tablets, desktops -- **Dark mode support**: Emerald/teal green energy color scheme -- **Smooth navigation**: Sticky header with quick links to all sections -- **Expandable cards**: Click to explore details, collapse to scan overview - -### 🌍 Production-Ready -- **Fully containerized**: Docker + Docker Compose included -- **Nginx configured**: Gzip, security headers, SPA routing, caching -- **Optimized build**: <25MB final image, <100KB gzipped HTML -- **One-command deployment**: `docker compose up -d --build` - ---- - -## Getting Started - -### Prerequisites -- Node.js 18+ -- npm or yarn -- Docker & Docker Compose (for production) - -### Local Development +## Deploy ```bash -# Clone the repository -git clone https://github.com/your-repo/atlas-green-morocco.git -cd atlas-green-morocco - -# Install dependencies -npm install - -# Run development server -npm run dev -# Open http://localhost:5173 - -# Build for production -npm run build - -# Preview production build -npm run preview +docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d ``` -### Production Deployment with Docker +The API server proxies AI (OpenAI-compatible) and Degelas metrics requests. +The frontend is served by nginx on port 8081. -```bash -# Build and run in one command -docker compose up -d --build +## Admin -# Access at http://localhost -# View logs: docker compose logs -f -# Stop: docker compose down -``` - -See [DOCKER_DEPLOYMENT.md](./DOCKER_DEPLOYMENT.md) for detailed deployment guides for: -- VPS (DigitalOcean, Linode, AWS EC2) -- Heroku Container Registry -- AWS ECS -- DigitalOcean App Platform - ---- - -## Project Structure - -``` -atlas-green-morocco/ -├── src/ -│ ├── components/ -│ │ ├── Nav.tsx # Sticky navigation with mobile menu -│ │ ├── Hero.tsx # Hero section with background image -│ │ ├── PositionSection.tsx # Interactive business model selector -│ │ ├── OpportunitiesSection.tsx # 4 opportunity categories (expandable) -│ │ ├── ZonesSection.tsx # Moroccan free zones guide -│ │ ├── PlaybookSection.tsx # Company structure, funding, MVP strategy -│ │ ├── DeploymentPlaybook.tsx # 7-phase deployment guide (expandable) -│ │ ├── MacroSection.tsx # Europe's green energy needs -│ │ ├── IdeasSection.tsx # Top 5 startup ideas -│ │ ├── PathSection.tsx # Recommended practical path (numbered steps) -│ │ ├── Footer.tsx # Footer with branding -│ │ └── Section.tsx # Reusable section wrapper -│ ├── data/ -│ │ ├── deployment.ts # 7 deployment phases with actions, checkpoints, metrics -│ │ └── index.ts # Main business models, opportunities, zones data -│ ├── utils/ -│ │ └── cn.ts # Tailwind class merging utility -│ ├── App.tsx # Main app component -│ ├── main.tsx # React entry point -│ └── index.css # Global Tailwind styles -├── public/ -│ └── images/ -│ └── hero.jpg # AI-generated hero background -├── Dockerfile # Multi-stage Docker build -├── docker-compose.yml # Docker Compose configuration -├── nginx.conf # Nginx server config (gzip, SPA routing, security) -├── .dockerignore # Docker build exclusions -├── package.json # Dependencies and scripts -├── tsconfig.json # TypeScript configuration -├── vite.config.ts # Vite configuration -├── tailwind.config.ts # Tailwind CSS configuration -├── DEPLOYMENT_GUIDE.md # Detailed deployment playbook + checklists -├── FOUNDER_CHECKLIST.md # Daily/weekly action checklist for founders -├── DOCKER_DEPLOYMENT.md # Docker-specific deployment guide -└── README.md # This file -``` - ---- - -## Documentation - -The project includes three comprehensive guides: - -### 1. **DEPLOYMENT_GUIDE.md** (9,000+ words) -Complete 12–36 month execution playbook for founders. Includes: -- Phase-by-phase breakdown with actions, timelines, and success metrics -- Quick reference tables -- Funding by phase -- Morocco advantages to leverage -- Pre-launch checklist - -**Use this to**: Understand the full journey and execute tactically. - -### 2. **FOUNDER_CHECKLIST.md** (6,000+ words) -Daily and weekly action checklist for startup founders: -- Week-by-week tasks for each phase -- Specific days for specific actions -- Key metrics to track (daily, weekly, monthly, quarterly) -- Founder self-care reminders -- Pro tips and don'ts - -**Use this to**: Stay accountable and execute consistently. - -### 3. **DOCKER_DEPLOYMENT.md** (4,000+ words) -Production-ready Docker deployment guide: -- Quick start (1-minute local deployment) -- VPS deployment (DigitalOcean, Linode, AWS EC2) -- Cloud platform deployment (Heroku, AWS ECS, DigitalOcean App Platform) -- Docker architecture explanation -- Nginx configuration details -- Troubleshooting and security best practices - -**Use this to**: Deploy the application to production. - ---- - -## Technology Stack - -### Frontend -- **React 18**: UI components and state management -- **TypeScript**: Type-safe code -- **Vite 4.5**: Lightning-fast build tool -- **Tailwind CSS 3.4**: Utility-first CSS framework - -### Production -- **Docker**: Containerization for deployment -- **Nginx Alpine**: Lightweight web server (<25MB image) -- **Multi-stage build**: Separates build from runtime - -### Design -- **Emerald/Teal color scheme**: Green energy branding -- **Responsive design**: Mobile-first approach -- **Smooth animations**: Expandable cards and transitions -- **Professional typography**: Clear information hierarchy - ---- - -## Data Structure - -### Business Models (5) -```typescript -type BusinessModel = { - name: string; - capital: string; - capitalLevel: 1-5; - complexity: 1-5; - scalability: 1-5; - recommended: "Later stage" | "Strong" | "Very strong" | "Excellent"; - blurb: string; -}; -``` - -### Opportunities (4 Categories: A–D) -```typescript -type Opportunity = { - id: string; - letter: "A" | "B" | "C" | "D"; - title: string; - products: { name: string; functions: string[] }[]; - why?: string[]; -}; -``` - -### Deployment Stages (7 Phases) -```typescript -type DeploymentStage = { - phase: string; - title: string; - actions: Action[]; - checkpoints: Checkpoint[]; - successMetrics: string[]; - pitfalls: string[]; -}; -``` - -All data is stored in `/src/data/` TypeScript files for easy maintenance and updates. - ---- - -## Customization - -### Update Content -All strategic and deployment content is stored in `/src/data/`: -- `src/data/index.ts` — Business models, opportunities, zones, ideas -- `src/data/deployment.ts` — 7 deployment phases (actions, checkpoints, metrics) - -Simply edit these TypeScript files to update the playbook. - -### Styling -- Tailwind CSS configuration: `tailwind.config.ts` -- Custom colors: Emerald and teal for green energy branding -- Component styles: Inline with `cn()` utility in each component - -### Hero Image -Replace `public/images/hero.jpg` with your own image or modify the Hero component to use a CSS gradient instead. - ---- - -## Performance - -### Build Size -- **Production HTML**: 307 KB (98 KB gzipped) -- **Docker Image**: <25 MB (Nginx Alpine) -- **Page Load**: ~2 seconds on 4G - -### Optimizations -✅ Gzip compression enabled in Nginx -✅ Static asset caching (6 months for fingerprinted files) -✅ SPA routing with client-side navigation -✅ TypeScript for smaller bundle (vs. plain JS) -✅ Tailwind CSS purging (only used styles included) - ---- - -## Browser Support - -- ✅ Chrome 90+ -- ✅ Firefox 88+ -- ✅ Safari 14+ -- ✅ Edge 90+ -- ✅ Mobile browsers (iOS Safari, Chrome Android) - ---- - -## Contributing - -This playbook is a living document. To contribute: - -1. Fork the repository -2. Create a feature branch (`git checkout -b feature/your-idea`) -3. Make your changes -4. Commit with clear messages (`git commit -am 'Add new deployment metric'`) -5. Push to your fork (`git push origin feature/your-idea`) -6. Open a Pull Request - -We welcome: -- Content updates (new data, insights) -- UI/UX improvements -- Deployment guides for new platforms -- Bug fixes and performance optimizations - ---- - -## License - -This project is licensed under the **MIT License**. - -You are free to: -- ✅ Use for commercial purposes -- ✅ Modify and create derivatives -- ✅ Distribute and share -- ✅ Use privately - -Please credit **Atlas Green Morocco** in your projects. - -See [LICENSE](./LICENSE) for full details. - ---- - -## Authors & Attribution - -### Created by -**Your Name** — Founder, Atlas Green Morocco -*Building the strategic playbook for green energy entrepreneurs in Morocco.* - -### Special Thanks To -- Morocco's free-zone authorities for enabling green innovation -- EU investors and impact funds for supporting Africa's green transition -- The green hydrogen and renewable energy community in North Africa - ---- - -## Support & Contact - -### Questions? -- 📧 **Email**: hello@atlasgreenmorocco.com -- 🐙 **GitHub Issues**: [Report a bug or request a feature](https://github.com/your-repo/atlas-green-morocco/issues) -- 💼 **LinkedIn**: [@atlasgreenmorocco](https://linkedin.com/company/atlas-green-morocco) - -### For Founders Using This Playbook -- 📅 **Monthly Updates**: Subscribe to our founder community for updates and insights -- 🎓 **Training Program**: Consider our 12-week accelerator program (coming 2026) -- 🤝 **Advisory**: Connect with experienced operators and investors - ---- - -## Roadmap - -### v1.0 (Current) -✅ Strategic framework (5 business models, 4 opportunity categories) -✅ 7-phase deployment playbook -✅ Daily/weekly founder checklists -✅ Production-ready Docker deployment -✅ Responsive web interface - -### v1.1 (Q1 2026) -🔄 Interactive financial modeling tool -🔄 Investment readiness calculator -🔄 Investor directory (VCs, impact funds, corporate investors interested in Morocco) - -### v1.2 (Q2 2026) -🔄 Case studies from deployed Morocco startups -🔄 Live investor pitch deck generator -🔄 Customer discovery interview templates - -### v2.0 (H2 2026) -🔄 Community forum for founders -🔄 Mentor matching (connect with experienced operators) -🔄 Deal flow platform (investors + founders) -🔄 Mobile app for daily task tracking - ---- - -## Statistics - -- **7 Deployment Phases**: 12–36 month roadmap -- **100+ Tactical Actions**: Specific steps with owners and timelines -- **50+ Success Metrics**: Quantified targets at each stage -- **30+ Common Pitfalls**: Mistakes to avoid with explanations -- **5 Business Models**: Ranked by capital, complexity, scalability -- **4 Opportunity Categories**: Software, infrastructure, desalination, manufacturing -- **5 Moroccan Free Zones**: Tangier, Kenitra, Casablanca, Dakhla, others -- **5 Top Startup Ideas**: Ranked by ROI and market demand - ---- - -## Final Notes - -> **"Don't produce hydrogen. Enable the hydrogen economy."** - -Morocco is positioning itself as the energy bridge between Africa and Europe. The opportunity is real. The timing is now. - -This playbook is your tactical guide from idea to market leadership. Start lean. Embed deep. Scale into assets. - ---- - -## Legal Disclaimer - -**Atlas Green Morocco** is a strategic framework and educational resource. It is **not**: -- ❌ Financial advice -- ❌ Legal advice -- ❌ Investment advice - -Always consult with qualified professionals (lawyers, accountants, business advisors) before making business decisions. - ---- - -## Changelog - -### v1.0 — January 2026 -- Initial release with 7-phase deployment playbook -- Interactive business model selector -- 4 opportunity categories with expandable details -- Production-ready Docker deployment -- Founder checklists and deployment guides -- Fully responsive design with Tailwind CSS - ---- - -**Last Updated**: January 2026 -**Version**: 1.0 -**Status**: Production Ready ✅ - ---- - -*Built with ❤️ for green energy entrepreneurs in Morocco.* +- Backend health: `https://grants.degelas.be/api/health` +- Umami analytics: https://analytics.degelas.be (website id for grants.degelas.be)