Materials Designer App

.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+  "workbench.editor.enablePreview": false,
+  "editor.tabSize": 2,
+  "editor.tabCompletion": "on",
+  "editor.insertSpaces": false,
+  "prettier.configPath": "./vivz753/materials-designer/.prettierrc.js",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.bracketSameLine": true,
+  "prettier.requireConfig": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "workbench.sideBar.location": "right",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "window.zoomLevel": -1,
+  "editor.formatOnSave": true,
+  "files.autoSave": "afterDelay",
+  "prettier.enableDebugLogs": true,
+  "prettier.printWidth": 120,
+  "prettier.semi": false
+}

Flowchart-Designer.md

@@ -35,4 +35,10 @@ We leave exact timing to the candidate. Must fit Within 5 days total.
 
 # Examples
 
-To view examples or discuss this task more in details, please [contact us](README.md).
+We recommend reviewing the following:
+
+- Introduction to Flowcharts: https://www.geeksforgeeks.org/an-introduction-to-flowcharts/
+- An example convergence workflow: https://docs.mat3ra.com/models/auxiliary-concepts/reciprocal-space/convergence/
+- ReactFlow library examples: https://reactflow.dev/docs/examples/overview/ and https://pro.reactflow.dev/pro-examples
+
+To discuss this task more in details, please [contact us](README.md).

Materials-Designer.md

@@ -4,9 +4,9 @@
 
 # Overview
 
-Create a skeleton IDE (integrated development environment) for materials design. Close to Adobe Dreamweaver (or any other IDE) - when you can change html-markup and simultaneously see the result in another tab. We edit material in XYZ format and view result in 3D.
+Create a skeleton IDE (integrated development environment) for materials design, where one can change text and simultaneously see the visual result in another tab. We edit material in XYZ format and view result in 3D.
 
-Front-end developers: use Meteor and React.js and minimalistic UX/UI.
+Front-end developers: use React.js and minimalistic UX/UI.
 
 Pure UI/UX designers: create high fidelity mockups. 
 

README.md

@@ -18,7 +18,7 @@ Each file represents an assignment similar to what one would get when hired.
 | Front-End / UX | [Materials Designer](Materials-Designer.md)  | ReactJS / UX Design, ThreeJS   |
 | Front-End / UX | [Flowchart Designer](Flowchart-Designer.md)  | ReactJS / UX Design, DAG       |
 | Back-End / Ops | [Parallel Uploader](Parallel-File-Uploader.md)   | Python, OOD, Threading, Objectstore |
-| CI/CD, DevOps  | [End-to-End Tests](End-To-End-Tests.md)    | BDD tests, CI/CD workflows, Cypress |
+| CI/CD, DevOps  | [End-to-End Tests](End-to-End-Tests.md)    | BDD tests, CI/CD workflows, Cypress |
 | HPC, Cloud Inf | [Cloud HPC Bench.](Cloud-Infrastructure.md)    | HPC Cluster, Linpack, Benchmarks |
 | HPC, Containers| [Containerized HPC](Containerization-HPC.md)    | HPC Cluster, Containers, Benchmarks |
 

vivz753/README.md

@@ -0,0 +1,39 @@
+# Materials Designer (Frontend/UX)
+
+> Ideal candidate: skilled front-end developer with UI/UX chops.
+
+# Overview
+
+Create a skeleton IDE (integrated development environment) for materials design, where one can change text and simultaneously see the visual result in another tab. We edit material in XYZ format and view result in 3D.
+
+Front-end developers: use React.js and minimalistic UX/UI.
+
+Pure UI/UX designers: create high fidelity mockups. 
+
+# Requirements
+
+1. Build a general layout with focus areas (eg. toolbar, structure viewer, source viewer)
+2. Implement two edit modes:
+   - source editor (to edit material in textual representation)
+   - visual editor (to adjust material visual representation)
+3. Support import  from a file format, (eg. POSCAR, XYZ)
+
+# Expectations
+
+1. up and running application OR high fidelity clickable mockups
+2. general IDE layout (e.g. menu, toolboxes)
+3. reactive material editor (edit material file → immediately see results on 3D representation)
+4. clean and documented code
+5. tests
+
+# Timeline
+
+We leave exact timing to the candidate. Must fit Within 5 days total.
+
+# Notes
+
+- use a designated github repo for version control and submission
+
+# Examples
+
+See [Materials Designer](https://github.com/Exabyte-io/materials-designer) repository also.

vivz753/materials-designer/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "next", "prettier"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "react/jsx-key": "off",
+    "prefer-arrow-callback": 1,
+    "@typescript-eslint/no-explicit-any": "warn"
+  }
+}

vivz753/materials-designer/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

vivz753/materials-designer/.prettierrc.js

@@ -0,0 +1,11 @@
+const config = {
+  endOfLine: "lf",
+  printWidth: 120,
+  tabWidth: 2,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  semi: false,
+  plugins: [require("prettier-plugin-tailwindcss")],
+}
+
+module.exports = config

vivz753/materials-designer/README.md

@@ -0,0 +1,90 @@
+# About
+
+## Introduction
+
+This is my skeleton IDE submission for the Materials Designer test as part of the interview process for Mat3ra.
+
+I put my artistic and engineering skills to work in order to forge this masterpiece. It is missing some implementations that would make it ideal (see TODO list), but it has the main functionalities:
+
+- Source Editor
+- Focusable menu/sections
+- 3D Visualizer
+- Importer for .xyz or .txt files
+- Interactive inputs for segment lengths
+
+I know the timeline is limited to 5 days, but the last few commits pertain to minor cosmetic changes.
+
+Thanks for checking it out!
+
+## To view
+
+Deployed here [https://materials-designer.vercel.app/](https://materials-designer.vercel.app/)
+
+or
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+[http://localhost:3000](http://localhost:3000)
+
+# TODO
+
+- [x] import .xyz & .txt files
+- [ ] import .poscar files
+- [x] render custom cube geometry
+- [x] render cube on explorer
+- [x] add angle + segment inputs
+- [x] mobile view
+- [x] add response to abc length inputs
+- [ ] add response to angle inputs
+- [ ] add geometries for diff lattice structures
+- [x] polish colors, padding, font sizes
+- [ ] add modal for adding material
+- [x] submit [job application](https://wellfound.com/jobs/1807964-lead-frontend-engineer-react)
+- [ ] add info dialog when hovering over sphere
+- [ ] write tests
+
+# Materials Designer (Frontend/UX)
+
+> Ideal candidate: skilled front-end developer with UI/UX chops.
+
+# Overview
+
+Create a skeleton IDE (integrated development environment) for materials design, where one can change text and simultaneously see the visual result in another tab. We edit material in XYZ format and view result in 3D.
+
+Front-end developers: use React.js and minimalistic UX/UI.
+
+Pure UI/UX designers: create high fidelity mockups. 
+
+# Requirements
+
+1. Build a general layout with focus areas (eg. toolbar, structure viewer, source viewer)
+2. Implement two edit modes:
+   - source editor (to edit material in textual representation)
+   - visual editor (to adjust material visual representation)
+3. Support import  from a file format, (eg. POSCAR, XYZ)
+
+# Expectations
+
+1. up and running application OR high fidelity clickable mockups
+2. general IDE layout (e.g. menu, toolboxes)
+3. reactive material editor (edit material file → immediately see results on 3D representation)
+4. clean and documented code
+5. tests
+
+# Timeline
+
+We leave exact timing to the candidate. Must fit Within 5 days total.
+
+# Notes
+
+- use a designated github repo for version control and submission
+
+# Examples
+
+See [Materials Designer](https://github.com/Exabyte-io/materials-designer) repository also.

vivz753/materials-designer/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['three'],
+}
+
+module.exports = nextConfig

vivz753/materials-designer/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "materials-designer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.83.9",
+    "@react-three/fiber": "^8.14.1",
+    "@types/node": "20.6.0",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "clsx": "^2.0.0",
+    "next": "13.4.19",
+    "pnpm": "^8.7.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.3",
+    "three": "^0.156.1",
+    "typescript": "5.2.2",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/three": "^0.156.0",
+    "@types/uuid": "^9.0.1",
+    "autoprefixer": "10.4.15",
+    "eslint": "8.49.0",
+    "eslint-config-next": "13.4.19",
+    "postcss": "8.4.29",
+    "prettier": "^2.8.3",
+    "prettier-plugin-tailwindcss": "^0.2.2"
+  }
+}