Learn Git, Design Landing Page with dummy data

[aa1588]

Related to User sStory #1

[subhash-alapati]

The mainly used commands in github are listed below:

1) git init : Initialize a new Git repository
2) git clone <repository-url> : Clone an existing repository in  my device
3) git add <file> : Stage a specific file to commit
4) git commit -m "message" : Commit staged changes with a descriptive message
5) git checkout -b <branch-name> : Create and switch to a new branch
6) git merge <branch-name> : Merge the specified branch into the current branch
7) git remote add origin <repository-url> : Link your local repository to a remote repository
8) git reset <file> : Unstage a file without changing its contents
9) git revert <commit> : Create a new commit that undoes changes from a specific commit
10) git tag -a <tag-name> -m "message" : Create an annotated tag

Landing Page With Dummy Data.

Install Visual Studio Code Open Terminal in VS Code Create a Command Using "npx create-react-app campus-exchange"

Below is the code used in "App.css"

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

.App {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  background-color: #4CAF50;
  color: white;
}

.search input {
  padding: 5px;
  margin-right: 10px;
}

.content {
  display: flex;
}

.sidebar {
  width: 200px;
  padding: 10px;
}

.sidebar h3 {
  margin-bottom: 10px;
}

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

.sidebar li {
  margin-bottom: 5px;
}

.filter-btn {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  flex-grow: 1;
  padding: 10px;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 4px;
  width: calc(33% - 20px);
  padding: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

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

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #4CAF50;
  background-color: #fff;
  cursor: pointer;
}

.pagination button.active {
  background-color: #4CAF50;
  color: white;
}

Below is the code used in "App.js"

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

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [currentPage, setCurrentPage] = useState(1);

  const products = [
    { id: 1, name: 'Dell Chromebook 3180 Laptop', price: 365.00, category: 'Electronics', imageUrl: '/images/dell laptop.jpg' },
    { id: 2, name: 'Modern Sofa with Armrest', price: 105.00, category: 'Furniture', imageUrl: '/images/modern sofa.jpg' },
    { id: 3, name: 'Mini Fridge without Freezer', price: 90.00, category: 'Electronics', imageUrl: '/images/mini freezer.jpg' },
    { id: 4, name: '2016 Honda Civic Grey Sedan', price: 6500.00, category: 'Cars', imageUrl: '/images/honda car.jpg' },
    { id: 5, name: 'Barbell coat Dumbbell 15 lbs', price: 15.00, category: 'Fitness', imageUrl: '/images/dumbbell.jpg' },
    { id: 6, name: 'Software Engineering Ed. 10', price: 30.00, category: 'TextBooks', imageUrl: '/images/book-transparent.jpg' }
  ];

  const filteredProducts = products.filter(product => 
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const productsPerPage = 6;
  const lastProductIndex = currentPage * productsPerPage;
  const firstProductIndex = lastProductIndex - productsPerPage;
  const currentProducts = filteredProducts.slice(firstProductIndex, lastProductIndex);

  return (
    <div className="App">
      <Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
      <div className="content">
        <Sidebar />
        <ProductList products={currentProducts} />
      </div>
      <Pagination
        totalProducts={filteredProducts.length}
        productsPerPage={productsPerPage}
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
      />
    </div>
  );
};

const Header = ({ searchTerm, setSearchTerm }) => (
  <header className="header">
    <h1>CampusXchange</h1>
    <div className="search">
      <input 
        type="text" 
        value={searchTerm} 
        onChange={(e) => setSearchTerm(e.target.value)} 
        placeholder="Search items..." 
      />
      <button>Login</button>
    </div>
  </header>
);

const Sidebar = () => (
  <aside className="sidebar">
    <h3>Category</h3>
    <ul>
      <li><input type="checkbox" id="textbooks" /> <label htmlFor="textbooks">TextBooks</label></li>
      <li><input type="checkbox" id="furniture" /> <label htmlFor="furniture">Furniture</label></li>
      <li><input type="checkbox" id="electronics" /> <label htmlFor="electronics">Electronics</label></li>
      <li><input type="checkbox" id="cars" /> <label htmlFor="cars">Cars</label></li>
      <li><input type="checkbox" id="fitness" /> <label htmlFor="fitness">Fitness</label></li>
    </ul>
    <button className="filter-btn">Filter</button>
  </aside>
);

const ProductList = ({ products }) => (
  <section className="product-grid">
    {products.map(product => (
      <div className="product-card" key={product.id}>
        <img src={product.imageUrl} alt={product.name} />
        <h4>{product.name}</h4>
        <p>${product.price.toFixed(2)}</p>
      </div>
    ))}
  </section>
);

const Pagination = ({ totalProducts, productsPerPage, currentPage, setCurrentPage }) => {
  const totalPages = Math.ceil(totalProducts / productsPerPage);

  return (
    <footer className="pagination">
      <button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}>Prev</button>
      {[...Array(totalPages)].map((_, idx) => (
        <button 
          key={idx + 1} 
          onClick={() => setCurrentPage(idx + 1)} 
          className={currentPage === idx + 1 ? 'active' : ''}
        >
          {idx + 1}
        </button>
      ))}
      <button onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}>Next</button>
    </footer>
  );
};

export default App;

And below are the screenshots related to the dummy landing page: