Version 0.

CODING WITH AI
Create Real-World Web
and App Project
Book 8

Rehan Allahwala
Technology Educator & Digital Innovator
Book:08 Version 0.1

Preface
Welcome to Book 8, an exciting journey into mastering
web and app development! Over the next 8 weeks, you’ll
explore the art of building functional clones of popular
platforms like Google Meet, WhatsApp, and Instagram,
while also diving into creative projects like Tic-Tac-Toe
and Pacman. This book is designed to equip you with
practical skills and the confidence to create real-world
projects.
Each task in this book is crafted to challenge your
abilities, encourage problem-solving, and push your
creativity to the next level. You’ll start with web-based
projects to strengthen your foundation, then transition into
mobile app development with Flutter, and finally unleash
your creativity with game design.
Whether you're a beginner eager to learn or a developer
looking to enhance your portfolio, this book provides step-
by-step guidance to ensure success. By the end of these
8 weeks, you’ll have not only improved your coding skills
but also built a portfolio of projects you can proudly
showcase.
Let’s code, create, and conquer together!

1
Book:08 Version 0.1

Task Introduction
Welcome to the task section of Book 8, where each assignment is a
step toward mastering your web and app development skills. Every task
in this book has been carefully designed to simulate real-world projects,
providing you with hands-on experience in creating functional clones of
some of the most popular platforms.

Here’s what you can expect:

1. Practical Learning: Each task introduces you to essential tools,
frameworks, and techniques to build professional-grade projects.
2. Diverse Challenges: From web-based projects like Google Meet to
app development with Flutter for platforms like WhatsApp and
Snapchat, you'll tackle a variety of exciting challenges.
3. Step-by-Step Guidance: Each task includes clear instructions,
allowing you to build projects at your own pace.
4. Portfolio Building: The projects you complete will be perfect
additions to your portfolio, showcasing your skills to potential
employers or collaborators.

Tasks are distributed across 8 weeks, starting with web development

fundamentals and gradually advancing to mobile app development and
game design. By the end of this journey, you’ll have gained the
confidence to build complex applications from scratch.

Get ready to dive into coding, solve problems creatively, and bring your
ideas to life. Let’s make this an unforgettable learning experience!

2
Book:08 Version 0.1

Requirements for
Completing Book 8
1. Social Media Sharing:
After completing each task, share your project progress on social media
with the following hashtags:
#rehancodingwithai
#codingwithai
2. Real User Testing:
Tasks involving features like "Follow," "Friend Requests," or "Messaging"
require signing up and interacting with 10 real users for functionality
testing.
3. GitHub Upload:
Each project must be uploaded to GitHub with a properly structured
README.md file, including:
Project Overview
Features List
Installation and Usage Instructions

Mindset
1. Curiosity: Embrace learning and don’t hesitate to explore new concepts or
tools.
2. Persistence: Coding can be challenging, but consistent effort will lead to
success.
3. Creativity: Add your unique ideas and touches to each project to make it
stand out.

With these requirements in place, you’re ready to embark on an exciting 8-week

journey into coding mastery. Let’s start building something amazing together!

3
Book:08 WEEK:01 Version 0.1

TASK : 1 DURATION: 3
GOOGLE MEET CLONE (WEB-BASED,
FUNCTIONAL) DAYS

Objective
Build a video conferencing platform inspired by Google Meet, allowing users to create meeting rooms,
invite participants, and conduct video/audio calls.

What You’ll Build

A signup/login system.
A dashboard to create and manage meeting rooms.
Features for video/audio calls, screen sharing, and chat during meetings.

Steps
1. Homepage Design:
Create a clean homepage with options to "Sign Up" or "Log In."
Include an introduction to the platform's features.
2. Core Features:
Allow users to create unique meeting room links.
Enable participants to join meetings using the room links.
Add video and audio conferencing features.
Include a chat section for text communication during meetings.
3. Test:
Verify room creation, participant joining, and video/audio functionalities.
Ensure the chat and screen sharing features work seamlessly.

Checklist
Functional signup/login system.
Working meeting creation, video conferencing, and chat features.
Dynamic updates for active meetings.

GitHub Requirement
Upload your completed code to GitHub with a detailed README.md file explaining features and setup
instructions.

Social Media Caption

"Just completed my Google Meet clone! Video conferencing made easy and efficient. 🚀
#rehancodingwithai #codingwithai"

4
Book:08 Version 0.1

TASK : 2 STREAMYARD CLONE (WEB-BASED, DURATION: 3

FUNCTIONAL) DAYS

Objective
Create a live streaming platform inspired by StreamYard, allowing users to host and join live
broadcasts, manage participants, and record sessions.

What You’ll Build

A signup/login system.
A dashboard to create and manage live streams.
Features for live streaming, participant management, and recording broadcasts.

Steps
1. Homepage Design:
Create a professional homepage introducing the platform with a "Sign Up" or "Log In" button.
Highlight platform features like recording and participant management.
2. Core Features:
Allow users to create live stream rooms with unique links.
Enable participants to join streams via the unique link.
Add functionality for recording live sessions.
Include participant management features (e.g., mute/unmute, remove).
3. Test:
Verify live streaming, participant joining, and recording functionalities.
Ensure the dashboard updates dynamically for active and scheduled streams.

Checklist
Functional signup/login system.
Working live streaming, recording, and participant management features.
Dynamic updates for ongoing and scheduled streams.

GitHub Requirement
Upload your completed code to GitHub with a detailed README.md file explaining features and setup
instructions.

Social Media Caption

"Just completed my StreamYard clone! Live streaming and recording made simple. 🚀
#rehancodingwithai #codingwithai"

5
Book:08 Version 0.1
WEEK:02

TASK : 3 DURATION: 1
GOOGLE CLONE (WEB-BASED,
FUNCTIONAL) WEEK

Objective
Develop a search engine platform inspired by Google, allowing users to input queries and view
dynamically generated results.

What You’ll Build

A search bar on the homepage.
A results page displaying search results dynamically.
Features for query suggestions and pagination (optional).

Steps
1. Homepage Design:
Create a clean and minimalist homepage with a central search bar.
Add a button for "Search" and placeholder text like "Search anything..."
2. Core Features:
Build functionality to accept search queries and display results dynamically.
Use dummy data or mock APIs for simulating search results.
Include a results page showing titles, descriptions, and links.
3. Test:
Verify the search bar accepts input and displays relevant results.
Check for smooth navigation between the homepage and results page.
4. Optional Enhancements:
Add query suggestions while typing in the search bar.
Implement pagination for handling large result sets.

Checklist
Functional search bar on the homepage.
Working results page with dynamic updates.
Smooth navigation between homepage and results page.

GitHub Requirement
Upload your completed code to GitHub with a detailed README.md file explaining features and setup
instructions.

Social Media Caption

"Just completed my Google clone! Searching made efficient and user-friendly. 🚀 #rehancodingwithai
#codingwithai"

6
Book:08 Version 0.1
WEEK:03

TASK : 4 CHATGPT SHOWCASE CLONE DURATION: 1

(FLUTTER) WEEK

Objective
Create a ChatGPT Clone using Flutter, where users can input queries and receive simulated AI
responses.

What You’ll Build

A text-based chat interface similar to ChatGPT.
Features for user input and simulated AI responses displayed in a conversational format.

Steps
1. UI Design:
Build a chat interface with:
A scrollable chat area for displaying messages.
A text input field and send button at the bottom.
2. Core Functionality:
Allow users to type and send queries through the input field.
Simulate AI responses with a predefined set of answers (e.g., simple logic-based responses).
3. Simulated AI:
Use basic logic to generate responses for common inputs like:
User: "What is Flutter?"
AI: "Flutter is an open-source UI software development toolkit by Google."
4. Test the App:
Verify that messages sent by the user and responses from the AI display correctly in the chat
window.

Checklist
A functional chat interface.
Smooth input handling and dynamic response generation.
A visually appealing chat experience resembling ChatGPT.

GitHub Requirement
Upload your completed ChatGPT clone project to GitHub with a detailed README.md explaining features
and setup.

Social Media Caption

"Just completed my ChatGPT clone! Simulating AI conversations is so exciting. 🚀 #rehancodingwithai
#codingwithai"

7
Book:08 WEEK:04 Version 0.1

TASK : 5 DURATION: 3
WHATSAPP CLONE (FLUTTER)
DAYS

Objective
Develop a WhatsApp Clone using Flutter, allowing users to send messages and manage
conversations in a real-time chat interface.

What You’ll Build

A signup/login system.
A contact list and chat screen for messaging.
Features for sending and receiving messages.

Steps
1. UI Design:
Create a contact list screen displaying available contacts.
Design a chat screen with:
A scrollable area for messages.
A text input field and send button at the bottom.

1. Core Functionality:
Allow users to select contacts and open a chat.
Implement message sending and displaying in real-time (using mock data or local storage).
2. Test the App:
Ensure smooth navigation between the contact list and chat screens.
Verify that sent messages are displayed correctly.

Checklist
A functional contact list and chat screen.
Working message sending and display.
Smooth navigation between screens.

GitHub Requirement
Upload your WhatsApp clone project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my WhatsApp clone! Messaging made simple with Flutter. 🚀 #rehancodingwithai
#codingwithai"

8
 Version 0.1

TASK : 6 COPILOT CLONE (FLUTTER) DURATION: 2

DAYS

Objective
Create a productivity assistant inspired by Microsoft Copilot, using Flutter to provide task suggestions
and basic automations.

What You’ll Build

A dashboard for managing tasks.
Features for task input, suggestions, and status tracking.

Steps
1. UI Design:
Create a clean dashboard interface with:
A text input field for adding tasks.
A section for task suggestions and recommendations.
A list of active and completed tasks.
2. Core Functionality:
Allow users to input tasks manually.
Generate simple task suggestions (e.g., based on keywords like "email" or "meeting").
Enable users to mark tasks as completed.
3. Test the App:
Verify task input, suggestions, and status updates work correctly.
Ensure the interface is user-friendly and responsive.

Checklist
A functional task dashboard.
Working task input, suggestions, and status tracking.
Smooth and intuitive user interaction.

GitHub Requirement
Upload your Copilot clone project to GitHub with a detailed README.md explaining features and setup.

Social Media Caption

"Just completed my Copilot clone! Task management made simple and efficient with Flutter. 🚀
#rehancodingwithai #codingwithai"

9
 Version 0.1
WEEK:05

TASK : 7 DURATION: 3
TWITTER CLONE (FLUTTER) DAYS

Objective
Develop a Twitter Clone using Flutter, where users can post tweets, like, and follow other users.

What You’ll Build

A signup/login system.
A feed screen displaying tweets dynamically.
Features for posting tweets, liking tweets, and following users.

Steps
1. UI Design:
Create a login/signup screen for user authentication.
Design a feed screen to display tweets with usernames, timestamps, and content.
Add a button for posting new tweets.
2. Core Functionality:
Allow users to post tweets with a character limit (e.g., 280).
Enable users to like tweets and display the like count dynamically.
Add a follow feature to display tweets from followed users.
3. Test the App:
Verify tweets are posted and displayed correctly.
Ensure the like button updates the count dynamically.
Check that following functionality works as expected.

Checklist
Functional signup/login system.
Working feed, tweet posting, like button, and follow feature.
A responsive and user-friendly interface.

GitHub Requirement
Upload your Twitter clone project to GitHub with a detailed README.md explaining features and setup.

Social Media Caption

"Just completed my Twitter clone! Building social apps is so exciting with Flutter. 🚀 #rehancodingwithai
#codingwithai"

10
 Version 0.1

TASK : 8 DURATION: 3
LINKEDIN CLONE (FLUTTER)
DAYS

Objective
Create a LinkedIn Clone using Flutter, allowing users to create professional profiles, connect with
others, and view a feed of updates.

What You’ll Build

A signup/login system.
A profile page for users to add professional details.
Features for posting updates, viewing a feed, and connecting with others.

Steps
1. UI Design:
Create a signup/login screen for authentication.
Design a profile screen where users can add/edit professional details (name, job title,
experience).
Build a feed screen displaying posts from connections.
2. Core Functionality:
Allow users to create and update profiles with professional details.
Enable users to post updates (e.g., "Just got promoted!").
Add a "Connect" button on profiles to build a network.
Show posts from connected users in the feed.
3. Test the App:
Verify profile creation, updating, and posting work correctly.
Ensure the feed displays posts dynamically from connected users.
Check the connection functionality is seamless.

Checklist
Functional signup/login system.
Working profile page, feed, and connect feature.
Smooth navigation between profile, feed, and connection screens.

GitHub Requirement
Upload your LinkedIn clone project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my LinkedIn clone! Professional networking made simple with Flutter. 🚀
#rehancodingwithai #codingwithai"

11
 Version 0.1
WEEK:06

TASK : 9 DURATION: 3
INSTAGRAM CLONE (FLUTTER)
DAYS

Objective
Develop an Instagram Clone using Flutter, focusing on image sharing, liking, and commenting
functionalities.

What You’ll Build

A signup/login system.
A feed screen displaying user-uploaded photos.
Features for posting images, liking posts, and adding comments.

Steps
1. UI Design:
Create a login/signup screen for user authentication.
Design a feed screen with photo thumbnails, captions, and like/comment buttons.
Add a screen for uploading photos with captions.
2. Core Functionality:
Allow users to upload images with captions.
Enable users to like posts and display the like count dynamically.
Add a comment section under each post to allow user interaction.
3. Test the App:
Verify that photos upload correctly and appear in the feed.
Ensure likes and comments update dynamically and display accurately.

Checklist
Functional signup/login system.
Working photo upload, like button, and comment section.
Smooth and responsive UI for photo sharing.

GitHub Requirement
Upload your Instagram clone project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my Instagram clone! Photo sharing made beautiful with Flutter. 🚀
#rehancodingwithai #codingwithai"

12
 Version 0.1

TASK : 10 DURATION: 3
FACEBOOK CLONE (FLUTTER) DAYS

Objective
Build a Facebook Clone using Flutter, focusing on profile creation, posting updates, and adding
friends.

What You’ll Build

A signup/login system.
A profile page for users to add personal details.
Features for posting updates, liking posts, and friend requests.

Steps
1. UI Design:
Create a login/signup screen for authentication.
Design a profile screen where users can add/edit personal details (name, bio, profile picture).
Build a feed screen displaying posts from friends.
2. Core Functionality:
Allow users to post updates with text and images.
Enable users to like posts and view like counts dynamically.
Add a "Friend Request" feature to connect users.
3. Test the App:
Verify profile creation, updating, and posting updates work correctly.
Ensure the feed displays posts dynamically from connected friends.
Test the friend request functionality for smooth user interaction.

Checklist
Functional signup/login system.
Working profile page, feed, and friend request feature.
Smooth navigation between profile, feed, and connection screens.

GitHub Requirement
Upload your Facebook clone project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my Facebook clone! Social connections made fun with Flutter. 🚀
#rehancodingwithai #codingwithai"

13
 WEEK:07 Version 0.1

TASK : 11 PINTEREST CLONE (FLUTTER) DURATION: 3

DAYS

Objective
Develop a Pinterest Clone using Flutter, focusing on image sharing, boards creation, and user
interaction.

What You’ll Build

A signup/login system.
A feed screen displaying pins dynamically.
Features for creating boards, saving pins, and searching for content.

Steps
1. UI Design:
Create a login/signup screen for user authentication.
Design a feed screen showing images (pins) in a grid layout.
Add functionality for users to create boards and save pins to them.

1. Core Functionality:
Allow users to upload images as pins with titles and descriptions.
Enable users to create boards (e.g., "My Favorites").
Add a search bar to find pins based on keywords or tags.
2. Test the App:
Verify image uploads and board creation functionalities.
Ensure the feed displays pins dynamically and the search works smoothly.
Checklist
Functional signup/login system.
Working image upload, board creation, and search features.
A responsive and visually appealing grid layout for pins.

GitHub Requirement
Upload your Pinterest clone project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my Pinterest clone! Visual inspiration made easy with Flutter. 🚀
#rehancodingwithai #codingwithai"

14
 Version 0.1

TASK : 12 DURATION: 3
SNAPCHAT CLONE (FLUTTER)
DAYS

Objective
Create a Snapchat Clone using Flutter, focusing on photo sharing, disappearing messages, and
interactive user features.

What You’ll Build

A signup/login system.
A camera screen to capture and send photos.
Features for sending snaps, viewing snaps, and disappearing messages.

Steps
1. UI Design:
Create a login/signup screen for user authentication.
Design a camera screen to capture photos, with buttons for snapping and sending.
Add a chat screen for sending and receiving snaps.
2. Core Functionality:
Implement a feature to capture photos from the camera and send them to friends.
Enable snaps to disappear after being viewed (simulate this with timers or flags).
Add a notification system to alert users of new snaps.
3. Test the App:
Verify photo capture and sending functionalities.
Ensure snaps disappear after being viewed, simulating the ephemeral nature of messages.

Checklist
Functional signup/login system.
Working camera screen, snap sending, and disappearing messages.
Smooth and user-friendly navigation.

GitHub Requirement
Upload your Snapchat clone project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my Snapchat clone! Snapping made simple and interactive with Flutter. 🚀
#rehancodingwithai #codingwithai"
 Version 0.1
WEEK:08

TASK : 13 TIC-TAC-TOE GAME (FLUTTER) DURATION: 3

DAYS

Objective
Build a simple Tic-Tac-Toe game using Flutter, allowing two players to play on a single device with a
functional UI and winning logic.

What You’ll Build

A game board with a 3x3 grid.
Functionality for two-player gameplay.
Winning and draw detection logic.

Steps
1. UI Design:
Create a clean interface with a 3x3 grid representing the game board.
Add a button to reset the game.
2. Core Functionality:
Allow two players to take turns marking X and O on the grid.
Implement logic to detect a win (three in a row, column, or diagonal) or a draw.
Display a message for the winner or if the game ends in a draw.
3. Test the Game:
Ensure the game correctly alternates between players.
Verify the winning and draw conditions trigger at the right time.

Checklist
Functional game board with a 3x3 grid.
Working turn-based logic and win/draw detection.
Smooth UI and responsive gameplay.

GitHub Requirement
Upload your Tic-Tac-Toe game project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my Tic-Tac-Toe game! Simple, fun, and built with Flutter. 🚀 #rehancodingwithai
#codingwithai"
 Version 0.1

TASK : 14 DURATION: 3
PACMAN GAME (FLUTTER)
DAYS

Objective
Create a Pacman game using Flutter, featuring a simple maze, a controllable Pacman, and basic
scoring functionality.

What You’ll Build

A maze screen with walls and paths for Pacman to navigate.
Features for Pacman movement, point collection, and basic enemy logic.

Steps
1. UI Design:
Design a maze layout with walls and paths.
Add a Pacman character (use a circular shape or a simple icon).
Place dots on the maze for Pacman to collect.
2. Core Functionality:
Allow Pacman to move in four directions using swipe or arrow controls.
Implement logic for collecting dots and updating the score.
Add a simple enemy (optional) that moves randomly through the maze.
3. Game Logic:
Detect collisions between Pacman and walls to prevent movement.
End the game if Pacman collides with the enemy.
Display the final score when the game ends.
4. Test the Game:
Verify smooth movement for Pacman.
Ensure dots are collected correctly, and the score updates dynamically.
Test collision logic for walls and enemies.

Checklist
Functional maze layout.
Working Pacman movement and point collection.
Basic game-ending conditions (enemy collision or all points collected).

GitHub Requirement
Upload your Pacman game project to GitHub with a detailed README.md explaining features and
setup.

Social Media Caption

"Just completed my Pacman game! Reviving the classic with Flutter. 🚀 #rehancodingwithai
#codingwithai"
 Version 0.1
JoiningDate:_____________________

REPORT CARD
Task Week Score (Out of 10) Completed (Yes/No)

Task 1: Google Meet Clone Week 1 10

Task 2: StreamYard Clone Week 1 10

Task 3: Google Clone Week 2 10

Task 4: ChatGPT Clone Week 3 10

Task 5: WhatsApp Clone Week 3 10

Task 6: Copilot Clone Week 4 10

Task 7: Twitter Clone Week 4 10

Task 8: LinkedIn Clone Week 5 10

Task 9: Instagram Clone Week 5 10

Task 10: Facebook Clone Week 6 10

Task 11: Pinterest Clone Week 6 10

Task 12: Snapchat Clone Week 7 10

Task 13: Tic-Tac-Toe Game Week 8 10

Task 14: Pacman Game Week 8 10

 Version 0.1

Conclusion
Congratulations on completing Book 8! Over the course of
this journey, you’ve explored the exciting world of web and
app development, building functional clones of popular
platforms and creating engaging projects. Each task has
been a step toward mastering coding and sharpening your
problem-solving skills.

From developing web-based projects like Google Meet and

StreamYard to crafting app-based clones like WhatsApp,
Instagram, and Pacman, you’ve gained valuable hands-on
experience. These projects are not just exercises—they’re
portfolio-worthy creations that showcase your abilities to
tackle real-world challenges.
By completing this book, you’ve not only expanded your
technical knowledge but also built the confidence to
innovate and create. Remember, coding is a continuous
learning process. Every project you complete is a milestone,
and there’s always more to explore and achieve.

Keep building, keep experimenting, and never stop learning.

The skills you’ve gained here will take you far. Your next big
idea is just one line of code away!

Happy Coding!
 Codingwith AI
Create, Explore,
and Have Fun
Coding with AI
Tools!