Hi Jim,
Thank you for taking the time to answer our questions. I am building a B2C website, where users can log in "thoughts and feelings and progression" metrics about the relationship (not just romantic relationship). I have the backend API's working exactly as I want (python flask for POC). I have an ok understanding of HTML, CSS and JS but not familiar with designing, colors, etc. My question is
What framework would you recommend that I get started with to make the website look appealing?
Would something like webflow, wordpress, etc be a good choice for a website where users can login and take notes, see visualizations, etc
Tl;DR: Data engineer struggling with front end design, any framework recommendations?
Again thank you for taking the time to help :) :) :)
I wouldn't use Webflow or Wordpress. They are meant for marketing sites and blogs respectively. You can do more with them but it's kind of a square peg/round hole situation.
Baseline stuff you'll need is npm and node: https://www.npmjs.com/get-npm
This is just to let you install packages and libraries. Even component libraries that can handle some of the challenging UI you'll wind up building.
For front-end applications, the big frameworks are still the way to go in my opinion. Like React, Angular, Vue, Ember, etc. I've been using React for the past few years and really enjoy it. You can set up an application really quickly use Create React App. https://create-react-app.dev/
Once you're up and running you can use a component library to get you started with styles and formatting. Especially if you're not comfortable with CSS. I've used Material-UI or Bootstrap in the past. They're good ways to get a usable design very quickly. Pick one. https://material-ui.com/ https://react-bootstrap.github.io/
For authentication, I've been using Amplify JS (https://github.com/aws-amplify/amplify-js) which connects to AWS Cognito for authentication. They provide a nice log in form that you can style. Its nice to not have to build all that yourself. So you can focus on the product!
Theres plenty more, hit me up with further questions!
I am currently using Google Firebase for authentication and Cloud firestore for database.
I was leaning towards React (solely based on the strong dev community and SO questions) the https://create-react-app.dev/ website is really useful thanks
I have npm and node set up, had to set them up to use google cloud functions
I am very uncomfortable with CSS (haha) thank you for the Bootstrap/ Material-UI recommendations there.
webflow/wordpress for this purposes does feel like square peg/round hole.
Please let me know if you have any questions or any way i can pay back the help.
1 question I had was
Since my website focuses on personal data, is there a library or approach you would suggest for client-side data encryption?, since I don't want to use user's personal data and want the users to feel safe.
My understanding is that it is very very tricky to do end-to-end encryption. Something I'm not familiar with.
Another option is "encryption-at-rest". Which is when user data is encrypted when stored and only decrypted when requested by that user. Its something you'd do on the server.
Another-other option is to allow iCloud or another secure storage method for those who want to use it. This gives the user actual ownership over their data.
In terms of playing an existing video. I'd suggest a storage tool like S3. Then hosting your Node server on EC2, or a scalable service like Kubernetes. It could run on Lambdas too if you wanted.
The node server itself could be built with Koa.js or Express.js. There you could use fs.createReadStream() to read a file in chunks and send the chunks down to the client.
On the client you can just use the standard video component. The player makes chunked requests to the server.
Hi Jim,
Thank you for taking the time to answer our questions. I am building a B2C website, where users can log in "thoughts and feelings and progression" metrics about the relationship (not just romantic relationship). I have the backend API's working exactly as I want (python flask for POC). I have an ok understanding of HTML, CSS and JS but not familiar with designing, colors, etc. My question is
Tl;DR: Data engineer struggling with front end design, any framework recommendations?
Again thank you for taking the time to help :) :) :)
I wouldn't use Webflow or Wordpress. They are meant for marketing sites and blogs respectively. You can do more with them but it's kind of a square peg/round hole situation.
Baseline stuff you'll need is npm and node: https://www.npmjs.com/get-npm
This is just to let you install packages and libraries. Even component libraries that can handle some of the challenging UI you'll wind up building.
For front-end applications, the big frameworks are still the way to go in my opinion. Like React, Angular, Vue, Ember, etc. I've been using React for the past few years and really enjoy it. You can set up an application really quickly use Create React App. https://create-react-app.dev/
Once you're up and running you can use a component library to get you started with styles and formatting. Especially if you're not comfortable with CSS. I've used Material-UI or Bootstrap in the past. They're good ways to get a usable design very quickly. Pick one.
https://material-ui.com/
https://react-bootstrap.github.io/
For requests to your server, JS has a "fetch" function. Heres a guide on making requests in React. https://reactjs.org/docs/faq-ajax.html
For authentication, I've been using Amplify JS (https://github.com/aws-amplify/amplify-js) which connects to AWS Cognito for authentication. They provide a nice log in form that you can style. Its nice to not have to build all that yourself. So you can focus on the product!
Theres plenty more, hit me up with further questions!
@jimbol This is great, thank you very much,
Please let me know if you have any questions or any way i can pay back the help.
1 question I had was
My understanding is that it is very very tricky to do end-to-end encryption. Something I'm not familiar with.
Another option is "encryption-at-rest". Which is when user data is encrypted when stored and only decrypted when requested by that user. Its something you'd do on the server.
Another-other option is to allow iCloud or another secure storage method for those who want to use it. This gives the user actual ownership over their data.
Hope this helps
Got it, will give Another-other option a shot.
Thank you
What will you advise for video streaming with JS stack?
I've never worked with live streaming between users. But a friend of mine has and he made his work available on github:
https://github.com/danielmconrad/h264-live-player
Inspired by https://github.com/urbenlegend/WebStreamer
In terms of playing an existing video. I'd suggest a storage tool like S3. Then hosting your Node server on EC2, or a scalable service like Kubernetes. It could run on Lambdas too if you wanted.
The node server itself could be built with Koa.js or Express.js. There you could use
fs.createReadStream()
to read a file in chunks and send the chunks down to the client.On the client you can just use the standard video component. The player makes chunked requests to the server.
This guide is a good place to start for the Node server https://medium.com/better-programming/video-stream-with-node-js-and-html5-320b3191a6b6
I hope this helps!
Thanks for your reply. I am exploring Webrtc
Woh sweet!
Do you mean, playing a video that exists or live streaming between users?