Full Stack Development

Using AI
You will learn about how to create Real-World
Application only using AI !
Project 1: Real Estate Website
Prompt: Write code for a Real estate website using
Next.js and Tailwind CSS. Add filler data to showcase
houses with prices and any other necessary details.

9
Project 2: BMI Calculator
Prompt: Create a BMI Calculator Website with the following features:
1. Basic Functionality:
• Inputs for height (cm or inches) and weight (kg or pounds).
• A "Calculate" button to compute BMI.
• Display the calculated BMI value.
• Categorize the BMI result into one of the following ranges: Underweight, Normal, Overweight, Obese.
• Display personalized health recommendations based on the BMI category.

2. Enhanced Features:
• Unit Conversion: Allow users to toggle between metric (cm, kg) and imperial (inches, pounds) units. Automatically convert the input values based on the
selected unit system.
• Visual Indicators: Use a progress bar or chart to visually show where the user’s BMI falls within the healthy range. Colour-code the progress bar (e.g., green
for normal, red for obese).
• Age and Gender Inputs: Include optional fields for age and gender to adjust BMI-related recommendations (e.g., specific advice for older adults or children).
• Health Recommendations: Show additional health tips and suggestions (e.g., exercise, diet) based on the user’s BMI category.
• Responsive Design: Ensure the website is fully responsive and mobile-friendly.

3. Advanced Features:
• Save Results: Allow users to save their BMI calculation history using local Storage or enable exporting their data as a downloadable CSV file and add feature
to delete or clear Saves.
• BMI History: Display a graph or chart of past BMI calculations.
• Share Results: Provide a "Share" button to generate a link or share results directly to social media.
• Interactive BMI Chart: Display an interactive chart of BMI categories with a visual indication of where the user’s BMI falls.
• Daily Calorie Needs: Based on height, weight, and activity level, estimate and display the user's daily calorie needs.
• Exercise Calculator Integration: Suggest an estimated number of calories to burn daily or weekly to achieve a healthier BMI.

4. Additional Features:
• Multilingual Support: Provide language options for international users.
• Accessibility: Ensure accessibility features like text-to-speech and high contrast mode for visually impaired users. 9
• Gamification: Incorporate badges or achievements for users who track their BMI consistently or reach healthier BMI ranges.
Project 3: Portfolio
Create a responsive portfolio website for Ishank using HTML, Tailwind CSS, and Three.js with 3D animations for all sections. Give me
step-by-step guide .The site should include:

1.Hero Section:
• A 3D animated background (e.g., rotating shapes or interactive particles) created with Three.js.
• A welcoming message: "Hi, I'm Ishank, a web developer specializing in modern, interactive websites and AI-powered solutions.”

2.About Section:
• A 3D animated object (e.g., a spinning globe or floating geometric shapes).
• A short paragraph introducing Ishank and listing skills: HTML, CSS, Tailwind CSS, JavaScript, Python, ReactJS, Next.js, and AI tools
like LangChain and OpenAI.
3.Projects Section:
• Interactive 3D project cards (e.g., tilting or rotating effects on hover) using Three.js.
• Showcase 3–4 featured projects with titles, descriptions, and links to live demos or GitHub.

4.Services Section:
• Add a section to highlight Ishank’s services: web development, AI integration, and UI/UX design.
• Include 3D icons or animations to represent each service.
5.Contact Section:
• A contact form with animated 3D elements (e.g., floating envelope or phone icons).
• Fields for name, email, and message.

Design Requirements:
•Use Tailwind CSS for a modern, clean, and responsive layout.
•Add smooth scrolling and transition effects.
•Use a professional color scheme with shades of blue, white, and gray.
•Include a footer with the text: "© 2024 Ishank. All Rights Reserved."
•Email: [email protected]
•Github: https://github.com/IshankReddy
9
Project 4: Typing Speed
Tester
Overview:
Build an interactive web application that challenges users to measure their typing speed
and accuracy in real time. This fun and functional tool will display random paragraphs for
users to type, calculate their performance, and provide detailed feedback to help them
improve their typing skills.

Core Features:
1.Random Paragraph Display: Dynamically display a random paragraph from a
predefined list for users to type.
2.Real-Time Timer: Start tracking the typing duration from the user’s first keystroke to the
last.
3.Words Per Minute (WPM) Calculation: Analyze the user's speed in terms of words per
minute.
4.Accuracy Measurement: Calculate the percentage of accurate keystrokes compared to
the original text.
5.Performance Summary: Provide detailed feedback, including speed, accuracy, and
total time taken.

9
Project 5: Quick Thoughts
Concept: A single-page website where users can jot down temporary thoughts or notes. The content
disappears when the page is refreshed, making it perfect for quick brainstorming or disposable writing.

Key Features:
1.Text Area: A simple space to type anything.
2.Save: Add a Feature where you can save notes. Once you save you can edit and delete.
3.Reset Button: Clear the notepad with one click.

Technologies to Use:
•Frontend: Use only HTML and CSS for structure and styling, and a little JavaScript for interactivity. No react
or anything like that.

9
Project 5: Focus Timer
Concept: A single-page website where users can set a timer to focus on tasks (e.g., 25
minutes of work, 5 minutes break). It's a basic productivity tool to help manage time
and avoid distractions.

Key Features:
1.Timer Display: A countdown timer that shows minutes and seconds.
2.Start/Reset Buttons: Start the timer or reset it back to the default.
3.Customizable Duration: Allow users to set work and break intervals if needed.

Technologies to Use: Use only HTML and CSS for structure and styling, and a little
JavaScript for interactivity. No react or anything like that.

9
Thanks for
Watching
If you like this video and want to support us, please like,
share, and subscribe to our channel Kavi Webdesigns and
keep on watching video’s, show us some love and have a
nice day and this Ishank signing of.

www.kavidigitalmarketing.com