Version: 0.

CODING
WITH AI
BOOK TWO
FOR AGES 9+

BY REHAN ALLAHWALA
Technology Educator & Digital Innovator
 Version 0.3

PREFACE
Hello and Welcome! :
I'm Rehan Allahwala, and I’m excited to take you on this journey into
coding with AI. If you've ever wanted to build real-world applications
but felt overwhelmed by where to start, this book is for you.

In Book 6, I’ll walk you through creating functional clones of well-

known applications like ChatGPT, WhatsApp, CNN, Airbnb, and more.
These are not just exercises; they are practical, hands-on projects
designed to help you understand how modern applications work and
how you can build your own.

Many people believe that coding is hard, but with today’s AI tools,
learning to build apps is easier than ever. You don’t need to be an
expert—you just need curiosity and willingness to explore. I
encourage you to experiment, modify, and improve these projects to
make them your own.

By the end of this book, you’ll have a strong foundation in web

development, a portfolio of projects to showcase, and the confidence
to build, innovate, and create.
So, let’s get started! Your journey into AI-powered coding begins
now. Ç
Keep learning, keep experimenting, and most importantly—keep
building!
Best,
Rehan Allahwala
 Version 0.3

WHAT, WHY, AND HOW

» What is this book about?
This book is a practical guide to building real-world web applications with modern
technologies. You'll learn how to develop functional clones of popular apps like ChatGPT,
WhatsApp, CNN, and Airbnb, gaining hands-on experience in coding, databases, and server
management.

By working on these projects, you’ll not only understand how these platforms work but also
develop the skills needed to build your own applications.

Why should you read this book?

✅ Hands-on Learning – Instead of just theory, you’ll be coding real applications.
✅ AI-Driven Development – Learn how to use AI tools to assist in coding.
✅ Portfolio Building – By the end, you’ll have multiple projects to showcase.
✅ Practical Skills – Gain expertise in server setup, databases, PHP, FTP, and more.
✅ Entrepreneurial Advantage – Whether you want to start a business or get a job, these
skills will give you an edge.

This book is for everyone—whether you are a beginner or someone looking to level up your
coding skills.

 How will you learn?

This book takes a step-by-step approach, guiding you through the process of building
applications.

Here’s what you’ll cover:

Ç How to Work with Servers & Databases
Server & Hosting Setup – Learn how to set up a server using Net2FTP.
FTP (File Transfer Protocol) – Manage files and deploy projects on a server.
Database Management – Use phpMyAdmin to create and manage databases.
Cursor in PHP – Understand how cursors work in PHP for handling database queries.
By the end of this book, you’ll have practical experience in coding and managing real web
applications.
Ç So, are you ready to start your journey into AI-powered coding? Let’s build something
amazing!
 Version 0.3

What¥ Why¥ and How for

GitHub and Social Media
» What is GitHub and Social Media in this book?
In this book, GitHub and Social Media play an important role in showcasing your
coding skills and projects.

GitHub is a platform for hosting and sharing code. It allows you to store, manage,
and collaborate on projects with version control.
Social Media is a powerful tool for sharing your work, connecting with developers,
and building your personal brand in the tech world.

You’ll learn how to use GitHub to upload your projects and how to promote them on
Social Media platforms like Facebook, Instagram, LinkedIn, and YouTube to attract
opportunities and recognition.

Why are GitHub and Social Media important?

✅ For Developers – GitHub is your online portfolio, making it easier for recruiters,
clients, and fellow developers to see your work.
✅ For Networking – Sharing your work on social media helps you connect with tech
professionals, mentors, and opportunities.
✅ For Career Growth – Many companies check GitHub profiles before hiring
developers. A strong profile can help you stand out.
✅ For Learning & Collaboration – Contributing to GitHub projects and engaging with
developers on social media helps you grow.
✅ For Marketing – If you plan to launch a product or startup, social media helps in
reaching potential users and investors.
In short, GitHub is where you showcase your skills, and Social Media is where you
market them.

earning journey, achievements, and project milestones.

Ç Start using GitHub and Social Media today! Build, share, and grow your presence in
the developer community.
 Version 0.3

What¥ Why¥ and How for

GitHub and Social Media
 How will you use GitHub and Social Media?
( GitHub
Create a GitHub Account – Sign up on GitHub.
Upload Your Projects – Use Git to push your project files.
Write a README.md – Clearly explain your project, features, and how to use it.
Use Version Control – Learn how to track changes, collaborate, and contribute to
open-source projects.
Share Your Repository Links – Add your GitHub links to your resume and social
media profiles.

( Social Media
Platforms – Use LinkedIn, Twitter, Facebook, Instagram, and YouTube to share
your work.
Post About Your Projects – Share updates, screenshots, and links to your GitHub
repositories.
Use the Right Hashtags – Example: #rehancodingwithai #codingwithai #GitHub
#OpenSource#WebDevelopment.
Engage with the Community – Like, comment, and collaborate with other
developers.
Showcase Your Growth – Post about your l
 Version 0.3

CWI TASK : 26 CHATGPT CLONE (NON-FUNCTIONAL)

DURATION: 1
(WEB-BASED) HOUR

Objective
Create a basic ChatGPT interface to understand the structure and layout of a chatbot
application.

This will be a static (non-functional) design focused on UI development.

 What You’ll Build
✅ A static chat interface resembling ChatGPT.
✅ Elements like a chat window, text input box, and send button.
✅This task focuses only on layout design, not functionality.

» Steps to Build
( 1. UI Design
™ Design a simple layout with:
› A chat window to display conversations.
⌨ A text input field for users to type messages.
Ó A send button (non-functional) to mimic message sending.
( 2. Page Layout
È Create a visually clean and organized page structure.
™ Use basic colors and fonts to keep the interface minimalistic and user-friendly.
( 3. Test the Layout
✅ Ensure the chat window, input field, and send button align properly.
à Check that the design is responsive for different screen sizes.
º Checklist
✅ A static chat interface with all necessary components.
✅ Proper alignment and clean layout design.
✅ Responsive design for various devices.
± GitHub Requirement
Ó Upload your ChatGPT Clone (Non-Functional) project to GitHub with a README.md file
explaining:
» The design process.
» How it resembles a chatbot interface.
Ñ Facebook, intsgram , youtube , linkedin Caption.
" Just created a basic ChatGPT interface! Starting with the fundamentals. Ç
 [GitHub Link]
 [Clone Link]
#rehancodingwithai #codingwithai"
 Version 0.3

CWI TASK : 27 WHATSAPP CLONE (NON-FUNCTIONAL)

DURATION: 1
(WEB-BASED) HOUR

Objective
Design a static interface for a WhatsApp Clone, focusing on creating a visually
accurate chat layout.

 What You’ll Build

✅ A static chat interface resembling WhatsApp.
✅ Elements like a chat list, chat window, and text input box.
✅ This task focuses solely on layout design, not functionality.
» Steps
( UI Design:
Build a layout with:
A chat list panel on the left showing recent chats.
A chat window on the right for displaying messages.
A text input box with a send button at the bottom.
( Page Layout:
Use appropriate colors and fonts to match WhatsApp’s theme (green and white).
Include placeholders for user avatars, chat names, and messages.
( Test the Layout:
Check that the chat list and chat window are aligned properly.
Verify responsiveness across different screen sizes.

º Checklist
✅ A static WhatsApp interface with a chat list, chat window, and input box.
✅ Proper alignment and a visually accurate design.
✅ Responsive layout for various devices.
± GitHub Requirement
Ó Upload your WhatsApp Clone layout project to GitHub with a README.md
explaining the design and layout structure.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just created a basic WhatsApp interface! Loving the design process. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai
 Version 0.3

CWI TASK : 28 CNN CLONE (FUNCTIONAL)

DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a functional news website inspired by CNN, focusing on a dynamic homepage, news
categories, and an article page.

 What You’ll Build

✅ A homepage displaying featured news and breaking headlines.
✅ A categories section for different news topics.
✅ An article page for detailed news content.
» Steps
( Homepage Design:
Create a homepage layout with:
A featured news section for the latest and breaking news.
A list of categories such as World, Sports, Technology, and Entertainment.
Thumbnails and short descriptions for each news article.

( Core Features:
Build dynamic navigation between the homepage, categories, and article pages.
Use dummy data or mock APIs for displaying news content.
Implement a responsive layout for better viewing on different devices.
( Article Page:
Allow users to click on a headline to view the full article.
Display the article title, content, and related news links.
( Test the App:
Verify navigation between pages works seamlessly.
Ensure news articles and categories are displayed correctly.

º Checklist
✅ A functional homepage with news categories and featured headlines.
✅ Working navigation between homepage, categories, and article pages.
✅ Responsive design for desktops and mobile devices.
± GitHub Requirement
Ó Upload your CNN Clone project to GitHub with a README.md explaining the features and setup
instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my CNN Clone! Dynamic news browsing at its best. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai
 Version 0.3

CWI TASK : 29 BLOGGER.COM CLONE (FUNCTIONAL) DURATION: 3

(WEB-BASED) DAYS

Objective
Develop a functional blogging platform inspired by Blogger.com, allowing users to create, edit, and
read blog posts.

 What You’ll Build

✅ A homepage displaying recent blog posts.
✅ A post creation page for writing and publishing blogs.
✅ An individual blog post page with full content and comments.
» Steps
( Homepage Design:
Display latest blog posts with titles, excerpts, and author names.
Include categories like Technology, Lifestyle, Business, and Travel.
Implement a search bar for finding blog posts.
( Core Features:
Allow users to create and edit blog posts.
Implement a rich text editor for formatting posts.
Enable a comment section under each post.
( Blog Post Page:
Users should be able to click on a post title to read the full content.
Display author details, publish date, and related posts.
Include a comments section where users can interact.
( Test the App:
Verify post creation, editing, and deletion work properly.
Ensure navigation between homepage, blog posts, and categories is smooth.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A functional homepage displaying blog posts.
✅ A working blog post creation and editing system.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your Blogger.com Clone project to GitHub with a README.md explaining the features
and setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my Blogger.com Clone! Now anyone can create and publish blogs with ease. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai
 Version 0.3

CWI TASK : 30
TWITTER CLONE (FUNCTIONAL) DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a functional Twitter-like platform where users can post tweets, follow others, and interact
through likes and comments.

 What You’ll Build

✅ A homepage displaying a real-time feed of tweets.
✅ A tweet creation box allowing users to post short messages.
✅ A user profile page showing their tweets and followers.
» Steps
( Homepage Design:
Display a feed of recent tweets from users.
Include a tweet input box for posting new messages.
Show user profile pictures, timestamps, and tweet interactions (like, comment, retweet).
( Core Features:
Allow users to post, edit, and delete tweets.
Implement a "Follow" feature so users can follow/unfollow others.
Enable liking and commenting on tweets.
( Profile Page:
Users should be able to view their profile with their tweets.
Display the number of followers and following.
Provide an edit profile option for updating user details.
( Test the App:
Verify tweet posting, editing, and deletion work properly.
Ensure the "Follow" feature updates the user’s feed.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A functional homepage with a live tweet feed.
✅ A working tweet creation, edit, and delete system.
✅ A Follow system for user interaction.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your Twitter Clone project to GitHub with a README.md explaining the features and setup
instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my Twitter Clone! Now users can post, follow, and engage in real-time. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai
 Version 0.3

CWI TASK : 31
GODADDY CLONE (FUNCTIONAL) DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a functional GoDaddy-like platform where users can search, register, and manage domain
names.

 What You’ll Build

✅ A homepage with a domain search bar.
✅ A domain availability checker that provides results based on user input.
✅ A dashboard where users can manage their registered domains.
» Steps
( Homepage Design:
Create a domain search bar where users can enter a domain name.
Display popular domain extensions (.com, .net, .org, etc.).
Show promotions and domain pricing plans.
( Core Features:
Implement a domain availability checker (use dummy data or a mock API).
Allow users to add domains to cart and proceed to checkout (non-functional).
Create a user dashboard to view registered domains.
( Domain Management Page:
Users should be able to see the list of domains they have registered.
Include expiration dates and renewal options.
Allow users to transfer or remove domains (non-functional).
( Test the App:
Verify domain search and availability check work properly.
Ensure users can add domains to cart without errors.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A functional homepage with a domain search feature.
✅ A working domain availability checker.
✅ A dashboard for managing domains.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your GoDaddy Clone project to GitHub with a README.md explaining the features and
setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my GoDaddy Clone! Now users can search and manage domains with ease. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai
 Version 0.3

CWI TASK : 32
WHATSAPP FUNCTIONAL CLONE DURATION: 3
DAYS
(WEB-BASED)

Objective
Develop a fully functional WhatsApp Clone that allows users to send messages, create chats, and
interact in real time.

 What You’ll Build

✅ A real-time chat system where users can send and receive messages.
✅ A chat list panel displaying recent conversations.
✅ A user authentication system for login and signup.
» Steps
( Homepage & Authentication:
Create a login and signup page for users.
Store user data in a database.
( Chat System:
Display user contacts in a sidebar.
Allow users to select a contact and start a chat.
Implement a real-time messaging system using AJAX/WebSockets.
( Message Features:
Support text messaging with timestamps.
Store messages in a database for retrieval.
Enable read receipts and message status indicators.
( Test the App:
Verify message sending and receiving works correctly.
Ensure real-time updates for active conversations.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A login/signup system for user authentication.
✅ A working chat feature with real-time updates.
✅ A message database for storing conversations.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your WhatsApp Clone project to GitHub with a README.md explaining the features and
setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my WhatsApp Clone! Real-time messaging is now live. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #WhatsAppClone
 Version 0.3

CWI TASK : 33
CHATGPT FUNCTIONAL CLONE DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a functional AI chatbot similar to ChatGPT, allowing users to input queries and receive AI-
generated responses.

 What You’ll Build

✅ A chat interface where users can type questions and receive responses.
✅ A backend connection to an AI API (e.g., OpenAI API, GPT-based API).
✅ A conversation history to store and display previous responses.
» Steps
( Homepage & Chat Interface:
Create a simple UI with a chat window, text input box, and send button.
Display conversation history dynamically.
( Backend Integration:
Connect the frontend to an AI API for generating responses.
Send user queries to the API and display the chatbot’s reply.
( Message Handling:
Store chat history in a database or session storage.
Show loading indicators while the chatbot generates a response.
( Test the App:
Ensure queries are sent and responses are received correctly.
Check that chat history is stored and retrieved properly.
Verify responsiveness on desktop and mobile devices.

º Checklist
✅ A working chat system that sends user inputs to an AI API.
✅ A response display area for AI-generated messages.
✅ Chat history storage for ongoing conversations.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your ChatGPT Clone project to GitHub with a README.md explaining the features and
setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just built my own AI chatbot! My ChatGPT Clone is live. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #AI #Chatbot #WebDevelopment
 Version 0.3

CWI TASK : 34
DHL CLONE (FUNCTIONAL) DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a fully functional news website inspired by CNN, featuring a dynamic homepage, categorized
news sections, and detailed article pages.

 What You’ll Build

✅ A homepage displaying featured news, breaking headlines, and trending stories.
✅ A categories section for different news topics such as World, Sports, Technology, and
Entertainment.
✅ A news article page for displaying full news content.
» Steps
( Homepage Design:
Display featured news at the top with headlines and images.
Show category sections (e.g., World, Politics, Business, Tech, Sports).
Add thumbnails and short descriptions for each news article.
( Core Features:
Implement dynamic navigation between the homepage, categories, and articles.
Use a database or API to store and display news content dynamically.
Create a search bar to allow users to find articles by keywords.
( Article Page:
Allow users to click on a news headline to view the full article.
Display the article title, content, author name, and related news links.
Enable a comment section for user engagement.
( Test the App:
Verify that navigation between homepage, categories, and article pages works seamlessly.
Ensure that news articles are displayed correctly from the database/API.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A fully functional homepage with categorized news sections.
✅ A working navigation system between homepage, categories, and article pages.
✅ A dynamic news database or API integration.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your CNN Clone project to GitHub with a README.md explaining the features and setup
instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my CNN Clone! Dynamic news browsing at its best. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #NewsPortal
 Version 0.3

CWI TASK : 35
HOTELS.COM CLONE (FUNCTIONAL) DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a fully functional hotel booking platform inspired by Hotels.com, allowing users to search,
view, and book hotels.

 What You’ll Build

✅ A homepage with a search bar for finding hotels based on location and dates.
✅ A hotel listing page displaying available hotels with images, descriptions, and prices.
✅ A booking system where users can reserve hotel rooms.
» Steps
( Homepage Design:
Create a search bar where users can enter destination, check-in, and check-out dates.
Display featured hotels and top-rated stays.
Add filters for price range, rating, and hotel type.
( Hotel Listing Page:
Show a list of available hotels based on user search.
Include hotel images, prices, reviews, and amenities.
Implement a sort feature (e.g., price low to high, best-rated).
( Booking System:
Allow users to select a hotel and book a room.
Store user booking details in a database.
Send a confirmation message after booking.
( Test the App:
Verify that search and filters work correctly.
Ensure that hotel details and booking pages load properly.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working hotel search and filter system.
✅ A functional booking system with reservation confirmation.
✅ A dynamic database to store hotel details and user bookings.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your Hotels.com Clone project to GitHub with a README.md explaining the features and
setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my Hotels.com Clone! Now booking hotels is easier than ever. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #HotelBooking
 Version 0.3

CWI TASK : 36
RENTACAR.COM CLONE (FUNCTIONAL) DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a fully functional car rental platform inspired by RentACar.com, allowing users to search,
view, and book rental cars.

 What You’ll Build

✅ A homepage with a search bar for finding available rental cars based on location and dates.
✅ A car listing page displaying available cars with images, descriptions, and rental prices.
✅ A booking system where users can reserve rental cars.
» Steps
( Homepage Design:
Create a search bar where users can enter pickup location, rental start date, and return date.
Display featured rental cars and top-rated deals.
Add filters for car type, price range, fuel type, and brand.
( Car Listing Page:
Show a list of available rental cars based on user search.
Include car images, prices, rental duration, and specifications.
Implement a sort feature (e.g., price low to high, best-rated).
( Booking System:
Allow users to select a car and book it for rental.
Store user booking details in a database.
Send a confirmation message after booking.
( Test the App:
Verify that search and filters work correctly.
Ensure that car details and booking pages load properly.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working car search and filter system.
✅ A functional booking system with rental confirmation.
✅ A dynamic database to store car details and user bookings.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your RentACar.com Clone project to GitHub with a README.md explaining the features
and setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my RentACar.com Clone! Now renting cars is easier than ever. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #CarRental
 Version 0.3

CWI TASK : 37
AIRBNB CLONE (FUNCTIONAL) DURATION: 3
(WEB-BASED) DAYS

Objective
Develop a fully functional Airbnb-like platform where users can search, view, and book rental
properties.

 What You’ll Build

✅ A homepage with a search bar for finding properties based on location, check-in, and check-out
dates.
✅ A property listing page displaying available accommodations with images, descriptions, and
pricing.
✅ A booking system allowing users to reserve stays.
» Steps
( Homepage Design:
Create a search bar where users can enter destination, check-in, and check-out dates.
Display featured listings and top-rated stays.
Add filters for price range, property type, and amenities.
( Property Listing Page:
Show a list of available properties based on user search.
Include images, prices, reviews, and location details.
Implement a sort feature (e.g., price low to high, best-rated).
( Booking System:
Allow users to select a property and book a stay.
Store user booking details in a database.
Send a confirmation message after booking.
( Test the App:
Verify that search and filters work correctly.
Ensure that property details and booking pages load properly.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working property search and filter system.
✅ A functional booking system with reservation confirmation.
✅ A dynamic database to store property details and user bookings.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your Airbnb Clone project to GitHub with a README.md explaining the features and setup
instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my Airbnb Clone! Now booking stays is easier than ever. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #VacationRental
 Version 0.3

CWI TASK : 38
SHERATON HOTELS CLONE DURATION: 3
(FUNCTIONAL) (WEB-BASED) DAYS

Objective
Develop a fully functional Sheraton Hotels-like platform where users can search, view, and book hotel
rooms.

 What You’ll Build

✅ A homepage with a search bar for finding hotel rooms based on location, check-in, and check-out
dates.
✅ A hotel listing page displaying available rooms with images, descriptions, and pricing.
✅ A booking system allowing users to reserve rooms.
» Steps
( Homepage Design:
Create a search bar where users can enter destination, check-in, and check-out dates.
Display featured hotels and top-rated stays.
Add filters for price range, hotel rating, and amenities.
( Hotel Listing Page:
Show a list of available rooms based on user search.
Include images, prices, reviews, and amenities.
Implement a sort feature (e.g., price low to high, best-rated).
( Booking System:
Allow users to select a room and book a stay.
Store user booking details in a database.
Send a confirmation message after booking.
( Test the App:
Verify that search and filters work correctly.
Ensure that hotel details and booking pages load properly.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working hotel search and filter system.
✅ A functional booking system with reservation confirmation.
✅ A dynamic database to store hotel details and user bookings.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your Sheraton Hotels Clone project to GitHub with a README.md explaining the features
and setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my Sheraton Hotels Clone! Now booking stays is easier than ever. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #HotelBooking
 Version 0.3

CWI TASK : 39
HILTON HOTELS CLONE DURATION: 3
(FUNCTIONAL) (WEB-BASED) DAYS

Objective
Develop a fully functional Hilton Hotels-like platform where users can search, view, and book hotel
rooms.

 What You’ll Build

✅ A homepage with a search bar for finding hotel rooms based on location, check-in, and check-out
dates.
✅ A hotel listing page displaying available rooms with images, descriptions, and pricing.
✅ A booking system allowing users to reserve rooms.
» Steps
( Homepage Design:
Create a search bar where users can enter destination, check-in, and check-out dates.
Display featured hotels and top-rated stays.
Add filters for price range, hotel rating, and amenities.
( Hotel Listing Page:
Show a list of available rooms based on user search.
Include images, prices, reviews, and amenities.
Implement a sort feature (e.g., price low to high, best-rated).
( Booking System:
Allow users to select a room and book a stay.
Store user booking details in a database.
Send a confirmation message after booking.
( Test the App:
Verify that search and filters work correctly.
Ensure that hotel details and booking pages load properly.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working hotel search and filter system.
✅ A functional booking system with reservation confirmation.
✅ A dynamic database to store hotel details and user bookings.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your Hilton Hotels Clone project to GitHub with a README.md explaining the features and
setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my Hilton Hotels Clone! Now booking stays is easier than ever. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #HotelBooking
 Version 0.3

CWI TASK : 40
CALENDLY.COM CLONE DURATION: 3
(FUNCTIONAL) (WEB-BASED) DAYS

Objective
Develop a fully functional Calendly-like scheduling platform where users can set availability, book
appointments, and manage meetings.

 What You’ll Build

✅ A homepage with an introduction to scheduling meetings.
✅ A calendar-based appointment booking system where users can select time slots.
✅ A dashboard for users to manage scheduled meetings.
» Steps
( Homepage Design:
Display a welcome section explaining how scheduling works.
Allow users to sign up and log in to create their own booking links.
Show a "Book a Meeting" button that leads to the scheduling page.
( Appointment Booking System:
Users can set availability (e.g., available days and time slots).
Visitors can select a time slot and book an appointment.
Store booking data in a database and send confirmation emails.
( User Dashboard:
Allow users to view upcoming and past appointments.
Provide options to cancel or reschedule meetings.
Enable notifications for upcoming meetings.
( Test the App:
Verify that appointments can be booked and updated.
Ensure the calendar syncs properly with availability.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working calendar-based appointment system.
✅ A functional user dashboard to manage bookings.
✅ A database to store meeting details.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your Calendly Clone project to GitHub with a README.md explaining the features and
setup instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my Calendly Clone! Now scheduling meetings is effortless. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #SchedulingApp
 Version 0.3

CWI TASK : 41
EQ TEST (FUNCTIONAL) DURATION: 2
– WEB-BASED DAYS

Objective
Develop a fully functional online Emotional Intelligence (EQ) test platform where users can take a
quiz, get a score, and receive feedback on their emotional intelligence.

 What You’ll Build

✅ A homepage introducing the EQ test and its purpose.
✅ A quiz page with multiple-choice questions related to emotional intelligence.
✅ A results page displaying the EQ score and personalized feedback.
» Steps
( Homepage Design:
Provide a brief introduction to emotional intelligence and its importance.
Add a "Start Test" button leading to the quiz page.
( Quiz System:
Display multiple-choice questions assessing self-awareness, empathy, and emotional regulation.
Allow users to select answers and navigate through questions.
Store user responses temporarily for evaluation.
( Results Page:
Calculate the EQ score based on answers.
Show feedback on emotional strengths and improvement areas.
Allow users to retake the test or share results.
( Test the App:
Ensure that questions load dynamically.
Verify that scores are calculated accurately.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working EQ test with multiple-choice questions.
✅ A functional score calculation and feedback system.
✅ A results page with recommendations.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your EQ Test project to GitHub with a README.md explaining the features and setup
instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my online EQ Test platform! Now anyone can assess their emotional intelligence.
Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #EQTest
 Version 0.3

CWI TASK : 42
IQ TEST DURATION: 2
(FUNCTIONAL) – WEB-BASED DAYS

Objective
Develop a fully functional online Intelligence Quotient (IQ) test platform where users can take a quiz,
get a score, and receive feedback on their cognitive abilities.

 What You’ll Build

✅ A homepage introducing the IQ test and its purpose.
✅ A quiz page with multiple-choice questions assessing logical reasoning, pattern recognition, and
problem-solving skills.
✅ A results page displaying the IQ score and personalized feedback.
» Steps
( Homepage Design:
Provide a brief introduction to IQ testing and its significance.
Add a "Start Test" button leading to the quiz page.
( Quiz System:
Display multiple-choice questions covering topics like logical reasoning, numerical ability, and
pattern recognition.
Allow users to select answers and navigate through questions.
Store user responses temporarily for evaluation.
( Results Page:
Calculate the IQ score based on answers.
Show feedback on cognitive strengths and improvement areas.
Allow users to retake the test or share results.
( Test the App:
Ensure that questions load dynamically.
Verify that scores are calculated accurately.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A working IQ test with multiple-choice questions.
✅ A functional score calculation and feedback system.
✅ A results page with recommendations.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your IQ Test project to GitHub with a README.md explaining the features and setup
instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my online IQ Test platform! Now anyone can test their intelligence level. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #IQTest
 Version 0.3

CWI TASK : 43
MTURK.COM CLONE DURATION: 2
(FUNCTIONAL) – WEB-BASED DAYS

Objective
Develop a fully functional micro-tasking platform inspired by Amazon MTurk, allowing users to
complete small tasks for payments.

 What You’ll Build

✅ A homepage introducing micro-tasking and how users can earn money.
✅ A task marketplace where requesters post tasks and workers complete them.
✅ A worker dashboard to track completed tasks and earnings.
» Steps
( Homepage Design:
Provide a brief introduction to the platform and how it works.
Allow users to sign up as requesters (who post tasks) or workers (who complete tasks).
Display featured tasks available for completion.
( Task Marketplace:
Allow requesters to post tasks with descriptions, deadlines, and payment amounts.
Enable workers to browse available tasks and apply to complete them.
Show task categories (e.g., data entry, surveys, transcription).
( Worker Dashboard:
Display a list of accepted and completed tasks.
Show earnings summary and withdrawal options.
Include a task rating and review system.
( Test the App:
Ensure that users can post, apply, and complete tasks.
Verify task updates and earnings calculations.
Check for responsiveness on desktop and mobile devices.

º Checklist
✅ A functional task marketplace where requesters post tasks.
✅ A working task acceptance and completion system.
✅ A dashboard for tracking earnings and tasks.
✅ Responsive design for desktop and mobile.
± GitHub Requirement
Ó Upload your MTurk Clone project to GitHub with a README.md explaining the features and setup
instructions.

Ñ Facebook, Instagram, YouTube, LinkedIn Caption.

"Just completed my MTurk Clone! Now users can earn money by completing micro-tasks. Ç"
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #MicroTasking
 Version 0.3

CWI TASK : 44
REHANSCHOOL.NET CLONE DURATION: 2
(FUNCTIONAL) – WEB-BASED DAYS

Objective
Develop a functional clone of RehanSchool.net, an AI-enabled educational platform focusing on
innovative curriculum and entrepreneurial skills.

 What You’ll Build

Homepage: Showcasing the school's mission, vision, and unique features.
Curriculum Page: Detailing the innovative curriculum and educational approach.
Facilitators Page: Introducing the educators and team members.
Contact Page: Providing contact information and a communication form.rehanschool.net

» Steps
1. Homepage Design:
Header: Include navigation links to Home, Curriculum, Facilitators, and Contact.
Main Sections:Introduction: Present the school's tagline and mission statement.
Unique Features: Highlight aspects like AI-Enabled Education, Holistic Development, and
Entrepreneurial Focus.
Statistics: Display key figures such as the number of team members, students, and
campuses.
Testimonials: Showcase feedback from visitors or stakeholders.
Latest Articles: Feature recent news or articles related to the school's achievements.
2. Curriculum Page:
Provide an overview of the curriculum, emphasizing the integration of technology and soft
skills training.
3. Facilitators Page:
Introduce the school's educators and team members, including brief profiles and social media
links.
4. Contact Page:
List contact details such as address, phone number, and email.
Include a form for visitors to send messages or inquiries.
5. Test the Site:
Ensure all navigation links function correctly.
Verify that content loads properly on each page.
Check for responsiveness across various devices and screen sizes.
 Version 0.3

CWI TASK : 44
REHANSCHOOL.NET CLONE DURATION: 2
(FUNCTIONAL) – WEB-BASED DAYS

º Checklist
A functional homepage reflecting RehanSchool.net's structure and content.
Working navigation to all additional pages.
Responsive design for both desktop and mobile devices.
Accurate representation of the school's mission, curriculum, team, and contact information.

± GitHub Requirement
Upload your RehanSchool.net Clone project to GitHub with a README.md explaining the features,
setup instructions, and any additional notes.

Ñ Social Media Caption

"Just completed a functional clone of RehanSchool.net! Explore this AI-enabled educational platform
Ç
focusing on innovative curriculum and entrepreneurial skills. "
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #Education #AIinEducation
 Version 0.3

CWI TASK : 45
REHAN.EDUCATION CLONE DURATION: 2
(FUNCTIONAL) – WEB-BASED DAYS

Objective
Develop a fully functional clone of Rehan.Education, an AI-enabled educational platform designed to
empower students to positively impact 10 million lives and achieve financial independence.

 What You’ll Build

Homepage: Introducing the program "Digital Mastery for a Connected World," tailored for teens to
unleash their digital potential.
Curriculum Page: Detailing the innovative curriculum focusing on digital skills, AI proficiency, and
online teaching methodologies.
Facilitators Page: Introducing the educators and team members guiding the students.
Contact Page: Providing contact information and a communication form.

» Steps
1. Homepage Design:
Header:Navigation links to Home, Curriculum, Courses, Facilitators, Founder’s Message,
and Contact Us.
Main Sections:Introduction: Present the program's tagline: "Digital Mastery for a
Connected World" and a brief overview.
Unique Features: Highlight aspects like AI-Enabled Education, Digital Skills Acquisition,
and Online Teaching Proficiency.
Contact Information: Provide details for inquiries:
Call/WhatsApp: +44 7418 359852
Social media links: Facebook, Instagram, Twitter/X
2. Curriculum Page:
Provide an overview of the curriculum, emphasizing the integration of digital skills, AI tools,
and online teaching methodologies.
3. Facilitators Page:
Introduce the school's educators and team members, including brief profiles and social media
links.
4. Contact Page:
List contact details such as address, phone number, and email.
Include a form for visitors to send messages or inquiries.
5. Test the Site:
Ensure all navigation links function correctly.
Verify that content loads properly on each page.
Check for responsiveness across various devices and screen sizes.
 Version 0.3

CWI TASK : 45
REHAN.EDUCATION CLONE DURATION: 2
(FUNCTIONAL) – WEB-BASED DAYS

º Checklist
A functional homepage reflecting Rehan.Education's structure and content.
Working navigation to all additional pages.
Responsive design for both desktop and mobile devices.
Accurate representation of the program's mission, curriculum, team, and contact information.

± GitHub Requirement
Upload your Rehan.Education Clone project to GitHub with a README.md explaining the features,
setup instructions, and any additional notes.

Ñ Social Media Caption

"Just completed a functional clone of Rehan.Education! Explore this AI-enabled educational platform
Ç
focusing on innovative curriculum and entrepreneurial skills. "
 Clone Link: [Clone Link]
 GitHub Repository: [GitHub Link]
#rehancodingwithai #codingwithai #WebDevelopment #Education #AIinEducation
 Version 0.3

JoiningDate:_____________________

Task Name Task ID Duration Type Sratus Score

ChatGPT Clone (Non-Functional) CWI TASK: 26 1 Hour Web-Based 10/

WhatsApp Clone (Non-Functional) CWI TASK: 27 1 Hour Web-Based 10/

CNN Clone (Functional) CWI TASK: 28 3 Days Web-Based 10/

Blogger.com Clone (Functional) CWI TASK: 29 3 Days Web-Based 10/

Twitter Clone (Functional) CWI TASK: 30 3 Days Web-Based 10/

GoDaddy Clone (Functional) CWI TASK: 31 3 Days Web-Based 10/

 Version 0.3

WhatsApp Functional Clone CWI TASK: 32 3 Days Web-Based 10/ Status

ChatGPT Functional Clone CWI TASK: 33 3 Days Web-Based 10/

DHL Clone (Functional) CWI TASK: 34 3 Days Web-Based 10/

Hotels.com Clone (Functional) CWI TASK: 35 3 Days Web-Based 10/

RentACar.com Clone
CWI TASK: 36 3 Days Web-Based 10/
(Functional)

Airbnb Clone (Functional) CWI TASK: 37 3 Days Web-Based 10/

Sheraton Hotels Clone CWI TASK: 38 3 Days Web-Based 10/

Hilton Hotels Clone CWI TASK: 39 3 Days Web-Based 10/

Calendly.com Clone CWI TASK: 40 3 Days Web-Based 10/

EQ Test (Functional) CWI TASK: 41 2 Days Web-Based 10/

IQ Test (Functional) CWI TASK: 42 2 Days Web-Based 10/

MTurk.com Clone (Functional) CWI TASK: 43 2 Days Web-Based 10/

RehanSchool.net Clone
CWI TASK: 44 2 Days Web-Based 10/
(Functional)

Rehan.Education Clone
CWI TASK: 45 2 Days Web-Based 10/
(Functional)

Total
 Version 0.3

Conclusion
Congratulations on completing this exciting journey of creating
and learning through this book! From simple clones to fully
functional platforms, you’ve explored a wide range of skills, from
designing user-friendly interfaces to building dynamic features
using tools like ChatGPT.
This book wasn’t just about replicating popular platforms—it was
about empowering you to think creatively, problem-solve, and
gain confidence in coding. Each task was a step toward
mastering the fundamentals of modern web development and AI
integration.
As you move forward, remember that these projects are just the
beginning. The skills you’ve acquired can be expanded and
applied to real-world challenges. Keep experimenting, building,
and pushing your limits.
Finally, don’t forget to share your creations with the world! Your
journey can inspire others to start their own. Celebrate your
progress, and remember, every expert was once a beginner.
Happy coding, and may your future projects shine as brightly as
your determination!
Keep creating, keep innovating, and never stop learning.
 Codingwith AI
Create, Explore,
and Have Fun
Coding with AI
Tools!

Retail Price: Rs 1500