FASHION-FIXUP WEBSITE

FRONT END
MY-WTTWEBSDITE-APP
APP.JS
import React, { useState } from 'react';

import './App.css';

import logo from './wtlogo.jpeg';

import './apifront';

function App() {

const [isAuthenticated, setIsAuthenticated] = useState(false);

const [isSigningIn, setIsSigningIn] = useState(false);

const [isSigningUp, setIsSigningUp] = useState(false);

const [username, setUsername] = useState('');

const [password, setPassword] = useState('');

const [enteredUsername, setEnteredUsername] = useState('');

const [showFeaturesPage, setShowFeaturesPage] = useState(false);

const [showUploadPage, setShowUploadPage] = useState(false);

const [showOutfitPage, setShowOutfitPage] = useState(false);

const [image, setImage] = useState(null);

const [category, setCategory] = useState('');

const [color, setColor] = useState('');

const [occasion, setOccasion] = useState('');

const [uploadedItems, setUploadedItems] = useState([]); // Store uploaded items

const [selectedOccasion, setSelectedOccasion] = useState('');

const [selectedColor, setSelectedColor] = useState('');

const [isSidebarVisible, setIsSidebarVisible] = useState(false);

const handleSignInClick = () => {

setIsSigningIn(true);

setIsSigningUp(false);

};

const handleSignUpClick = () => {

setIsSigningUp(true);

setIsSigningIn(false);

};

const handleSignIn = () => {

if (username && password) {

setEnteredUsername(username);

setIsAuthenticated(true);

};

const handleSignUp = () => {

if (username && password) {

setEnteredUsername(username);

setIsAuthenticated(true);

};

const handleBackClick = () => {

setIsSigningIn(false);

setIsSigningUp(false);

setUsername('');

setPassword('');

};
const handleGetStartedClick = () => {

setShowFeaturesPage(true);

};

const handleBackToSignInPage = () => {

setShowFeaturesPage(false);

setIsAuthenticated(false);

setUsername('');

setPassword('');

setEnteredUsername('');

};

const handleUploadPageClick = () => {

setShowFeaturesPage(false);

setShowUploadPage(true);

};

const handleOutfitPageClick = () => {

setShowFeaturesPage(false);

setShowOutfitPage(true);

};

const handleBackToFeaturesPage = () => {

setShowUploadPage(false);

setShowOutfitPage(false);

setShowFeaturesPage(true);

};

const handleImageUpload = (e) => {

const file = e.target.files[0];

 if (file) {

setImage(URL.createObjectURL(file));

};

const handleCategorySelect = (selectedCategory) => {

setCategory(selectedCategory);

};

const handleColorPick = (e) => {

setColor(e.target.value);

};

const handleOccasionSelect = (selectedOccasion) => {

setOccasion(selectedOccasion);

};

const handleSaveImage = () => {

if (image && category && color && occasion) {

const item = {

image: image,

label: `${occasion} ${color} ${category}`,

category: category,

color: color,

occasion: occasion,

};

setUploadedItems([...uploadedItems, item]);

alert(`Image categorized as: ${item.label}`);

setImage(null);

setCategory('');

setColor('');
 setOccasion('');

};

const handleSelectOccasion = (occasion) => {

setSelectedOccasion(occasion);

};

const handleSelectColor = (e) => {

setSelectedColor(e.target.value);

};

const filteredItems = uploadedItems.filter(

(item) => item.occasion === selectedOccasion && item.color === selectedColor

);

const toggleSidebar = () => {

setIsSidebarVisible(!isSidebarVisible);

};

const handleHomeClick = () => {

setIsSidebarVisible(false);

setIsSigningIn(false);

setIsSigningUp(false);

setShowFeaturesPage(false);

setShowUploadPage(false);

setShowOutfitPage(false);

setUsername('');

setPassword('');

setEnteredUsername('');

setIsAuthenticated(false);
};

const handleContactUsClick = () => {

alert("For any queries, please mail: [email protected]");

setIsSidebarVisible(false);

};

if (showOutfitPage) {

return (

<div className="App">

<header className="App-header">

<h1>Select an Outfit</h1>

<h3>Choose an occasion:</h3>

<button onClick={() => handleSelectOccasion('Casual')}>Casual</button>

<button onClick={() => handleSelectOccasion('Party')}>Party</button>

<button onClick={() => handleSelectOccasion('Work')}>Work</button>

<p>{selectedOccasion && `Occasion selected: ${selectedOccasion}`}</p>

{selectedOccasion && (

<div>

<h3>Pick a color:</h3>

<input type="color" value={selectedColor} onChange={handleSelectColor} />

<p>{selectedColor && `Color selected: ${selectedColor}`}</p>

</div>

)}

{selectedOccasion && selectedColor && (

<div>

<h3>Outfit Options:</h3>

<div className="outfit-options">
 <h4>Tops:</h4>

{filteredItems

.filter((item) => item.category === 'Top')

.map((item, index) => (

<img key={index} src={item.image} alt="Top" className="outfit-image" />

))}

<h4>Bottoms:</h4>

{filteredItems

.filter((item) => item.category === 'Bottom')

.map((item, index) => (

<img key={index} src={item.image} alt="Bottom" className="outfit-image" />

))}

<h4>Accessories:</h4>

{filteredItems

.filter((item) => item.category === 'Accessory')

.map((item, index) => (

<img key={index} src={item.image} alt="Accessory" className="outfit-image" />

))}

</div>

</div>

)}

<button onClick={handleBackToFeaturesPage}>Back to Features</button>

</header>

</div>

);

if (showUploadPage) {

return (
<div className="App">

<header className="App-header">

<h1>Upload and Categorize Your Clothing</h1>

<input type="file" accept="image/*" onChange={handleImageUpload} />

{image && <img src={image} alt="Uploaded" className="uploaded-image" />}

{image && (

<div>

<h3>Choose category:</h3>

<button onClick={() => handleCategorySelect('Top')}>Top</button>

<button onClick={() => handleCategorySelect('Bottom')}>Bottom</button>

<button onClick={() => handleCategorySelect('Accessory')}>Accessory</button>

<p>{category && `Category selected: ${category}`}</p>

</div>

)}

{category && (

<div>

<h3>Pick a color for your {category}:</h3>

<input type="color" value={color} onChange={handleColorPick} />

<p>{color && `Color selected: ${color}`}</p>

</div>

)}

{color && (

<div>

<h3>Select an occasion:</h3>

<button onClick={() => handleOccasionSelect('Casual')}>Casual</button>

<button onClick={() => handleOccasionSelect('Party')}>Party</button>

<button onClick={() => handleOccasionSelect('Work')}>Work</button>

<p>{occasion && `Occasion selected: ${occasion}`}</p>

 <button onClick={handleSaveImage}>Save Image</button>

</div>

)}

<button onClick={handleBackToFeaturesPage}>Back to Features</button>

</header>

</div>

);

if (showFeaturesPage) {

return (

<div className="App">

<header className="App-header">

<h1>Features</h1>

<div className="feature-list">

<div className="feature">

<h3>Upload</h3>

<p>Upload pictures of your clothes in one click!</p>

</div>

<div className="feature">

<h3>Organize</h3>

<p>Categories your wardrobe by uploading pictures and categorizing each item by

occasion—like casual, formal, party, or work—and by color (upload top, bottom & accessories
separately and categorize it).</p>

</div>

<div className="feature">

<h3>Select</h3>

<p>Now, when you need an outfit for any occasion, all you need to do is pick a color and get
options for your top, bottom, and accessories. All you have to do is choose.</p>

</div>

<div className="feature">
 <h3>Outfit</h3>

<p>Select an occasion and color to find the perfect matching items.</p>

</div>

</div>

<button onClick={handleUploadPageClick}>Upload</button>

<button onClick={handleOutfitPageClick}>Outfit</button>

<button onClick={handleBackToSignInPage}>Back</button>

</header>

</div>

);

return (

<div className="App">

<header className="App-header">

<img src={logo} alt="Logo" className="logo" />

<h1>Fashion Fix Up</h1>

<p>Get runway ready from the comfort of your home!</p>

{!isAuthenticated ? (

<div className="auth-buttons">

<button onClick={handleSignInClick}>Sign in</button>

<button onClick={handleSignUpClick}>Sign up</button>

</div>

):(

<>

<h2>Welcome, {enteredUsername}!</h2>

<button onClick={handleGetStartedClick}>Get Started</button>

</>

)}
{(isSigningIn || isSigningUp) && !isAuthenticated && (

<div className="auth-form">

{isSigningIn && (

<>

<input

type="email"

placeholder="Email"

onChange={(e) => setUsername(e.target.value)}

/>

<br />

<input

type="tel"

placeholder="Phone Number"

onChange={(e) => setPassword(e.target.value)}

/>

<br />

</>

)}

<input

type="text"

placeholder="Username"

onChange={(e) => setUsername(e.target.value)}

/>

<br />

<input

type="password"

placeholder="Password"

onChange={(e) => setPassword(e.target.value)}

/>

<br />

<button onClick={isSigningIn ? handleSignIn : handleSignUp}>

 {isSigningIn ? 'Sign In' : 'Sign Up'}

</button>

<button className="back-button" onClick={handleBackClick}>Back</button>

</div>

)}

<div className={`sidebar ${isSidebarVisible ? 'visible' : ''}`}>

<button onClick={handleHomeClick}>Home</button>

<button onClick={handleContactUsClick}>Contact Us</button>

</div>

<button className="sidebar-toggle" onClick={toggleSidebar}>

</button>

</header>

</div>

);

export default App;

APP.CSS
body{
background-color : black;
color: white;
margin: 0;
font-family: arial, sans-serif;
}

.App {
text-align: center;
font-family: Arial, sans-serif;
 background-color: black;
color: white;
}

.App-header {
padding: 20px;
color: white;
}

.logo {
width: 400px;
height: auto;
}

.auth-buttons {
margin: 20px;
}

button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
color: white;
background-color: black; /* Optional: keep button text white on a black background */
border: 1px solid white;
}

.auth-form {
display: flex;
flex-direction: column;
align-items: center;
 margin-top: 20px;
color: white;
}

.auth-form input {
margin: 5px 0;
padding: 10px;
width: 200px;
font-size: 16px;
color: white;
background-color: black;
border: 1px solid white;
}

.back-button {
margin-top: 10px;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
color: white;
background-color: black;
border: 1px solid white;
}

.feature-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 20px;
color: white;
}
.feature {
text-align: left;
width: 80%;
max-width: 300px;
color: white;
}

.upload-page {
text-align: center;
padding: 20px;
color: white;
}

.upload-page h1 {
margin-bottom: 20px;
font-size: 24px;
color: white;
}

.upload-page input[type="file"] {
padding: 10px;
font-size: 16px;
margin: 20px;
color: white;
background-color: black;
border: 1px solid white;
}

.uploaded-image {
max-width: 80%;
height: auto;
 margin-top: 20px;
}

.upload-page button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
color: white;
background-color: black;
border: 1px solid white;
}

.upload-page .category-buttons {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}

.upload-page .category-buttons button {

padding: 8px 15px;
font-size: 16px;
color: white;
background-color: black;
border: 1px solid white;
}

.upload-page .category-buttons p {
font-size: 16px;
margin-top: 10px;
color: white;
}

APIFRONT.JS
// src/apifront.js
import axios from 'axios';

const API_URL = 'http://localhost:5000';

export const getHelloMessage = async () => {

try {
const response = await axios.get('/api/hello'); // No need to specify full URL thanks to the
proxy
console.log(response.data); // This should log { message: 'Hello from backend!' }
return response.data.message;
} catch (error) {
console.error('Error fetching message:', error);
}
};

Package.JSON
{
"name": "my-wttwebsdite-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}

Backend
Models
// models/Item.js
const mongoose = require('mongoose');

const itemSchema = new mongoose.Schema({

category: { type: String, required: true }, // "top", "bottom", or "accessory"

color: { type: String, required: true },

occasion: { type: String, required: true }, // "casual", "party", "work".

imageURL: { type: String, required: true } // Path to the uploaded image

});

module.exports = mongoose.model('Item', itemSchema);

Routes
const express = require('express');

const router = express.Router();

const Item = require('../models/Item');

router.post('/', async (req, res) => {

try {

const { imageUrl, category, color, occasion } = req.body;

const newItem = new Item({ imageUrl, category, color, occasion });

await newItem.save();

res.status(201).json(newItem);

} catch (error) {

res.status(500).json({ message: 'Error uploading item', error });

});

Backindex.js
// GET route to retrieve items based on filters
router.get('/', async (req, res) => {

const { occasion, color } = req.query;

try {

const items = await Item.find({ occasion, color });

res.status(200).json(items);

} catch (error) {

res.status(500).json({ message: 'Error retrieving items', error });

});

module.exports = router;

import express from 'express';

import cors from 'cors';

const app = express();

// Enable CORS for all routes

app.use(cors());

// Middleware to parse JSON request bodies

app.use(express.json());

// Example route

app.get('/api/hello', (req, res) => {

res.json({ message: 'Hello from backend!' });

});

// Handle other routes if necessary

// app.post('/api/some-post-route', (req, res) => { ... });

const PORT = 5000;

app.listen(PORT, () => console.log(`Backend running on http://localhost:${PORT}`));

server.js
const express = require('express');

const mongoose = require('mongoose');

const multer = require('multer');

const cors = require('cors');

const app = express();

const PORT = 3000;

// Middleware to parse JSON

app.use(bodyParser.json());

// Connect to MongoDB

mongoose.connect('mongodb://localhost:27017/fashion-fix-up', {

useNewUrlParser: true,

useUnifiedTopology: true,

});

mongoose.connection.on('connected', () => {

console.log('Connected to MongoDB');

});

// POST request to add an item

app.post('/api/items', async (req, res) => {

const { category, color, occasion, imageURL } = req.body;

 try {

const newItem = new Item({

category,

color,

occasion,

imageURL,

});

await newItem.save();

res.status(201).json({ message: 'Item saved successfully', item: newItem });

} catch (error) {

res.status(500).json({ message: 'Error saving item', error });

});

// Start the server

app.listen(PORT, () => {

console.log(`Server is running on http://localhost:${PORT}`);

});

WEBAPP.JS
const express = require('express');

const mongoose = require('mongoose');

const bodyParser = require('body-parser');

const Item = require('./models/Item');

const app = express();

const PORT = 5000;

// Middleware to parse JSON

app.use(bodyParser.json());

// Connect to MongoDB

mongoose.connect('mongodb://localhost:27017/fashion-fix-up', {

useNewUrlParser: true,

useUnifiedTopology: true,

});

mongoose.connection.on('connected', () => {

console.log('Connected to MongoDB');

});

// POST request to add an item

app.post('/api/items', async (req, res) => {

const { category, color, occasion, imageURL } = req.body;

try {

const newItem = new Item({

category,

color,

occasion,

imageURL,

});

await newItem.save();

res.status(201).json({ message: 'Item saved successfully', item: newItem });

} catch (error) {

res.status(500).json({ message: 'Error saving item', error });

});
// Start the server

app.listen(PORT, () => {

console.log(`Server is running on http://localhost:${PORT}`);

});

Mongo shell
use fashion-fixup;

db.items.insertOne({

category: "Top",

color: "Black",

occasion: "Casual"

imageURL: "/path/to/image.jpg"

});