AWASM Native

Run your native apps seamlessly on your browser without any hiccups.

Run Locally

• Move into the root directory and run npm install, npm run prepare, npm run dev

Live demo

• Here is the live demo of the project hosted on Vercel. https://awasm-native.vercel.app/

Preview

Tech-Stack

Frontend

• React, Next.js
• Typescript
• TailwindCSS
• React Query
• Mantine UI
• React icons
• Tremor UI

Backend and database

• Next.js
• Firebase
• Next Auth

Additional libraries

• @ffmpeg/ffmpeg
• Monaco editor
• Pyodide
• hash-wasm

Features and pages

Dashboard

This page is server side rendered since we are not showing any real data at the moment and just using some static data fetched from firebase database just to test the UI components. This page contains various charts to display user interaction with the platform.

Video editor

This page has 4 types of video editing tools

1. Video to GIF
2. Video format converter
3. Video to MP3
4. Video trimmer

We are using FFMPEG wasm to execute these functions. https://ffmpeg.org/

Code Editor

This is an online python compiler which uses Pyodide to run python code on the browser. https://pyodide.org/en/stable/

We use Monaco Editor for the code editor.

Hash Generator

This is a tool which generates hash of a given text in real time using different types of hashing algorithms. We use hash-wasm for this. https://www.npmjs.com/package/hash-wasm

Scripts

• npm run dev: To start the development server on localhost
• npm run build: To create a production build