{"id":627,"date":"2025-11-13T13:13:12","date_gmt":"2025-11-13T13:13:12","guid":{"rendered":"https:\/\/www.coden.ma\/?page_id=627"},"modified":"2026-06-09T17:11:52","modified_gmt":"2026-06-09T17:11:52","slug":"technologies","status":"publish","type":"page","link":"https:\/\/www.mogacode.ma\/en\/technologies\/","title":{"rendered":"Technologies"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"627\" class=\"elementor elementor-627 elementor-bc-flex-widget\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37765a4 e-flex e-con-boxed e-con e-parent\" data-id=\"37765a4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7ea4af elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"e7ea4af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"phl phlight-star-four\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Technologies<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16fae40 elementor-widget elementor-widget-heading\" data-id=\"16fae40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Stack<br><em class=\"port\">Technological<\/em><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b34b98e elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"b34b98e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p class=\"text-xl text-muted-foreground max-w-2xl mx-auto text-pretty\">The best technologies for high-performance and scalable solutions<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ddf5fa elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"8ddf5fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">\ud83d\udca1 Tip: Hover over the technologies to learn more<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4430001 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"4430001\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ------ Conteneur global ------ *\/\n.skills-wrapper {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 12px;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n\/* Grille responsive *\/\n.skills-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n  gap: 20px;\n}\n\n\/* ------ Carte de comp\u00e9tence ------ *\/\n.skill-card {\n  position: relative;\n  border-radius: 24px;\n  padding: 22px 24px;\n  color: #ffffff;\n  overflow: hidden;\n  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.35);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  min-height: 130px;\n  transition: transform 0.18s ease, box-shadow 0.18s ease;\n  cursor: default;\n}\n\n\/* Effet de lumi\u00e8re dans le coin *\/\n.skill-card::before {\n  content: \"\";\n  position: absolute;\n  width: 160px;\n  height: 160px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.16);\n  top: -70px;\n  right: -70px;\n  pointer-events: none;\n}\n\n\/* Hover *\/\n.skill-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.45);\n}\n\n\/* Contenu *\/\n.skill-icon {\n  font-size: 32px;\n  margin-bottom: 14px;\n}\n\n.skill-title {\n  font-size: 20px;\n  font-weight: 700;\n  margin-bottom: 4px;\n}\n\n.skill-tag {\n  font-size: 13px;\n  opacity: 0.9;\n}\n\n\/* ------ Contenu d\u00e9roulant ------ *\/\n.skill-details {\n  margin-top: 10px;\n  font-size: 13px;\n  line-height: 1.4;\n  opacity: 0;\n  max-height: 0;\n  overflow: hidden;\n  transform: translateY(4px);\n  transition: opacity 0.2s ease, max-height 0.2s ease, transform 0.2s ease;\n}\n\n.skill-card:hover .skill-details {\n  opacity: 1;\n  max-height: 200px;\n  transform: translateY(0);\n}\n\n\/* ------ Couleurs (gradients) ------ *\/\n.skill-wordpress { background: linear-gradient(135deg, #0066cc, #00b4ff); }\n.skill-react { background: linear-gradient(135deg, #7b2ff7, #40c9ff); }\n.skill-node { background: linear-gradient(135deg, #00c853, #00bfa5); }\n.skill-openai { background: linear-gradient(135deg, #f54ea2, #ff7676); }\n.skill-woocommerce { background: linear-gradient(135deg, #8e2de2, #ff6a88); }\n.skill-stripe { background: linear-gradient(135deg, #7f5cff, #51a8ff); }\n.skill-postgresql { background: linear-gradient(135deg, #3b82f6, #6366f1); }\n.skill-nextjs { background: radial-gradient(circle at top left, #4b5563, #020617); }\n.skill-typescript { background: linear-gradient(135deg, #0ea5e9, #2563eb); }\n.skill-tailwind { background: linear-gradient(135deg, #14b8a6, #22c55e); }\n.skill-docker { background: linear-gradient(135deg, #22c1c3, #3b82f6); }\n.skill-infomaniak { background: linear-gradient(135deg, #ff7a18, #ffb347); }\n\n\/* Fond global *\/\n.skills-wrapper-bg {\n  background: #fef4e9;\n  border-radius: 18px;\n  padding: 28px 12px 34px;\n}\n<\/style>\n\n<div class=\"skills-wrapper-bg\">\n  <div class=\"skills-wrapper\">\n    <div class=\"skills-grid\" role=\"list\">\n\n      <!-- WordPress -->\n      <div class=\"skill-card skill-wordpress\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83c\udf10<\/div>\n          <div class=\"skill-title\">WordPress<\/div>\n          <div class=\"skill-tag\">CMS<\/div>\n          <ul class=\"skill-details\">\n            <li>Showcase websites<\/li>\n            <li>Blogs<\/li>\n            <li>E-commerce (WooCommerce)<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- React -->\n      <div class=\"skill-card skill-react\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\u269b\ufe0f<\/div>\n          <div class=\"skill-title\">React<\/div>\n          <div class=\"skill-tag\">Frontend<\/div>\n          <ul class=\"skill-details\">\n            <li>Web applications<\/li>\n            <li>Dynamic interfaces<\/li>\n            <li>SPAs\n<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- Node.js -->\n      <div class=\"skill-card skill-node\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83d\udfe2<\/div>\n          <div class=\"skill-title\">Node.js<\/div>\n          <div class=\"skill-tag\">Backend<\/div>\n          <ul class=\"skill-details\">\n            <li>REST APIs<\/li>\n            <li>Microservices<\/li>\n            <li>Real-time applications<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- OpenAI -->\n      <div class=\"skill-card skill-openai\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83e\udd16<\/div>\n          <div class=\"skill-title\">OpenAI<\/div>\n          <div class=\"skill-tag\">AI<\/div>\n          <ul class=\"skill-details\">\n            <li>Chatbots<\/li>\n            <li>Text analysis<\/li>\n            <li>Content generation<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- WooCommerce -->\n      <div class=\"skill-card skill-woocommerce\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83d\uded2<\/div>\n          <div class=\"skill-title\">WooCommerce<\/div>\n          <div class=\"skill-tag\">E-commerce<\/div>\n          <ul class=\"skill-details\">\n            <li>Online stores<\/li>\n            <li>Payments<\/li>\n            <li>Inventory management<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- Stripe -->\n      <div class=\"skill-card skill-stripe\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83d\udcb3<\/div>\n          <div class=\"skill-title\">Stripe<\/div>\n          <div class=\"skill-tag\">Payment<\/div>\n          <ul class=\"skill-details\">\n            <li>Card payments<\/li>\n            <li>Subscriptions<\/li>\n            <li>Billing<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- PostgreSQL -->\n      <div class=\"skill-card skill-postgresql\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83d\uddc4\ufe0f<\/div>\n          <div class=\"skill-title\">PostgreSQL<\/div>\n          <div class=\"skill-tag\">Database<\/div>\n          <ul class=\"skill-details\">\n            <li>Structured data<\/li>\n            <li>Transactions<\/li>\n            <li>Analytics<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- Next.js -->\n      <div class=\"skill-card skill-nextjs\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\u25b2<\/div>\n          <div class=\"skill-title\">Next.js<\/div>\n          <div class=\"skill-tag\">Framework<\/div>\n          <ul class=\"skill-details\">\n            <li>SSR<\/li>\n            <li>Static websites<\/li>\n            <li>Full-stack applications<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- TypeScript -->\n      <div class=\"skill-card skill-typescript\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83d\udcd8<\/div>\n          <div class=\"skill-title\">TypeScript<\/div>\n          <div class=\"skill-tag\">Language<\/div>\n          <ul class=\"skill-details\">\n            <li>Robust code<\/li>\n            <li>Intelligent IDE<\/li>\n            <li>Maintenance<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- Tailwind CSS -->\n      <div class=\"skill-card skill-tailwind\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83c\udfa8<\/div>\n          <div class=\"skill-title\">Tailwind<\/div>\n          <div class=\"skill-tag\">CSS<\/div>\n          <ul class=\"skill-details\">\n            <li>Quick design<\/li>\n            <li>Responsive<\/li>\n            <li>Customization<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- Docker -->\n      <div class=\"skill-card skill-docker\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\ud83d\udc0b<\/div>\n          <div class=\"skill-title\">Docker<\/div>\n          <div class=\"skill-tag\">DevOps<\/div>\n          <ul class=\"skill-details\">\n            <li>Deployment<\/li>\n            <li>Insulation<\/li>\n            <li>Scalability<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- Infomaniak -->\n      <div class=\"skill-card skill-infomaniak\" role=\"listitem\">\n        <div>\n          <div class=\"skill-icon\">\u2601\ufe0f<\/div>\n          <div class=\"skill-title\">Infomaniak<\/div>\n          <div class=\"skill-tag\">Cloud<\/div>\n          <ul class=\"skill-details\">\n            <li>Web hosting<\/li>\n            <li>Emails<\/li>\n            <li>Storage<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<div style=\"background:#0a1628;padding:48px 24px;text-align:center;border-top:1px solid rgba(255,255,255,.06)\">\n  <p style=\"color:rgba(255,255,255,.7);font-size:16px;margin:0 0 24px\">A project using this stack? Let&#039;s talk about it.<\/p>\n  <a href=\"\/en\/contact\/\" style=\"display:inline-block;background:linear-gradient(135deg,#B8860B,#a07830);color:#fff;padding:14px 32px;border-radius:50px;font-weight:600;text-decoration:none;font-family:Inter,sans-serif\">Start a project \u2192<\/a>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c840df elementor-align-center elementor-widget elementor-widget-button\" data-id=\"8c840df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"uic fi-rr-arrow-small-right\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Contact us<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Technologies Notre StackTechnologique Les meilleures technologies pour des solutions performantes et \u00e9volutives \ud83d\udca1 Astuce : Survolez les technologies pour en savoir plus \/* &#8212;&#8212; Conteneur global &#8212;&#8212; *\/ .skills-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 12px; font-family: system-ui, -apple-system, BlinkMacSystemFont, \u00ab\u00a0Segoe UI\u00a0\u00bb, sans-serif; } \/* Grille responsive *\/ .skills-grid { display: grid; grid-template-columns: [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-627","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Stack Technique \u2014 WordPress, IA, React &amp; PHP | MogaCode<\/title>\n<meta name=\"description\" content=\"WordPress Elementor Pro, React, Python IA, WooCommerce, Node.js, GPT-4o. D\u00e9couvrez les technologies MogaCode pour chaque type de projet web et SaaS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mogacode.ma\/en\/technologies\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Technologies\" \/>\n<meta property=\"og:description\" content=\"WordPress Elementor Pro, React, Python IA, WooCommerce, Node.js, GPT-4o. D\u00e9couvrez les technologies MogaCode pour chaque type de projet web et SaaS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mogacode.ma\/en\/technologies\/\" \/>\n<meta property=\"og:site_name\" content=\"Mogacode\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mogacode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-09T17:11:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@mogacode\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Stack Technique \u2014 WordPress, IA, React & PHP | MogaCode","description":"WordPress Elementor Pro, React, Python IA, WooCommerce, Node.js, GPT-4o. D\u00e9couvrez les technologies MogaCode pour chaque type de projet web et SaaS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mogacode.ma\/en\/technologies\/","og_locale":"en_US","og_type":"article","og_title":"Technologies","og_description":"WordPress Elementor Pro, React, Python IA, WooCommerce, Node.js, GPT-4o. D\u00e9couvrez les technologies MogaCode pour chaque type de projet web et SaaS.","og_url":"https:\/\/www.mogacode.ma\/en\/technologies\/","og_site_name":"Mogacode","article_publisher":"https:\/\/www.facebook.com\/mogacode","article_modified_time":"2026-06-09T17:11:52+00:00","twitter_card":"summary_large_image","twitter_site":"@mogacode","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[]}},"_links":{"self":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages\/627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":1,"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages\/627\/revisions"}],"predecessor-version":[{"id":1708,"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages\/627\/revisions\/1708"}],"wp:attachment":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/media?parent=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}