Table of Contents
Frontend will be done with the help of the very well known library React due to:
- His fast learning curve that suits well with our agile method of coding
- Fast rendering with the Virtual DOM allowing a smooth betting experience
- Reusable composability
And although privacy and security are usually undervalued aspects for web developing, Night Owl was created a few days before ErgoHack III - Privacy and Security, we cant only be focusing on having a resilient and secure backend, frontend also has to meet such requirements!
This is why, we are going to briefly talk about privacy and security for the frontend.
The most common React cyberattacks are:
- Cross-Site Scripting (XSS)
- Cross-Site Request Forgery (CSRF)
- Distributed Denial of Service (DDoS)
- XML External Entity Attack (XXE)
And after gathering information from different sources 123, we plan to ensure security and privacy by:
- Making sure that our HTML code is not vulnerable. Three constructive ways to do this are: Disabling HTML Markups, Using escape characters and avoiding DOM manipulation with .innerHTML
- Validating URLs if we were to use any inside the casino using the HTTP or HTTPS protocols.
function validateURL(url) { const parsed = new URL(url) return ['https:', 'http:'].includes(parsed.protocol) }
<a href={validateURL(url) ? url : ''}>This is a link!
- Set up a proper file management
- Use a linter
Longer term goals are still being figured out, very hard to estimate any dates at this moment.
Although ErgoHack's main focus is not the frontend of a dApp, the team will be working to develop a beautiful UI for its users.
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.