Install new npm by Hossein-Kelisa · Pull Request #70 · HackYourFutureProjects/c51-final-project-group-A

Hossein-Kelisa · 2026-06-30T15:24:47Z

No description provided.

New branch

header change

add new feature to explain text

start to update Itemdetails page

update Authorization page mostly in styling

Copilot

Pull request overview

This PR updates npm dependencies and introduces a broad client UI refactor (Home/Auth/Profile/Result layouts), along with associated CSS and component re-organization.

Changes:

Bumps dependencies (e.g., dotenv, vite) and refreshes package-lock.json.
Refactors client UI: new Home components, updated Header/Sidebar behavior, Profile tab layout, Result page layout, and substantial CSS restyling.
Updates README demo link and trims README content.

Reviewed changes

Copilot reviewed 44 out of 56 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
server/package.json	Bumps `dotenv` dependency.
README.md	Updates project title/structure and demo link text.
package-lock.json	Lockfile refresh reflecting dependency updates.
client/package.json	Bumps `vite` version.
client/src/pages/ResultPage.jsx	Restructures ResultPage layout (sidebar + view toggle grouping).
client/src/pages/ResultPage.css	New layout styling + responsive adjustments for ResultPage.
client/src/pages/ProfilePage.jsx	Reworks Profile page into tabbed UI and adds logout button.
client/src/pages/ProfilePage.css	Adds new tabbed profile styling and responsive rules.
client/src/pages/ItemDetailsPage.css	Visual tweaks to item details layout (borders/margins/radii).
client/src/pages/Home/Home.jsx	Switches Home to newly organized `HomeComponents` and adds sections.
client/src/pages/AuthPage.jsx	Updates auth page to new AuthComponents structure and background styling.
client/src/pages/AuthPage.css	Adds new auth-page background/overlay + glassmorphism container styles.
client/src/index.css	Adjusts global body padding/background/line-height.
client/src/components/ViewToggle.jsx	Reorders controls and updates class names for styling.
client/src/components/ViewToggle.css	Updates ViewToggle layout (column layout, responsive styling).
client/src/components/Sidebar.jsx	Adds overlay + outside click handling comments/structure adjustments.
client/src/components/Sidebar.css	Redesigned sidebar + overlay styling and responsive behavior.
client/src/components/SearchBar.css	Restyles search bar with responsive sizing.
client/src/components/Pagination.css	Adds small-screen pagination button sizing.
client/src/components/ItemCard.jsx	Restructures markup (container/content wrappers) and renames root class.
client/src/components/ItemCard.css	Updates card styling + list-view adjustments + responsive tweaks.
client/src/components/HomeComponents/SharePrompt.jsx	Updates heading casing and button class.
client/src/components/HomeComponents/SharePrompt.css	New SharePrompt styling (replacing removed old CSS).
client/src/components/HomeComponents/Shape.jsx	Fixes asset import path for `shape.svg`.
client/src/components/HomeComponents/Shape.css	Minor margin adjustments.
client/src/components/HomeComponents/ItemSlider.jsx	Adjusts imports to match new folder structure.
client/src/components/HomeComponents/ItemSlider.css	New ItemSlider styling under HomeComponents.
client/src/components/HomeComponents/HorizontalScrolling.jsx	New scrolling text component.
client/src/components/HomeComponents/HorizontalScrolling.css	Styling/animation for scrolling text.
client/src/components/HomeComponents/ExplainText.jsx	New “Welcome” explain text component.
client/src/components/HomeComponents/ExplainText.css	Updates styling for explain text component.
client/src/components/HomeComponents/ExplainText2.jsx	New second explain text component.
client/src/components/HomeComponents/ExplainText2.css	Styling for ExplainText2.
client/src/components/HomeComponents/Banner.jsx	New banner component in HomeComponents.
client/src/components/HomeComponents/Banner.css	New banner styling using asset background.
client/src/components/Header.jsx	Simplifies header login/profile icon behavior and sidebar mounting.
client/src/components/Header.css	Header becomes fixed with updated layout/responsive rules.
client/src/components/Footer.jsx	Converts footer to semantic `<footer>` with external link.
client/src/components/Footer.css	Replaces old footer layout with new variables + responsive sizing.
client/src/components/FilterSidebar.jsx	Renames wrapper class to `main-filter-sidebar`.
client/src/components/FilterSidebar.css	Restyles filter sidebar (but includes some stale selectors).
client/src/components/AuthComponents/RegisterForm.jsx	New Register form component in AuthComponents.
client/src/components/AuthComponents/LoginForm.jsx	New Login form component in AuthComponents.
client/src/components/AuthComponents/ForgotPass.jsx	New Forgot password form component.
client/src/components/AuthComponents/AuthToggle.jsx	Minor cleanup to auth toggle component.
client/src/components/AuthComponents/LogoutButton.jsx	New Logout button with confirmation dialog.
client/src/components/AuthComponents/LogoutButton.css	Styling for new logout button.
client/src/components/SharePrompt.css	Removes old SharePrompt CSS (moved under HomeComponents).
client/src/components/LogoutButton.css	Removes old LogoutButton CSS (moved under AuthComponents).
client/src/components/ItemSlider.css	Removes old ItemSlider CSS (moved under HomeComponents).
client/src/components/Banner.css	Removes old Banner CSS (moved under HomeComponents).

Comments suppressed due to low confidence (1)

client/src/pages/ResultPage.css:109

Responsive styles here still reference .filter-sidebar, but FilterSidebar now renders with className="main-filter-sidebar", so these rules won't apply on small screens. Update the selector to the new class.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

-      return;
-    }
-    // Fetch user profile data if logged in
    fetch("http://localhost:3000/api/auth/me", {


@@ -111,25 +134,17 @@ const ProfilePage = () => {
                    />


@@ -139,11 +154,11 @@ const ProfilePage = () => {
                    />


  const handleItemClick = (id) => {
    navigate(`/items/${id}`);
  };


 .filter-sidebar > div > button.filter-apply-btn {
  margin-top: 1rem;
 }


+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  font-family: "PT Serif", serif;
+}
+.auth-page::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 0;
+}


 .auth-container {
  max-width: 400px;
  width: 90%;
  min-height: 350px;
-  margin: 60px auto;
+  margin: 12rem auto;
  padding: 30px 20px;
-  background-color: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  font-family: "PT Serif", serif;
-  transition: all 0.3s ease;
+  background: rgba(197, 197, 197, 0.15);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgb(197, 207, 9);
+  color: white;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}


- `mongodb-memory-server` || To mock out our database in our backend tests. See [docs](https://github.com/nodkz/mongodb-memory-server)
- `cors` || To open up our API. See [docs](https://github.com/expressjs/cors#readme)
- `mongoose` || To add schemas to our database. See [docs](https://mongoosejs.com/)
+[Click here for the Demo version](https://sharewithus.onrender.com/)  wait 60 sec 


@@ -3,18 +3,18 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";


  const [userInfo, setUserInfo] = useState(null);
  const [editing, setEditing] = useState(false);
+  const [activeTab, setActiveTab] = useState("profile");
  const navigate = useNavigate();


Hossein-Kelisa and others added 30 commits July 30, 2025 22:53

update dependencies and DB pass

a790f32

update dependencies and DB pass

ae55611

update dependencies and DB pass

27fe3f0

test

885c390

Merge pull request #1 from Hossein-Kelisa/newBranch

ff16442

New branch

update names

6ddbca8

update

f11252e

update

940a438

update

aca6cea

update

6769b3f

update

63904aa

update

eabeb73

update

6d6dc13

update

fea2af9

update

99cd359

update

7b1d00f

update

57f9fcc

update

4e1cacb

Merge pull request #2 from Hossein-Kelisa/headerStyling

5c9ee81

header change

update

575b3d1

update

dd5efb2

update

8cf7921

update

bb69b2e

update

6da90f6

update

50da218

update

c9a5d22

update

0f2aca2

update

cfd6103

update

13d6d83

update

4ed5fff

Hossein-Kelisa and others added 26 commits October 25, 2025 19:41

add new component to HomePage

4fc76da

change priority of components in Homepage

8c571a5

add another shape component to home page

9c1127e

improve functionality

f38eab7

add styling for scrolling component

beaa728

change color of span

562a013

change text of horizontal scrolling component

58b3cef

make it responsive

2a14ca5

Merge pull request #12 from Hossein-Kelisa/featureHomepage

42c4263

add new feature to explain text

start to update Itemdetails page

5eebda2

change small styling format

71ac5fa

improve responsive

df42824

improve explain text2

40d474e

improve horizontal text

3fef7ef

update explain text color

f7b3466

Merge pull request #13 from Hossein-Kelisa/ItemDetailsPage

b0cb89f

start to update Itemdetails page

update margin

008393b

add background image

2344814

change background image style

7b1a76c

change styling form

7f5339a

change styling form

7902401

change styling form

d3cb0cf

change styling form

823cea1

Merge pull request #14 from Hossein-Kelisa/AuthPageRestyle

9e610f8

update Authorization page mostly in styling

change Readme file

fd37ec1

install new npm because I transfered all my projects to new laptop

65b4a31

Copilot AI review requested due to automatic review settings June 30, 2026 15:24

Copilot started reviewing on behalf of Hossein-Kelisa June 30, 2026 15:25

View session

Hossein-Kelisa closed this Jun 30, 2026

Copilot AI reviewed Jun 30, 2026

View reviewed changes

Navigation Menu

Repository navigation

Install new npm - #70

Install new npm#70
Hossein-Kelisa wants to merge 110 commits into
HackYourFutureProjects:developfrom
Hossein-Kelisa:Install-new-npm

Hossein-Kelisa commented Jun 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -3,18 +3,18 @@ import axios from "axios";
		import { useNavigate } from "react-router-dom";

Conversation

Hossein-Kelisa commented Jun 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants