Home Explore Help
Sign In
mihai.apostol
/
Market_Place_NFT
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Added React pipeline

Paul Vasile 2 years ago
parent
a0156c7d93
commit
04562eec11
11 changed files with 7151 additions and 14 deletions
Split View Show Diff Stats
  1. 2 0
      .gitignore
  2. 5 0
      NFTmarket/NFTmarket/settings.py
  3. 39 0
      NFTmarket/assets/index.js
  4. 2 1
      NFTmarket/info_pages/views.py
  5. 296 0
      NFTmarket/static/index-bundle.js
  6. 8 12
      NFTmarket/templates/base.html
  7. 3 1
      NFTmarket/templates/dashboard/home.html
  8. 7 0
      README.md
  9. 6741 0
      package-lock.json
  10. 29 0
      package.json
  11. 19 0
      webpack.config.js

+ 2 - 0
.gitignore
View File 

@@ -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

+ 5 - 0
NFTmarket/NFTmarket/settings.py
View File 

@@ -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'),
 
+]

+ 39 - 0
NFTmarket/assets/index.js
View File 

@@ -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);

+ 2 - 1
NFTmarket/info_pages/views.py
View File 

@@ -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")

File diff suppressed because it is too large
+ 296 - 0
NFTmarket/static/index-bundle.js


+ 8 - 12
NFTmarket/templates/base.html
View File 

@@ -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>

+ 3 - 1
NFTmarket/templates/dashboard/home.html
View File 

@@ -3,6 +3,8 @@
 
 
 {% block content %}
 
 
-<h2>Home Page, welcome</h2>
 
+<h2>Home Page, welcome {{count}}</h2>
 
+
 
+{{ count|json_script:'count' }}
 
 
 {% endblock content %}

+ 7 - 0
README.md
View File 

@@ -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
 
+

File diff suppressed because it is too large
+ 6741 - 0
package-lock.json


+ 29 - 0
package.json
View File 

@@ -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"
 
+  }
 
+}

+ 19 - 0
webpack.config.js
View File 

@@ -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"] }
 
+      },
 
+    ]
 
+  }
 
+};