3 éve · 04562eec11
--- a/.gitignore
+++ b/.gitignore
@@ -24,10 +24,12 @@ var/
 
				 *.egg-info/
			
 
				 .installed.cfg
			
 
				 *.egg
			
 
				+node_modules/
			
 
				 
			
 
				 # Virtual environment folders, created using command
			
 
				 # python -m venv virtenv
			
 
				 virtenv/
			
 
				+virtualenv/
			
 
				 
			
 
				 # PyInstaller
			
 
				 #  Usually these files are written by a python script from a template
			
--- a/NFTmarket/NFTmarket/settings.py
+++ b/NFTmarket/NFTmarket/settings.py
@@ -10,6 +10,7 @@ For the full list of settings and their values, see
 
				 https://docs.djangoproject.com/en/4.0/ref/settings/
			
 
				 """
			
 
				 
			
 
				+import os
			
 
				 from pathlib import Path
			
 
				 
			
 
				 # Build paths inside the project like this: BASE_DIR / 'subdir'.
			
@@ -123,3 +124,7 @@ STATIC_URL = 'static/'
 
				 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
			
 
				 
			
 
				 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
			
 
				+
			
 
				+STATICFILES_DIRS = [
			
 
				+    os.path.join(BASE_DIR, 'static'),
			
 
				+]
			
--- a/NFTmarket/assets/index.js
+++ b/NFTmarket/assets/index.js
@@ -0,0 +1,39 @@
 
				+import React from 'react';
			
 
				+import ReactDOM from "react-dom";
			
 
				+import styled from 'styled-components';
			
 
				+
			
 
				+function Welcome(props) {
			
 
				+    return <h1>Hello, {props.name}</h1>;
			
 
				+}
			
 
				+
			
 
				+function MenuButton(props) {
			
 
				+    const { item } = props
			
 
				+    return (
			
 
				+        <MenuItem title={item.title}>
			
 
				+          {item.title}
			
 
				+        </MenuItem>
			
 
				+    )
			
 
				+}
			
 
				+
			
 
				+const MenuItem = styled.div`
			
 
				+  color: black;
			
 
				+  display: grid;
			
 
				+  grid-template-columns: 24px auto;
			
 
				+  align-items: center;
			
 
				+  padding: 10px;
			
 
				+  transition: 0.5s ease-out;
			
 
				+  border-radius: 10px;
			
 
				+
			
 
				+  :hover {
			
 
				+    background: rgba(255, 255, 255, 0.1);
			
 
				+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1),
			
 
				+      inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.2);
			
 
				+  }
			
 
				+`
			
 
				+const array = [{ title: "Emil"}, { title: "Mihai"}, { title: "Paul"}]
			
 
				+const value = JSON.parse(document.getElementById('count').textContent);
			
 
				+const root = ReactDOM.createRoot(document.getElementById('root'));
			
 
				+const element = <MenuButton item={ { title: "Emil"} } />;
			
 
				+const element2 = array.map( (title) => <MenuButton item={title} />)
			
 
				+root.render(element2);
			
 
				+alert(value);
			
--- a/NFTmarket/info_pages/views.py
+++ b/NFTmarket/info_pages/views.py
@@ -4,7 +4,8 @@ from django.shortcuts import render
 
				 
			
 
				 
			
 
				 def home_view(request):
			
 
				-    return render(request, "dashboard/home.html")
			
 
				+    context={"count": 5}
			
 
				+    return render(request, "dashboard/home.html", context)
			
 
				 
			
 
				 def about_view(request):
			
 
				     return render(request, "dashboard/about.html")
			
--- a/NFTmarket/static/index-bundle.js
+++ b/NFTmarket/static/index-bundle.js
--- a/NFTmarket/templates/base.html
+++ b/NFTmarket/templates/base.html
@@ -4,26 +4,22 @@
 
				 
			
 
				 <head>
			
 
				     <title>NFT market</title>
			
 
				-
			
 
				-
			
 
				     {% load static %}
			
 
				     <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
			
 
				-    <script>
			
 
				-
			
 
				-
			
 
				-    </script>
			
 
				 </head>
			
 
				 
			
 
				-
			
 
				-
			
 
				 <body>
			
 
				   <div id="content">
			
 
				+      
			
 
				       <h1>NFT market</h1>
			
 
				 
			
 
				-      <div class="mainblockcontent">
			
 
				-          {% block content %}
			
 
				-          {% endblock %}
			
 
				-      </div>
			
 
				+      {% block content %}
			
 
				+      {% endblock %}
			
 
				+
			
 
				+      <div id="root" />
			
 
				+
			
 
				+      <script src="{% static 'index-bundle.js' %}"></script>
			
 
				+
			
 
				   </div>
			
 
				   
			
 
				 </body>
			
--- a/NFTmarket/templates/dashboard/home.html
+++ b/NFTmarket/templates/dashboard/home.html
@@ -3,6 +3,8 @@
 
				 
			
 
				 {% block content %}
			
 
				 
			
 
				-<h2>Home Page, welcome</h2>
			
 
				+<h2>Home Page, welcome {{count}}</h2>
			
 
				+
			
 
				+{{ count|json_script:'count' }}
			
 
				 
			
 
				 {% endblock content %}
			
--- a/README.md
+++ b/README.md
@@ -42,3 +42,10 @@ Server can be accesed at
 
				 
			
 
				 [http://127.0.0.1:8000/admin](http://127.0.0.1:8000/admin)
			
 
				 
			
 
				+#### For React Frontend
			
 
				+Compile webpack
			
 
				+```
			
 
				+npm run dev
			
 
				+```
			
 
				+After build is successful, stop webpack and run django
			
 
				+
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,29 @@
 
				+{
			
 
				+  "name": "market_place_nft",
			
 
				+  "version": "1.0.0",
			
 
				+  "description": "## Setup",
			
 
				+  "main": "index.js",
			
 
				+  "scripts": {
			
 
				+    "test": "echo \"Error: no test specified\" && exit 1",
			
 
				+    "dev": "webpack --mode development --watch"
			
 
				+  },
			
 
				+  "repository": {
			
 
				+    "type": "git",
			
 
				+    "url": "http://gogs.ici.ro:3000/mihai.apostol/Market_Place_NFT.git"
			
 
				+  },
			
 
				+  "keywords": [],
			
 
				+  "author": "",
			
 
				+  "license": "ISC",
			
 
				+  "devDependencies": {
			
 
				+    "@babel/core": "^7.17.10",
			
 
				+    "@babel/preset-env": "^7.17.10",
			
 
				+    "@babel/preset-react": "^7.16.7",
			
 
				+    "babel-loader": "^8.2.5",
			
 
				+    "webpack-cli": "^4.9.2"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "react": "^18.1.0",
			
 
				+    "react-dom": "^18.1.0",
			
 
				+    "styled-components": "^5.3.0"
			
 
				+  }
			
 
				+}
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,19 @@
 
				+const path = require('path');
			
 
				+
			
 
				+module.exports = {
			
 
				+  entry: './NFTmarket/assets/index.js',  // path to our input file
			
 
				+  output: {
			
 
				+    filename: 'index-bundle.js',  // output bundle file name
			
 
				+    path: path.resolve(__dirname, './NFTmarket/static'),  // path to our Django static directory
			
 
				+  },
			
 
				+  module: {
			
 
				+    rules: [
			
 
				+      {
			
 
				+        test: /\.(js|jsx)$/,
			
 
				+        exclude: /node_modules/,
			
 
				+        loader: "babel-loader",
			
 
				+        options: { presets: ["@babel/preset-env", "@babel/preset-react"] }
			
 
				+      },
			
 
				+    ]
			
 
				+  }
			
 
				+};