Author: saqibkhan

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

npx create-react-app chat-app
cd chat-app

Step 2: Create Chat Application Components

Replace the content of src/App.js with the following code:

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');
  const [username, setUsername] = useState('');

  const handleSendMessage = () => {
if (message && username) {
  setMessages([...messages, { username, text: message }]);
  setMessage('');
}
  };

  return (
<div className="App">
  <h1>Chat Application</h1>
  <div className="chat-window">
    <div className="messages">
      {messages.map((msg, index) => (
        <div key={index} className="message">
          <strong>{msg.username}: </strong>
          {msg.text}
        </div>
      ))}
    </div>
  </div>
  <input
    type="text"
    placeholder="Your name"
    value={username}
    onChange={(e) => setUsername(e.target.value)}
  />
  <input
    type="text"
    placeholder="Type a message"
    value={message}
    onChange={(e) => setMessage(e.target.value)}
  />
  <button onClick={handleSendMessage}>Send</button>
</div>
  );
};

export default App;

Step 3: Style Your Chat Application

Open src/App.css and add the following styles:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.chat-window {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 20px;
}

.messages {
  text-align: left;
}

.message {
  margin: 5px 0;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

Step 4: Run Your Application

In the terminal, run:

npm start

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

npx create-react-app expense-tracker
cd expense-tracker

Step 2: Create the Expense Tracker Components

Replace the content of src/App.js with the following code:

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [expenses, setExpenses] = useState([]);
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState('');

  const addExpense = () => {
if (description && amount) {
  setExpenses([...expenses, { description, amount: parseFloat(amount) }]);
  setDescription('');
  setAmount('');
}
  };

  const totalExpenses = expenses.reduce((acc, expense) => acc + expense.amount, 0);

  return (
<div className="App">
  <h1>Expense Tracker</h1>
  <div className="input-container">
    <input
      type="text"
      placeholder="Description"
      value={description}
      onChange={(e) => setDescription(e.target.value)}
    />
    <input
      type="number"
      placeholder="Amount"
      value={amount}
      onChange={(e) => setAmount(e.target.value)}
    />
    <button onClick={addExpense}>Add Expense</button>
  </div>
  
  <h2>Total Expenses: ${totalExpenses.toFixed(2)}</h2>
  <ul>
    {expenses.map((expense, index) => (
      <li key={index}>
        {expense.description}: ${expense.amount.toFixed(2)}
      </li>
    ))}
  </ul>
</div>
  );
};

export default App;

Step 3: Style Your Expense Tracker

Open src/App.css and add the following styles:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.input-container {
  margin-bottom: 20px;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

h2 {
  margin-top: 20px;
}

Step 4: Run Your Application

In the terminal, run:

npm start

Set Up Your React Project

Open your terminal and run the following commands:

npx create-react-app blog-platform
cd blog-platform

Step 2: Install React Router

You’ll need React Router for navigation:

npm install react-router-dom

Step 3: Create Blog Components

Replace the content of src/App.js with the following code:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import './App.css';

const postsData = [
  {
id: 1,
title: 'First Blog Post',
content: 'This is the content of the first blog post.',
  },
  {
id: 2,
title: 'Second Blog Post',
content: 'This is the content of the second blog post.',
  },
  {
id: 3,
title: 'Third Blog Post',
content: 'This is the content of the third blog post.',
  },
];

const Home = () => (
  <div>
&lt;h2>Blog Posts&lt;/h2>
&lt;ul>
  {postsData.map((post) => (
    &lt;li key={post.id}>
      &lt;Link to={/post/${post.id}}>{post.title}&lt;/Link>
    &lt;/li>
  ))}
&lt;/ul>
  </div>
);

const Post = ({ match }) => {
  const post = postsData.find((p) => p.id === parseInt(match.params.id));

  return (
&lt;div>
  {post ? (
    &lt;>
      &lt;h2>{post.title}&lt;/h2>
      &lt;p>{post.content}&lt;/p>
      &lt;Link to="/">Go Back&lt;/Link>
    &lt;/>
  ) : (
    &lt;h2>Post not found&lt;/h2>
  )}
&lt;/div>
  );
};

const App = () => {
  return (
&lt;Router>
  &lt;div className="App">
    &lt;header className="header">
      &lt;h1>Blog Platform&lt;/h1>
      &lt;nav>
        &lt;Link to="/">Home&lt;/Link>
      &lt;/nav>
    &lt;/header>
    &lt;Switch>
      &lt;Route path="/" exact component={Home} />
      &lt;Route path="/post/:id" component={Post} />
    &lt;/Switch>
  &lt;/div>
&lt;/Router>
  );
};

export default App;

Step 4: Style Your Blog Platform

Open src/App.css and add some basic styles:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.header {
  background-color: #282c34;
  color: white;
  padding: 20px;
}

.header nav a {
  margin: 0 15px;
  color: white;
  text-decoration: none;
}

.header nav a:hover {
  text-decoration: underline;
}

h2 {
  margin-top: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

footer {
  margin-top: 40px;
  padding: 20px 0;
  background-color: #f1f1f1;
}

Step 5: Run Your Application

In the terminal, run:

npm start

Set Up Your React Project

Open your terminal and run the following commands:

npx create-react-app ecommerce-store
cd ecommerce-store

Step 2: Create the E-commerce Store Components

Replace the content of src/App.js with the following code:

import React, { useState } from 'react';
import './App.css';

const productsData = [
  { id: 1, name: 'Product 1', price: 29.99, image: 'https://via.placeholder.com/150' },
  { id: 2, name: 'Product 2', price: 39.99, image: 'https://via.placeholder.com/150' },
  { id: 3, name: 'Product 3', price: 49.99, image: 'https://via.placeholder.com/150' },
];

const App = () => {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
setCart([...cart, product]);
  };

  const getCartCount = () => {
return cart.length;
  };

  return (
<div className="App">
  <header className="header">
    <h1>E-commerce Store</h1>
    <div className="cart">
      <span>Cart: {getCartCount()} items</span>
    </div>
  </header>
  <main>
    <h2>Products</h2>
    <div className="product-list">
      {productsData.map((product) => (
        <div key={product.id} className="product-card">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>${product.price.toFixed(2)}</p>
          <button onClick={() => addToCart(product)}>Add to Cart</button>
        </div>
      ))}
    </div>
  </main>
  <footer>
    <p>© 2024 E-commerce Store</p>
  </footer>
</div>
  );
};

export default App;

Step 3: Style Your Store

Open src/App.css and add the following styles:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.header {
  background-color: #282c34;
  color: white;
  padding: 20px;
}

.header .cart {
  margin-top: 10px;
}

.product-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.product-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  width: 200px;
  text-align: center;
}

.product-card img {
  width: 100%;
  height: auto;
}

footer {
  margin-top: 40px;
  padding: 20px 0;
  background-color: #f1f1f1;
}

Step 4: Run Your Application

In the terminal, run:

npm start

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

bashCopy codenpx create-react-app portfolio
cd portfolio

Step 2: Create the Portfolio Components

Replace the content of src/App.js with the following code:

javascriptCopy codeimport React from 'react';
import './App.css';

const App = () => {
  return (
<div className="App">
  <header className="header">
    <h1>Your Name</h1>
    <p>Your Tagline or a short bio goes here.</p>
    <nav>
      <a href="#projects">Projects</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <section id="projects">
    <h2>Projects</h2>
    <div className="project-list">
      <div className="project-card">
        <h3>Project Title 1</h3>
        <p>Description of project 1.</p>
        <a href="https://github.com/yourusername/project1" target="_blank" rel="noopener noreferrer">View Project</a>
      </div>
      <div className="project-card">
        <h3>Project Title 2</h3>
        <p>Description of project 2.</p>
        <a href="https://github.com/yourusername/project2" target="_blank" rel="noopener noreferrer">View Project</a>
      </div>
      {/* Add more projects as needed */}
    </div>
  </section>
  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>JavaScript</li>
      <li>React</li>
      <li>CSS</li>
      <li>HTML</li>
      {/* Add more skills as needed */}
    </ul>
  </section>
  <footer id="contact">
    <h2>Contact Me</h2>
    <p>Email: [email protected]</p>
    <p>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">Your LinkedIn</a></p>
    <p>GitHub: <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">Your GitHub</a></p>
  </footer>
</div>
  );
};

export default App;

Step 3: Style Your Portfolio

Open src/App.css and add the following styles:

cssCopy codebody {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.header {
  background-color: #282c34;
  color: white;
  padding: 50px 0;
}

.header h1 {
  margin: 0;
}

.header nav a {
  margin: 0 15px;
  color: white;
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

section {
  margin: 40px 0;
}

.project-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  width: 200px;
}

.project-card h3 {
  margin: 0;
}

footer {
  margin-top: 40px;
  padding: 20px 0;
  background-color: #f1f1f1;
}

Step 4: Run Your Application

In the terminal, run:

bashCopy codenpm start

• Features:
  • User-generated recipes with images
  • Search and filter by ingredients or cuisine
  • Comment and rating system
  • Save favorite recipes to user profile
• Technologies:
  • REST API or GraphQL for backend
  • Image uploads with Cloudinary or similar service
  • Responsive design for mobile compatibility

Set Up Your React Project

Open your terminal and create a new React app:

bashCopy codenpx create-react-app recipe-finder
cd recipe-finder

Step 2: Get Your API Key

1. Sign up at Edamam.
2. Create a new application to get your App ID and App Key.

Step 3: Create the Recipe Finder Component

Replace the content of src/App.js with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import './App.css';

const App = () => {
  const [query, setQuery] = useState('');
  const [recipes, setRecipes] = useState([]);
  const [error, setError] = useState('');

  const APP_ID = 'YOUR_APP_ID'; // Replace with your Edamam App ID
  const APP_KEY = 'YOUR_APP_KEY'; // Replace with your Edamam App Key

  const fetchRecipes = async () => {
if (!query) return;
try {
  const response = await fetch(https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY});
  const data = await response.json();
  if (data.hits.length === 0) {
    setError('No recipes found.');
  } else {
    setRecipes(data.hits);
    setError('');
  }
} catch (err) {
  setError('Failed to fetch recipes.');
}
  };

  const handleKeyPress = (e) => {
if (e.key === 'Enter') {
  fetchRecipes();
}
  };

  return (
<div className="App">
  <h1>Recipe Finder</h1>
  <input
    type="text"
    value={query}
    onChange={(e) => setQuery(e.target.value)}
    onKeyPress={handleKeyPress}
    placeholder="Enter ingredients..."
  />
  <button onClick={fetchRecipes}>Search</button>
  {error && <p className="error">{error}</p>}
  <div className="recipe-list">
    {recipes.map((item) => (
      <div key={item.recipe.label} className="recipe-card">
        <h2>{item.recipe.label}</h2>
        <img src={item.recipe.image} alt={item.recipe.label} />
        <p>Calories: {Math.round(item.recipe.calories)}</p>
        <a href={item.recipe.url} target="_blank" rel="noopener noreferrer">View Recipe</a>
      </div>
    ))}
  </div>
</div>
  );
};

export default App;

Step 4: Style Your App

Open src/App.css and add some styles:

cssCopy code.App {
  text-align: center;
  margin: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

.error {
  color: red;
}

.recipe-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.recipe-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  width: 200px;
}

.recipe-card img {
  width: 100%;
  border-radius: 8px;
}

Step 5: Run Your Application

In the terminal, run:

bashCopy codenpm start

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

bashCopy codenpx create-react-app weather-app
cd weather-app

Step 2: Get Your API Key

1. Go to OpenWeatherMap and sign up for a free account.
2. After logging in, navigate to the API section and get your API key.

Step 3: Create the Weather App Component

Open src/App.js and replace its content with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import './App.css';

const App = () => {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState(null);
  const [error, setError] = useState('');

  const API_KEY = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key

  const handleInputChange = (e) => {
setCity(e.target.value);
  };

  const fetchWeather = async () => {
if (!city) return;
try {
  const response = await fetch(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric);
  if (!response.ok) {
    throw new Error('City not found');
  }
  const data = await response.json();
  setWeather(data);
  setError('');
} catch (err) {
  setError(err.message);
  setWeather(null);
}
  };

  const handleKeyPress = (e) => {
if (e.key === 'Enter') {
  fetchWeather();
}
  };

  return (
<div className="App">
  <h1>Weather App</h1>
  <input
    type="text"
    value={city}
    onChange={handleInputChange}
    onKeyPress={handleKeyPress}
    placeholder="Enter city name..."
  />
  <button onClick={fetchWeather}>Get Weather</button>
  {error && <p className="error">{error}</p>}
  
  {weather && (
    <div className="weather-info">
      <h2>{weather.name}</h2>
      <p>Temperature: {weather.main.temp} °C</p>
      <p>Weather: {weather.weather[0].description}</p>
      <p>Humidity: {weather.main.humidity} %</p>
      <p>Wind Speed: {weather.wind.speed} m/s</p>
    </div>
  )}
</div>
  );
};

export default App;

Step 4: Style Your App

Open src/App.css and add some basic styles:

cssCopy code.App {
  text-align: center;
  margin: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

.weather-info {
  margin-top: 20px;
}

.error {
  color: red;
}

Step 5: Run Your Application

In the terminal, run:

bashCopy codenpm start

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

bashCopy codenpx create-react-app todo-list
cd todo-list

Step 2: Create the Todo List Component

Open src/App.js and replace its content with the following code:

javascriptCopy codeimport React, { useState } from 'react';
import './App.css';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
setInputValue(e.target.value);
  };

  const handleAddTask = () => {
if (inputValue.trim()) {
  setTasks([...tasks, { text: inputValue, completed: false }]);
  setInputValue('');
}
  };

  const handleToggleTask = (index) => {
const newTasks = [...tasks];
newTasks[index].completed = !newTasks[index].completed;
setTasks(newTasks);
  };

  const handleDeleteTask = (index) => {
const newTasks = tasks.filter((_, i) => i !== index);
setTasks(newTasks);
  };

  return (
<div className="App">
  <h1>Todo List</h1>
  <input
    type="text"
    value={inputValue}
    onChange={handleInputChange}
    placeholder="Add a new task..."
  />
  <button onClick={handleAddTask}>Add Task</button>
  <ul>
    {tasks.map((task, index) => (
      <li key={index} style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
        <span onClick={() => handleToggleTask(index)}>{task.text}</span>
        <button onClick={() => handleDeleteTask(index)}>Delete</button>
      </li>
    ))}
  </ul>
</div>
  );
};

export default App;

Step 3: Style Your App

Open src/App.css and add some basic styles:

cssCopy code.App {
  text-align: center;
  margin: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

Step 4: Run Your Application

In the terminal, run:

bashCopy codenpm start