Ecommerce

backend/config.js

@@ -4,7 +4,7 @@ dotenv.config();
 
 export default {
   PORT: process.env.PORT || 5000,
-  MONGODB_URL: process.env.MONGODB_URL || 'mongodb://localhost/amazona',
+  MONGODB_URL: process.env.MONGO_URI || 'mongodb://localhost/amazona',
   JWT_SECRET: process.env.JWT_SECRET || 'somethingsecret',
   PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID || 'sb',
   accessKeyId: process.env.accessKeyId || 'accessKeyId',

backend/routes/orderRoute.js → backend/routes/orderRoutes.js

@@ -1,6 +1,6 @@
 import express from 'express';
-import Order from '../models/orderModel';
-import { isAuth, isAdmin } from '../util';
+import Order from '../models/orderModel.js';
+import { isAuth, isAdmin } from '../util.js';
 
 const router = express.Router();
 

backend/routes/productRoute.js → backend/routes/productRoutes.js

@@ -1,6 +1,6 @@
 import express from 'express';
-import Product from '../models/productModel';
-import { isAuth, isAdmin } from '../util';
+import Product from '../models/productModel.js';
+import { isAuth, isAdmin } from '../util.js';
 
 const router = express.Router();
 

backend/routes/uploadRoute.js → backend/routes/uploadRoutes.js

@@ -2,7 +2,7 @@ import express from 'express';
 import multer from 'multer';
 import multerS3 from 'multer-s3';
 import aws from 'aws-sdk';
-import config from '../config';
+import config from '../config.js';
 
 const storage = multer.diskStorage({
   destination(req, file, cb) {

backend/routes/userRoute.js → backend/routes/userRoutes.js

@@ -1,6 +1,6 @@
 import express from 'express';
-import User from '../models/userModel';
-import { getToken, isAuth } from '../util';
+import User from '../models/userModel.js';
+import { getToken, isAuth } from '../util.js';
 
 const router = express.Router();
 

backend/server.js

@@ -2,11 +2,17 @@ import express from 'express';
 import path from 'path';
 import mongoose from 'mongoose';
 import bodyParser from 'body-parser';
-import config from './config';
-import userRoute from './routes/userRoute';
-import productRoute from './routes/productRoute';
-import orderRoute from './routes/orderRoute';
-import uploadRoute from './routes/uploadRoute';
+import config from './config.js';
+import userRoute from './routes/userRoutes.js';
+import productRoute from './routes/productRoutes.js';
+import orderRoute from './routes/orderRoutes.js';
+import uploadRoute from './routes/uploadRoutes.js';
+
+
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const mongodbUrl = config.MONGODB_URL;
 mongoose
@@ -27,9 +33,9 @@ app.get('/api/config/paypal', (req, res) => {
   res.send(config.PAYPAL_CLIENT_ID);
 });
 app.use('/uploads', express.static(path.join(__dirname, '/../uploads')));
-app.use(express.static(path.join(__dirname, '/../frontend/build')));
+app.use(express.static(path.join(__dirname, '/../frontend/public')));
 app.get('*', (req, res) => {
-  res.sendFile(path.join(`${__dirname}/../frontend/build/index.html`));
+  res.sendFile(path.join(`${__dirname}/../frontend/public/index.html`));
 });
 
 app.listen(config.PORT, () => {

backend/util.js

@@ -1,5 +1,5 @@
 import jwt from 'jsonwebtoken';
-import config from './config';
+import config from './config.js';
 const getToken = (user) => {
   return jwt.sign(
     {

frontend/package.json

@@ -17,12 +17,13 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
+ "scripts": {
+  "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+  "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
+  "test": "react-scripts test",
+  "eject": "react-scripts eject"
+},
+
   "eslintConfig": {
     "extends": "react-app"
   },

frontend/src/index.css

@@ -69,18 +69,19 @@ a:hover {
 /* Home Screen */
 .products {
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-wrap: wrap;
+  justify-content: center;
+  padding: 0;
 }
+
 .products li {
   list-style-type: none;
+  margin: 0.5rem;
   padding: 0;
-  flex: 0 1 34rem;
-  margin: 1rem;
-  height: 50rem;
-  border-bottom: 0.1rem #c0c0c0 solid;
+  flex: 1 1 100%; 
+  max-width: 100%;
 }
+
 .product {
   display: flex;
   flex-direction: column;
@@ -100,9 +101,13 @@ a:hover {
   font-weight: bold;
 }
 .product-image {
-  max-width: 34rem;
-  max-height: 34rem;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  display: block;
 }
+
+
 .product-rating {
   margin-bottom: 1rem;
 }
@@ -463,3 +468,23 @@ tbody > tr:nth-child(odd) {
 .categories a:hover {
   background-color: #c0c0c0;
 }
+@media (min-width: 360px) {
+  .products li {
+    flex: 1 1 48%; 
+    max-width: 48%;
+  }
+}
+
+@media (min-width: 768px) {
+  .products li {
+    flex: 1 1 30%; /* 3 items per row */
+    max-width: 30%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .products li {
+    flex: 1 1 22%; /* 4 items per row */
+    max-width: 22%;
+  }
+}