My Blog

Category: React JS Projects

https://static.vecteezy.com/system/resources/thumbnails/016/712/564/small_2x/3d-render-illustration-of-project-management-analysis-result-icon-png.png

  • Event Planning App

    Step 1: Set Up the Backend

    1. Initialize the ProjectbashCopy codemkdir event-planner cd event-planner npm init -y npm install express cors body-parser
    2. Create the Server (server.js)
    javascriptCopy codeconst express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const app = express(); const PORT = 3000; app.use(cors()); app.use(bodyParser.json()); let events = []; // Create an event app.post('/events', (req, res) => { const { name, date } = req.body; const newEvent = { id: Date.now(), name, date }; events.push(newEvent); res.status(201).json(newEvent); }); // Get all events app.get('/events', (req, res) => { res.json(events); }); // Delete an event app.delete('/events/:id', (req, res) => { const { id } = req.params; events = events.filter(event => event.id != id); res.status(204).send(); }); app.listen(PORT, () => { console.log(Server is running on http://localhost:${PORT}); });
    1. Run the ServerbashCopy codenode server.js

    Step 2: Create the Frontend

    1. Create the HTML Structure (index.html)
    htmlCopy code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Planner</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Event Planner</h1> <form id="eventForm"> <input type="text" id="eventName" placeholder="Event Name" required> <input type="date" id="eventDate" required> <button type="submit">Create Event</button> </form> <ul id="eventList"></ul> <script src="script.js"></script> </body> </html>
    1. Add Some Styles (styles.css)
    cssCopy codebody { font-family: Arial, sans-serif; margin: 20px; } form { margin-bottom: 20px; } input { margin-right: 10px; } ul { list-style-type: none; padding: 0; } li { margin: 5px 0; }
    1. Add Functionality with JavaScript (script.js)
    javascriptCopy codeconst eventForm = document.getElementById('eventForm'); const eventList = document.getElementById('eventList'); eventForm.addEventListener('submit', async (e) => { e.preventDefault(); const name = document.getElementById('eventName').value; const date = document.getElementById('eventDate').value; const response = await fetch('http://localhost:3000/events', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name, date }), }); const newEvent = await response.json(); addEventToList(newEvent); eventForm.reset(); }); const addEventToList = (event) => { const li = document.createElement('li'); li.textContent = ${event.name} on ${event.date}; li.dataset.id = event.id; const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Delete'; deleteBtn.onclick = () => deleteEvent(event.id); li.appendChild(deleteBtn); eventList.appendChild(li); }; const deleteEvent = async (id) => { await fetch(http://localhost:3000/events/${id}, { method: 'DELETE', }); document.querySelector(li&#91;data-id='${id}']).remove(); }; const fetchEvents = async () => { const response = await fetch('http://localhost:3000/events'); const events = await response.json(); events.forEach(addEventToList); }; fetchEvents();

    Step 3: Test Your App

    1. Start the server with node server.js.
    2. Open index.html in your browser.
    3. Create and delete events to see how it works!

  • Social Media Dashboard

    Sample Social Media Dashboard

    1. HTML Structure

    <!DOCTYPE html>
<html lang="en">
<head>

    &lt;meta charset="UTF-8">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;title>Social Media Dashboard&lt;/title>
&lt;link rel="stylesheet" href="styles.css">
    </head>
<body>

    &lt;div class="dashboard">
    &lt;h1>Social Media Dashboard&lt;/h1>
    &lt;div id="posts">&lt;/div>
&lt;/div>
&lt;script src="script.js">&lt;/script>
    </body>
</html>

    2. CSS Styles (styles.css)

    body {

    font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
    }

.dashboard {

    max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

.post {

    border-bottom: 1px solid #ddd;
padding: 10px 0;
    }

.post:last-child {

    border-bottom: none;
    }

.post h2 {

    margin: 0;
font-size: 18px;
    }

.post p {

    margin: 5px 0;
    }

.post .engagement {

    color: #888;
    }

    3. JavaScript Logic (script.js)

    const postsContainer = document.getElementById('posts');

// Mock API data
const mockApiData = [

    {
    id: 1,
    title: "Post One",
    content: "This is the content of post one.",
    likes: 25,
    shares: 5
},
{
    id: 2,
    title: "Post Two",
    content: "This is the content of post two.",
    likes: 15,
    shares: 3
},
{
    id: 3,
    title: "Post Three",
    content: "This is the content of post three.",
    likes: 30,
    shares: 10
}
    ];

// Function to render posts
function renderPosts(posts) {

    posts.forEach(post => {
    const postDiv = document.createElement('div');
    postDiv.classList.add('post');
    postDiv.innerHTML = `
        &lt;h2>${post.title}&lt;/h2>
        &lt;p>${post.content}&lt;/p>
        &lt;div class="engagement">
            &lt;span>${post.likes} Likes&lt;/span> | 
            &lt;span>${post.shares} Shares&lt;/span>
        &lt;/div>
    `;
    postsContainer.appendChild(postDiv);
});
    }

// Simulate fetching data from an API
function fetchPosts() {

    // Simulating an API call with setTimeout
setTimeout(() => {
    renderPosts(mockApiData);
}, 1000);
    }

// Initialize the dashboard
fetchPosts();

    Explanation

    1. HTML: The HTML file sets up the structure for the dashboard, including a title and a container for the posts.
    2. CSS: The styles give the dashboard a clean, modern look. You can adjust colors and spacing to fit your needs.
    3. JavaScript:
      • A mock data array simulates posts you’d get from a social media API.
      • The renderPosts function dynamically creates and displays each post.
      • fetchPosts simulates an API call using setTimeout to delay rendering.

  • Fitness Tracker

    Fitness Tracker Project Overview

    1. Objectives:
      • Track daily steps.
      • Record workouts (type, duration).
      • Calculate calories burned based on steps and workouts.
      • Visualize data.
    2. Technologies:
      • Python
      • Pandas for data manipulation
      • Matplotlib for visualization

    Step-by-Step Implementation

    Step 1: Set Up Your Environment

    Make sure you have Python installed along with the required libraries. You can install the necessary libraries using pip:

    pip install pandas matplotlib

    Step 2: Define the Fitness Tracker Class

    Create a class to encapsulate the fitness tracking functionality.

    import pandas as pd
import matplotlib.pyplot as plt

class FitnessTracker:

    def __init__(self):
    self.data = pd.DataFrame(columns=&#91;'Date', 'Steps', 'Workout Type', 'Duration', 'Calories Burned'])

def add_steps(self, date, steps):
    self.data = self.data.append({'Date': date, 'Steps': steps, 'Workout Type': None, 'Duration': None, 'Calories Burned': None}, ignore_index=True)

def add_workout(self, date, workout_type, duration):
    # Calculate calories burned (approximate: 5 calories per minute for moderate exercise)
    calories_burned = duration * 5
    self.data = self.data.append({'Date': date, 'Steps': None, 'Workout Type': workout_type, 'Duration': duration, 'Calories Burned': calories_burned}, ignore_index=True)

def total_steps(self):
    return self.data&#91;'Steps'].sum()
    

    def total_calories(self):
    return self.data&#91;'Calories Burned'].sum()
    

    def visualize_data(self):
    self.data&#91;'Date'] = pd.to_datetime(self.data&#91;'Date'])
    self.data.set_index('Date', inplace=True)
    
    plt.figure(figsize=(10, 5))
    plt.plot(self.data.index, self.data&#91;'Steps'], label='Steps', marker='o')
    plt.plot(self.data.index, self.data&#91;'Calories Burned'].cumsum(), label='Calories Burned', marker='o')
    plt.title('Fitness Tracker Data')
    plt.xlabel('Date')
    plt.ylabel('Count')
    plt.legend()
    plt.xticks(rotation=45)
    plt.tight_layout()
    plt.show()

    Step 3: Use the Fitness Tracker

    Now, let’s create an instance of the FitnessTracker class and add some data.

    # Initialize the fitness tracker
tracker = FitnessTracker()

# Adding some sample data
tracker.add_steps('2023-09-01', 10000)
tracker.add_steps('2023-09-02', 8000)
tracker.add_workout('2023-09-02', 'Running', 30)
tracker.add_steps('2023-09-03', 12000)
tracker.add_workout('2023-09-03', 'Cycling', 45)

# Display total steps and calories burned
print(f"Total Steps: {tracker.total_steps()}")
print(f"Total Calories Burned: {tracker.total_calories()}")

# Visualize the data
tracker.visualize_data()

    Step 4: Run the Project

    1. Save your code in a file, e.g., fitness_tracker.py.
    2. Run the script using Python:
    python fitness_tracker.py

  • Online Code Editor

    • Features:
      • Live coding environment with syntax highlighting
      • Support for multiple programming languages
      • Save and share code snippets
      • Collaborative coding in real-time
    • Technologies:
      • Monaco Editor or CodeMirror for the editor interface
      • WebSocket for real-time collaboration
      • Firebase or a custom backend for storing snippets

  • Chat Application

    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 &amp;&amp; username) {
  setMessages(&#91;...messages, { username, text: message }]);
  setMessage('');
}
      };

  return (

    &lt;div className="App">
  &lt;h1>Chat Application&lt;/h1>
  &lt;div className="chat-window">
    &lt;div className="messages">
      {messages.map((msg, index) => (
        &lt;div key={index} className="message">
          &lt;strong>{msg.username}: &lt;/strong>
          {msg.text}
        &lt;/div>
      ))}
    &lt;/div>
  &lt;/div>
    

      &lt;input
    type="text"
    placeholder="Your name"
    value={username}
    onChange={(e) => setUsername(e.target.value)}
  />
  &lt;input
    type="text"
    placeholder="Type a message"
    value={message}
    onChange={(e) => setMessage(e.target.value)}
  />
  &lt;button onClick={handleSendMessage}>Send&lt;/button>
&lt;/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

  • Expense Tracker

    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 &amp;&amp; amount) {
  setExpenses(&#91;...expenses, { description, amount: parseFloat(amount) }]);
  setDescription('');
  setAmount('');
}
      };

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

  return (

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

  • Blog Platform

    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

  • E-commerce Store

    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(&#91;...cart, product]);
      };

  const getCartCount = () => {

    return cart.length;
      };

  return (

    &lt;div className="App">
  &lt;header className="header">
    &lt;h1>E-commerce Store&lt;/h1>
    &lt;div className="cart">
      &lt;span>Cart: {getCartCount()} items&lt;/span>
    &lt;/div>
  &lt;/header>
    

      &lt;main>
    &lt;h2>Products&lt;/h2>
    &lt;div className="product-list">
      {productsData.map((product) => (
        &lt;div key={product.id} className="product-card">
          &lt;img src={product.image} alt={product.name} />
          &lt;h3>{product.name}&lt;/h3>
          &lt;p>${product.price.toFixed(2)}&lt;/p>
          &lt;button onClick={() => addToCart(product)}>Add to Cart&lt;/button>
        &lt;/div>
      ))}
    &lt;/div>
  &lt;/main>
    

      &lt;footer>
    &lt;p>&amp;copy; 2024 E-commerce Store&lt;/p>
  &lt;/footer>
&lt;/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

  • Personal Portfolio

    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 (

    &lt;div className="App"&gt;
  &lt;header className="header"&gt;
    &lt;h1&gt;Your Name&lt;/h1&gt;
    &lt;p&gt;Your Tagline or a short bio goes here.&lt;/p&gt;
    &lt;nav&gt;
      &lt;a href="#projects"&gt;Projects&lt;/a&gt;
      &lt;a href="#skills"&gt;Skills&lt;/a&gt;
      &lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
    

      &lt;section id="projects"&gt;
    &lt;h2&gt;Projects&lt;/h2&gt;
    &lt;div className="project-list"&gt;
      &lt;div className="project-card"&gt;
        &lt;h3&gt;Project Title 1&lt;/h3&gt;
        &lt;p&gt;Description of project 1.&lt;/p&gt;
        &lt;a href="https://github.com/yourusername/project1" target="_blank" rel="noopener noreferrer"&gt;View Project&lt;/a&gt;
      &lt;/div&gt;
      &lt;div className="project-card"&gt;
        &lt;h3&gt;Project Title 2&lt;/h3&gt;
        &lt;p&gt;Description of project 2.&lt;/p&gt;
        &lt;a href="https://github.com/yourusername/project2" target="_blank" rel="noopener noreferrer"&gt;View Project&lt;/a&gt;
      &lt;/div&gt;
      {/* Add more projects as needed */}
    &lt;/div&gt;
  &lt;/section&gt;
    

      &lt;section id="skills"&gt;
    &lt;h2&gt;Skills&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;JavaScript&lt;/li&gt;
      &lt;li&gt;React&lt;/li&gt;
      &lt;li&gt;CSS&lt;/li&gt;
      &lt;li&gt;HTML&lt;/li&gt;
      {/* Add more skills as needed */}
    &lt;/ul&gt;
  &lt;/section&gt;
    

      &lt;footer id="contact"&gt;
    &lt;h2&gt;Contact Me&lt;/h2&gt;
    &lt;p&gt;Email: [email protected]&lt;/p&gt;
    &lt;p&gt;LinkedIn: &lt;a href="https://www.linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer"&gt;Your LinkedIn&lt;/a&gt;&lt;/p&gt;
    &lt;p&gt;GitHub: &lt;a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer"&gt;Your GitHub&lt;/a&gt;&lt;/p&gt;
  &lt;/footer&gt;
&lt;/div&gt;
      );
};

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

  • Recipe Sharing Platform

    • 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