abdulsamad / frontend-fun

Online web-based code editor for HTML, CSS, and JavaScript with live reload can be used for practice, quick mockups or CSS experiments

Frontend Fun

Online web-based code editor for HTML, CSS, and JavaScript with live reload can be used for practice, quick mockups, or CSS experiments

✨ Features

• Preview HTML, CSS, and JavaScript with live reload
• Backup and Restore data with UID
• Offline Support
• Word Wrap on Code Editor

Installation

Clone the repository

git clone https://github.com/abdulsamad/frontend-fun.git

Install dependencies

yarn

or

npm install

Netlify CLI is also required to run serverless functions

yarn global add netlify-cli

or

npm install -g netlify-cli

Environment Variables

Create a .env file in the project root and add the following variables

DATABASE_URI = /* Your MongoDB URI */

Development

If you don't have Netlify account, Create Netlify account (You can also login with GitHub, Gitlab & Bitbucket)

Login into Netlify CLI with command netlify login and grant access to Netlify CLI

Run netlify link command in project directory and link your project to Netlify

Run netlify dev command to start local server

For more information visit Netlify CLI docs

💡 Note: Netlify free plan limits the serverless functions to timeout at 10 seconds. It is possible that sometimes saving data won't work on deployment with Netlify free plan.

Screenshot