Seafloor: Frontend & Backend

# 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. ::: #### :pushpin: Package.json Scripts If you notice there are lot of stuffs going on inside the script. Don't worry about it too much, just know that every time you run `yarn start` it will 1. Create a build directory for Firefox first. 2. Build the whole code base for Chrome, then will copy all those build files to a new directory dev-firefox-build 3. Copy the firefox-manifest.json to that new firefox dir and rename it to as manifest.json 4. Then it will rebuild again for Chrome as dev-chrome-build I think that's the whole gist of the script when you are **DEVELOPING** locally. If you want to build a **FINAL BUILD**, then run `yarn build` and then you manually create a manifest file for Firefox. Just copy the stuff you put inside firefox-manifest.json. #### :pushpin: Vital I've created a reminder/checklist before pushing your build code to Chrome or Firefox: 1. Check the API endpoint, these are located in `src/pages/background/index.js` and `src/utils/twitterTimelineBuilder.js` and check the `apiEndpoint` variable. Make sure to change it to the production domain server before building it for Chrome or Firefox. 2. Also, test first if it is working for both Chome and Firefox. Regarding Brave browser, if the extension is working for Chrome then it will surely work for Brave. 3. Also check version numbers inside your package file 4. Then run `yarn build` and then retest that final build if it will still run on Chrome or Firefox (*note to create own manifest for firefox*). 5. Then if it's working then deploy to platforms :::info :bulb: NOTE: Every time you change something in the manifest file for Chrome you have to convert it to the manifest for Firefox as well. Since, as stated above, Firefox only supports V2 for now. ::: #### :pushpin: Currrent ToDos for Frontend 1. Refactor and improve current code base 2. Continue implementing it on Firefox since I was not able to push latest update to Firefox 3. Refactor the twitter builder 4. Also research on how to push build files to Chrome and Firefox 5. Continue implementing UI to the Popup window and native embeds 6. Remove all console.logs 7. ... :::info :bulb: NOTE: Another important thing to note is that OpenSea will change its DOM structure and class names from time to time. So, if you notice that some of the previous implemented UI are not working always check if the class names are modified. ::: I already pushed the latest changes to Chrome but not yet to Firefox. ## **Backend** The backend code base is based on Node/Express for the structure and Mongo for the database with MVP style.The code base is based on my own created boilerplate specifically for MVP-related design pattern. I think the most crucial to note for the backend is the **scraping** aspect. **Always note** that when you are scraping a new collection from OpenSea always scrape it using your local development setup and do not use the current server, unless you create a separate server for scraping then that's the time you can a use a remote server for scraping. But till then, just use local resources coz the current remote server will be overloaded. Just check the routes file coz from there you can easily trace what's happening in and out of the code base. :::info :bulb: NOTE: Backend's final build is hosted in DigitalOcean. Go to RetainLab Project and look for *seafloor-api-server* droplet. Also, you also have to setup your own SSH keys if you want to use SSH locally. ::: If you have SSH'd to the server just run first `pm2 status` to see what are running or not. The 'frontend' which is running is just the front facing route of the server. Please check nginx config.