Try   HackMD

PolkaCombat: MAIN Frontend & Backend


Frontend

PolkaCombat is dApp (Decentralized Application). So the Frontend was built using React and other modern tech related to React. But all in all it's a typical modern React application. The things to note in frontend are:

  • It is hosted inside Netlify (should migrate it to your own Netlify or recommended is to transfer it to DigitalOcean)
  • It is using Web3 to integrate ETH blockchain
  • It is using an Infura API key (check .env file)
  • It is using GraphQL

Please explore all the directories, for this repo contains lots of sections. Also, please check vital section below.


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Frontend Vital

Another thing to take note is the .env file related to Blockchain section, change it to your own mnemonic key and don't forget to redeploy the contract using your own address.

In order to understand the flow of the repo, the files that should be checked first are:

  • App.tsx
  • MainGate.tsx
  • HomePage.tsx

Also, very important - please create a new Netlify account or transfer this frontend repo to DigitalOcean so that all repos will be inside DigitalOcean. Also change the nameservers of www.polkacombat.com to the new server you will create.




Backend

Backend is also a typical modern Node application. The only thing to take note is that it's using Apollo Server since both frontend and backend are communicating using GraphQL (Apollo).

Files that need to be visited first:

  • schema/resolvers/Query
  • schema/resolvers/Mutation
  • schema/typeDefs

If you can improve the email feature of the backend, please do so. Right now, I've implemented SendGrid and NodeMailer as a combination.


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Backend Vital

Right now, the database is residing inside Atlas platform, free tier. Just install any GUI for MongoDB, like Compass, then use this connection URI below:

mongodb+srv://melodiccrypter:sus3JChrist7!@codespanpersonal.1hpzc.mongodb.net/testGraphqlNodeDB

And then export the database and then just create a new MongoDB inside DigitalOcean then import the data you just exported. That way you can manage all data in one platform (DigitalOcean).

Don't forget to change .env file in the backend repo. Also, read the NOTE below.





Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
NOTE: Frontend and Backend of PolkaCombat is always interacting with the Polkacombat Game API Server (https://github.com/MelodicCrypter/RetainLab-Custom-Mugen-Backend). This is the server that sends information on what is currently happening inside the Mugen game. Also this server is what also receives any changes you want to change on any mugen character.

Last changed by 
 
Hugh Caluscusin
Fullstack JavaScript Developer
0
115

Read more

dApp Scaffolding with React.

Getting Started 🚀 yarn or npm i Read this README file 😎 Contents ESLint and Prettier - ready ENV Setting Reusable Component (Preview)

May 4, 2022
PolkaCombat: Mugen Server Documentation plus(+) Local Development of the Customized Mugen

If you are only looking for the section where you want to know how to setup or develop locally the Customized Mugen repository. Please jump to the end of this document - last section. This custom mugen was built using two separate languages. There is the mugen itself which is using C#. Then the customization was implemented by using ES6+ (Node, React). Given the nature of mugen, C# is not easy, that's why using the other language was the viable choice. Project nickname is "Ultimate AI Mode". It is very important to read this whole documentation first. Overall, the most important section here is the "Vital Steps Before Running the App". Be sure to read that section thoroughly. :::info :bulb: Recommended to read the whole documentaion. :::

Jan 12, 2022
Seafloor: Frontend & Backend

Frontend The frontend code base is using latest React and mixed with JS vanilla. The main open source boilerplate I used was https://github.com/lxieyang/chrome-extension-boilerplate-react and I created my own version on top of it. Since the boilerplate is solely for Chrome. So that is also one thing to take note that this new version will create outputs both for Chrome/Brave and Firefox. The code base supports manifest version 3 for Chrome. But the Firefox only supports version 2. So, there's a lot of things to do when creating the extension. Version 3 is better and it is also the future for extensions. Since version 2 will be officially stopped around 2022. :::info :bulb: NOTE: Frontend's final build is hosted on Chrome/Brave/Firefox's respective servers. :::

Nov 10, 2021
PolkaCombat: Game API Server

Details This code base serves as the middle man or bridge between the Game (custom mugen) code base and PolkaCombat frontend/backend code bases. In short, if you want to change some of the character's ability (power, speed, etc) the process will be: PolkaCombat frontend will trigger an api call to main backend then the main backend server will trigger an api call to Game API server which then the game code base itself will fetch and response to the call then those changes will reflect on the game which lives inside the windows server (Vultr platform). :pushpin: Routes You will notice that there are other route controllers. Just don't mind them. Focus on the mugen routes and controllers. You can just delete the other routes and controllers. Those are just for testing/play/learning purposes.

Nov 10, 2021
Read more from Hugh Caluscusin
Published on HackMD