anmolpant / DyteTask

SaniText-Code is an all-inclusive online development environment for testing and showcasing user-created HTML, CSS, and JavaScript code snippets. It functions as an online code editor where developers can create code snippets and test them.

SaniText Code

Problem Statement - Frontend (React)

For this problem statement, you should not build your own backend. You are allowed to use any library that you may require during implementation.

Create an online code editor using React that supports the following features:

There are 3 sections, namely:

1. A “file explorer” pane that contains 3 files: index.html, index.css, index.js.

2. A “code editor” that supports syntax highlighting for HTML, CSS, and JS.

3. A “live view” section to show the rendered HTML website.

Clicking on a file from the “file explorer” should display the corresponding content on the code editor for editing.

The “live view” section must display the rendered website that was created by the user. When a change is made to any of the index.html, index.css, or index.js files, the “live view” section should hot-reload, and display the new output.

Bonus:

1. Create a feature to save your code, and generate a shareable link (such as https://editor.io/edit/) that should show the saved code when the link is visited. Use the Pastebin Developer API to save your code, generate a unique link, and then load it back at a later stage.

2. Deploy your website on Github pages.

3. Make your React application using Typescript.

The following screenshot from https://codepen.io shows an example of how your application might look. Feel free to change the UI/UX as you see fit.

Name: Anmol Pant
Reg No: 18BCE0283
Submission for: Dyte Frontend Task

SaniText-Code is an all inclusive online development environment for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor where developers can create code snippets and test them. The output of the corresponding snippets is generated in real time and the UI features an interactive file explorer pane that allows the user to switch seamlesslessly between different files and allow the incorporation of changes dynamically.
The webapp was created as the submission for the frontend task for the problem statement given by Dyte.

Top Language

Screenshots

Steps to run this project

1. Clone this repository and cd into it.
2. Execute npm install to download dependencies.
3. If u dont have a react app installed install it using the command npm install -g create-react-app
4. Start the server by using the command npm start
5. cd into the client folder, run npm install followed by npm start to start the development server.
6. Open http://localhost:3000 in your browser.

$ git clone https://github.com/anmolpant/DyteTask
$ cd DyteTask
$ npm install
$ npm start

Deployment

Checkout the hosted version of the webapp here - https://dyte-task-anmolpant.vercel.app/

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Tech Stacks / Tools used

Contributors

Anmol Pant

License

MIT © Anmol Pant

Please do ⭐ this repo, if you liked my work.