waveSurface.com
What is this site?
This site serves as a resource platform for sheetwave construction. Since that's what I spent the last couple years doing, I wanted to create a site to centralize all the information I have and will continue to gather and make it available to anyone interested. The subject gave me a focal point to learn to construct a web platform around as I was teaching myself to code.
A key feature leverages Slack API's to interact directly with a client interface hosted on the site. Slack Web API to deliver to slack workspace, Slack Events API to listen for workspace triggers. Verified users can submit quesitons from the site directly to a slack workspace. Inside slack instructionals can be compiled and deployed to the site as JSON allowing slack to be used as a primitive CMS to push site content to a postgres database.
Tech used
waveSurface.com is a full stack application written in React styled with Material UI components, a Node/Express backend with Postgres Database.
The site uses bcrypt for password hashing, JWT authorization for multi-tier login permissions and site access.
Front End was bootstrapped with with Create React App, React Hooks and fully client side rendered with react router. State is partially managed in Redux and Context. Client deployed with surge.sh
Routes were tested with Postman.
Build Dependencies Front End
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/data-grid": "^4.0.0-alpha.26",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.58",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"json-server": "^0.16.3",
"jsonwebtoken": "^8.5.1",
"markdown-to-jsx": "^7.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-lottie": "^1.2.3",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-scroll": "^1.8.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"uuid": "^8.3.2",
"vanta": "^0.5.21",
"web-vitals": "^1.1.1"
},
Build Dependencies Back End
"dependencies": {
"@slack/events-api": "^3.0.0",
"@slack/web-api": "^6.1.0",
"@slack/webhook": "^6.0.0",
"bcrypt": "^5.0.1",
"colors": "^1.4.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-fileupload": "^1.2.1",
"jsonschema": "^1.4.0",
"jsonwebtoken": "^8.5.1",
"morgan": "^1.10.0",
"pg": "^8.5.1"
}
More Details
I wanted different user permissions to have some ability to manually control access to different sections. There are basic, Full Access and Admin levels of authorizaiton. Permissions are stored in localstroage with JSON Web Tokens.
Users, instructionals and sections are stored in a relational postgres database and calls are made with a custom axios class and static methods. Instructionals are generated with JSON objects sent from slack where links and files are hosted.
I relied heavily on Material UI for styling. I did this for speed and didn't want to spend a lot of time making the interface 'pretty', for me it was worth the performance cost to accomplish the goals of this application as well as get some experience with a popular component library.
As a client side render I opted to use redux as well as native context for state managment. I wanted to get experience using both and discover how they were different.
