The latest articles on DEV Community by Mohammed Babikir (@alshaigy). https://dev.to/alshaigy https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3217988%2F5641b03d-560b-47a4-992a-f860a884d8ad.png https://dev.to/alshaigy en Mohammed Babikir Wed, 18 Jun 2025 23:35:58 +0000 https://dev.to/alshaigy/epublica-ai-powered-community-newspaper-with-storyblok-openai-3j2 https://dev.to/alshaigy/epublica-ai-powered-community-newspaper-with-storyblok-openai-3j2 <p><em>This is a submission for the <a href="https://dev.to/challenges/storyblok">Storyblok Challenge</a></em></p> <h2> What I Built </h2> <p><strong>ePublica</strong> is a digital publishing platform where anyone can submit an article, and AI will automatically generate the title and summary. All submissions are saved to Storyblok as drafts, so admins can review and publish them.</p> <p>Built with:</p> <ul> <li><strong>Next.js (App Router + TypeScript)</strong></li> <li> <strong>Storyblok CMS</strong> for content management</li> <li> <strong>TailwindCSS</strong> for styling</li> <li> <strong>OpenAI GPT API</strong> for generating the title and summary</li> </ul> <p>The entire platform mimics the structure and tone of a traditional newspaper, with grayscale images and editorial formatting.</p> <h2> Demo : <a href="https://epublica-frontend.vercel.app/" rel="noopener noreferrer">https://epublica-frontend.vercel.app/</a> </h2> <p><strong>Storyblok Space:</strong> <br> Used a private space for storing draft and published articles via the Storyblok Management and Delivery APIs.</p> <p><strong>Code Repository:</strong><br><br> [<a href="https://github.com/shighiios/epublica-frontend" rel="noopener noreferrer">https://github.com/shighiios/epublica-frontend</a>]</p> <h2> Tech Stack </h2> <ul> <li> <strong>Next.js 14</strong> (App Router, TypeScript)</li> <li> <strong>TailwindCSS</strong> for responsive styling and layout</li> <li> <strong>OpenAI GPT-4</strong> for auto-generating titles and summaries</li> <li> <strong>Storyblok CMS</strong> to store all content as draft stories</li> <li> <strong>Vercel</strong> for deployment</li> </ul> <h3> How I Used Storyblok </h3> <p>Storyblok serves as the CMS backbone of the project. It stores every submitted article as a <strong>draft</strong>, allowing admins to review, edit, and publish from the Storyblok UI.</p> <p>I used:</p> <ul> <li> <strong>Storyblok Management API</strong> → to create draft stories from form submissions</li> <li> <strong>Storyblok Preview API Token</strong> → to fetch draft content on the frontend</li> <li> <strong>Custom content blocks</strong> to define article structure</li> </ul> <h3> AI Integration </h3> <p>The submission form collects only the article body and author name. On the backend, I use the <strong>OpenAI API</strong> to:</p> <ul> <li>Generate a relevant <strong>title</strong> </li> <li>Summarize the content in a few sentences</li> </ul> <p>This keeps the user experience simple and allows the editorial team to work efficiently with high-quality AI-assisted drafts.</p> <h2> Learnings and Takeaways </h2> <ul> <li>Storyblok's visual editing and draft workflow are ideal for community-generated content platforms</li> <li>Combining CMS + AI enables powerful automation without sacrificing editorial control</li> <li>TailwindCSS made it easy to style a modern UI that still feels like a classic newspaper</li> <li>The balance of simplicity and scalability helped me stay focused on delivering a complete user experience</li> </ul> devchallenge storyblokchallenge webdev api Mohammed Babikir Wed, 28 May 2025 12:02:42 +0000 https://dev.to/alshaigy/bookchunk-ai-3hjg https://dev.to/alshaigy/bookchunk-ai-3hjg <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fupk1n1yijq8zmnfwioyj.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fupk1n1yijq8zmnfwioyj.png" alt="Image description" width="800" height="800"></a></p> <p>I’m Mohamed “AlShaigi”, founder of BookChunk — a platform that transforms books into summaries, chat experiences, and quizzes using AI.</p> <p>I started this project to help readers, students, and lifelong learners make the most of their books — faster and smarter.</p> <p>I'm a solo founder, self-taught builder, and always exploring how technology can amplify education.</p> <p>BookChunk is in prelaunch — join us on the journey: <a href="http://www.bookchunk.com" rel="noopener noreferrer">www.bookchunk.com</a></p> <p><a href="https://www.producthunt.com/posts/bookchunk/maker-invite?code=QNyEDN" rel="noopener noreferrer">https://www.producthunt.com/posts/bookchunk/maker-invite?code=QNyEDN</a></p>