
See a demo of the finished blog/portfolio project, then install Strapi, create the admin user and configure the Strapi admin panel.
Use the Strapi Content-Type Builder to create collection types and fields, and add your first posts and portfolio entries.
Connect content types with relations (categories, tags) and use the Populate parameter to get related data from the Strapi REST API.
Create the React app, set up the folder structure and fetch posts from the Strapi REST API with async/await and a custom hook.
Fetch and display a single post from Strapi using the post ID from the React Router URL.
Install the Strapi GraphQL plugin and practise writing queries in the GraphQL Playground.
Set up Apollo Client in React and fetch Strapi posts with GraphQL queries instead of REST.
Add Bootstrap to the React project and build a responsive navigation bar.
Build the responsive post/portfolio grid with Bootstrap rows and columns, and design the landing page hero section.
Design and style the single post page with Bootstrap and custom CSS.
Filter posts by category and by tag using Strapi relations and React Router.
Fetch posts and portfolio items by slug using the Strapi UID field, for clean, SEO-friendly URLs.
Show an image carousel only when a post has multiple images, using conditional rendering in React.
Render Strapi rich text with React Markdown, polish the design and finish the complete project.
Learn Strapi, the leading open-source headless CMS, by building a real project with ReactJS, GraphQL and Bootstrap — explained step by step in Urdu/Hindi.
In this hands-on crash course you build a complete, responsive blog and portfolio website. Strapi powers the backend and admin panel, React powers the frontend, and you fetch your content two ways: with the Strapi REST API and with GraphQL using Apollo Client. By the end you understand how a modern headless CMS project fits together, from content modelling to a finished website.
What you will build
A Strapi backend with posts, portfolio items, categories, tags, images and rich text
A React frontend with routing, a home page, post grid, hero section and single post pages
Category and tag filters, and SEO-friendly URLs using slugs
A responsive Bootstrap design with a navbar and an image carousel
What you will learn
Strapi: installation, admin configuration, Content-Type Builder, UID (slug) fields, relations, the Populate parameter and API permissions
REST API: fetching Strapi data in React with the Fetch API, async/await and a custom hook
GraphQL: installing the Strapi GraphQL plugin, writing queries in the playground and using Apollo Client in React
React: folder structure, hooks, React Router, conditional rendering and React Markdown
Bootstrap: navbar, rows and columns, responsive post grid, carousel and custom styles
Who this course is for
This course is for frontend and React developers who want a real backend without writing a server from scratch, for beginners in full stack development, and for freelancers who build content websites for clients. If you know basic HTML, CSS and JavaScript you can follow along — React basics help, but every step is shown on screen.
Why learn Strapi?
Strapi is a free, open-source, Node.js based headless CMS. It gives you an admin panel and a ready REST API in minutes (plus GraphQL through an official plugin), so you can focus on the frontend. It is used for blogs, portfolios, company websites, e-commerce catalogues and mobile app backends — a valuable skill for Jamstack and full stack web development.
The lessons are taught in Urdu/Hindi with clear, practical examples, and all the code is written live so you can build along with the instructor.
Enroll now and build your first headless CMS website with Strapi, React and GraphQL.