Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/rajat2502/codeinn

CodeINN is an instant code editor 📃, that makes programming and development easier. Practice quickly and directly from your web browser, without any setup needed. CodeINN gives the perfect environment to developers technologists, coders computers, and geeks 🤓 to do more with their tech.
https://github.com/rajat2502/codeinn
code-editor coding-tool development fosshack fossunited playground programming-languages react-codemirror2 vscode web web-development
Last synced: about 1 month ago
JSON representation
Host: GitHub
URL: https://github.com/rajat2502/codeinn
Owner: rajat2502
License: mit
Created: 2020-09-08T18:13:46.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2022-01-23T07:06:29.000Z (almost 3 years ago)
Last Synced: 2023-03-03T17:11:50.505Z (almost 2 years ago)
Topics: code-editor, coding-tool, development, fosshack, fossunited, playground, programming-languages, react-codemirror2, vscode, web, web-development
Language: CSS
Homepage: https://codeinn.netlify.app/
Size: 3.6 MB
Stars: 40
Watchers: 3
Forks: 9
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

README

        
 







# CodeINN

[CodeINN](https://codeinn.netlify.app/) is an instant code editor :page_with_curl:, that makes programming and development easier. Practice quickly and directly from your web browser, without any setup needed. CodeINN gives the perfect environment to developers :man_technologist: , coders :computer: , and geeks :nerd_face: to do more with their tech.

> See Hosted Version [Here](https://codeinn.netlify.app/)

[![HitCount](http://hits.dwyl.com/rajat2502/CodeINN.svg)](http://hits.dwyl.com/rajat2502/CodeINN)

[![MIT License](https://img.shields.io/github/license/rajat2502/CodeINN)](https://github.com/rajat2502/CodeINN/blob/master/LICENSE)

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)

[![Open Issues](https://img.shields.io/github/issues/rajat2502/CodeINN)](https://github.com/rajat2502/CodeINN/issues)

[![Pull Requests](https://img.shields.io/github/issues-pr/rajat2502/CodeINN)](https://github.com/rajat2502/CodeINN/pulls)

[![Tweet](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Frajat2502%2FCodeINN)](https://github.com/rajat2502/CodeINN)

[![watchers](https://img.shields.io/github/watchers/rajat2502/CodeINN?style=social)](https://github.com/rajat2502/CodeINN/watchers)

[![stars](https://img.shields.io/github/stars/rajat2502/CodeINN?style=social)](https://github.com/rajat2502/CodeINN/stargazers)

[![forks](https://img.shields.io/github/forks/rajat2502/CodeINN?style=social)](https://github.com/rajat2502/CodeINN/network/members)

## Features

- **Single Platform** for web development, programming and markdown, without the need for constantly switching tools

- **live preview** of the code changes

- **Syntax higlighting, bracket matching, code formatting and autocompletion**

- Easy save, share, reset or delete options

- Lightweight and fast

- Supports **C, C++, Python, HTML, CSS, JS**

## Demo Video



  



## Browser Support

- **Firefox**:	version 4 and up

- **Chrome**:	any version

- **Safari**:	version 5.2 and up

- **Internet Explorer/Edge**:	version 8 and up

- **Opera**:	version 9 and up

> **Note**: Support for modern mobile browsers is experimental. The website is not responsive in mobile devices until now.

## Technology Stack to be used:

              

- **Frontend**: ReactJS, React-Hooks, React-Codemirror-2

- **Backend**: Django, Django Rest Framework

- **External APIs**: ImgBB API (For hosting images)

- **IDE**: VS Code

- **Design**: Adobe Photoshop, Canva

- **API Testing & Documentation**: Postman

- **Version Control**: Git and GitHub

- **Database**: Sqllite3

- **Hosting**: Heroku, Netlify

## Links:

[![Run in Postman](https://run.pstmn.io/button.svg)](https://app.getpostman.com/run-collection/3023eb862bb9b0f8a287)

[![Code Quality](https://img.shields.io/badge/code%20quality-A-brightgreen)](https://github.com/rajat2502/CodeINN)

[![Code Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)](https://github.com/rajat2502/CodeINN)

[![Build Passing](https://img.shields.io/badge/build-passing-brightgreen)](https://github.com/rajat2502/CodeINN)

- **Frontend**: [https://codeinn.netlify.app/](https://codeinn.netlify.app/)

- **Backend**: [https://codeinn.herokuapp.com/](https://codeinn.herokuapp.com/)

- **Postman Collection**: [https://app.getpostman.com/run-collection/3023eb862bb9b0f8a287](https://app.getpostman.com/run-collection/3023eb862bb9b0f8a287)

- **Postman Docs**: [https://documenter.getpostman.com/view/10608582/TVCmRjz6](https://documenter.getpostman.com/view/10608582/TVCmRjz6)

### How to Get Started?

[![Dependencies Up to date](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen)](https://github.com/rajat2502/CodeINN/blob/master/package-lock.json)

[![Requirements Up To Date](https://img.shields.io/badge/requirements-up%20to%20date-brightgreen)](https://github.com/rajat2502/CodeINN/blob/backend/requirements.txt)

[![Node](https://img.shields.io/badge/node%40latest-%3E%3D%206.0.0-brightgreen)](https://nodejs.org/en/)

[![NPM](https://img.shields.io/npm/v/npm/latest)](https://www.npmjs.com/)

[![ESLint](https://img.shields.io/badge/eslint-%5E3.0.0-blue)](https://eslint.org/)

[![Python](https://img.shields.io/badge/python-v3.7-blue)](https://www.python.org/)

[![Django](https://img.shields.io/badge/django%20versions-1.11%20%7C%202.0%20%7C%202.1-blue)](https://www.djangoproject.com/)

#### GitHub Repository Structure

| S.No. | Branch Name | Purpose |

| --------------- | --------------- | --------------- |

| 1. | [master](https://github.com/rajat2502/CodeINN/tree/master) | contains the main code  |

| 2. | [backend](https://github.com/rajat2502/CodeINN/tree/backend) | contains all backend code |

| 3. | [frontend](https://github.com/rajat2502/CodeINN/tree/frontend) | contains all frontend code |

| 4. | [documentation](https://github.com/rajat2502/CodeINN/tree/documentation) | contains all documentation related changes |

#### Setup

  Frontend Setup Instructions

  

  

- Fork and Clone the repo using

```

$ git clone https://github.com/rajat2502/CodeINN.git

$ cd CodeINN

```

- Change Branch to `frontend` using 

```

$ git checkout frontend

```

- Get the API key from [https://api.imgbb.com/](https://api.imgbb.com/) and replace it with `REACT_APP_IMGBB_API_KEY` in `.env.example`

- Get a new API key from [https://docs.rapidapi.com/docs/keys](https://docs.rapidapi.com/docs/keys) and replace it with `REACT_APP_RAPID_API_KEY` in `.env.example`

- Rename the file `.env.example` to `.env`

- Install node dependencies

```

$ npm install

```

- Run Server at localhost using

```

$ npm start

```

  

  Backend Setup Instructions

- Fork and Clone the repo using

```

$ git clone https://github.com/rajat2502/CodeINN.git

$ cd CodeINN

```

- Change Branch to `backend` using 

```

$ git checkout backend

```

- Setup Virtual environment

```

$ python3 -m venv env

```

- Activate the virtual environment

```

$ source env/bin/activate

```

- Install dependencies using

```

$ pip install -r requirements.txt

```

- Make migrations using

```

$ python manage.py makemigrations

```

- Migrate Database

```

$ python manage.py migrate

```

- Create a superuser

```

$ python manage.py createsuperuser

```

- Run server using

```

$ python manage.py runserver

``` 

## Directory Structure

  Frontend Directory Structure

📦CodeINN\

 ┣ 📂.github\

 ┃ ┣ 📂ISSUE_TEMPLATE\

 ┃ ┃ ┣ 📜bug_report.md\

 ┃ ┃ ┗ 📜feature_request.md\

 ┃ ┗ 📜PULL_REQUEST_TEMPLATE.md\

 ┣ 📂public\

 ┃ ┣ 📜fav.png\

 ┃ ┣ 📜index.html\

 ┃ ┣ 📜logo192.png\

 ┃ ┣ 📜logo512.png\

 ┃ ┗ 📜manifest.json\

 ┣ 📂src\

 ┃ ┣ 📂api\

 ┃ ┃ ┗ 📜index.js\

 ┃ ┣ 📂assets\

 ┃ ┃ ┣ 📂fonts\

 ┃ ┃ ┃ ┗ 📜ProximaNovaRegular.ttf\

 ┃ ┃ ┗ 📂img\

 ┃ ┃ ┃ ┣ 📜1.gif\

 ┃ ┃ ┃ ┣ 📜1.jpeg\

 ┃ ┃ ┃ ┣ 📜1.png\

 ┃ ┃ ┃ ┣ 📜2.png\

 ┃ ┃ ┃ ┣ 📜3.png\

 ┃ ┃ ┃ ┣ 📜4.png\

 ┃ ┃ ┃ ┣ 📜5.png\

 ┃ ┃ ┃ ┣ 📜6.png\

 ┃ ┃ ┃ ┣ 📜7.png\

 ┃ ┃ ┃ ┣ 📜8.webp\

 ┃ ┃ ┃ ┣ 📜9.webp\

 ┃ ┃ ┃ ┗ 📜logo.png\

 ┃ ┣ 📂components\

 ┃ ┃ ┣ 📂Dashboard\

 ┃ ┃ ┃ ┣ 📜AddCodeSnip.jsx\

 ┃ ┃ ┃ ┣ 📜AddMkdSnip.jsx\

 ┃ ┃ ┃ ┣ 📜AddWebSnip.jsx\

 ┃ ┃ ┃ ┣ 📜CodeSnip.jsx\

 ┃ ┃ ┃ ┣ 📜Dashboard.jsx\

 ┃ ┃ ┃ ┗ 📜index.js\

 ┃ ┃ ┣ 📂Home\

 ┃ ┃ ┃ ┣ 📜Home.jsx\

 ┃ ┃ ┃ ┗ 📜index.js\

 ┃ ┃ ┣ 📂Login\

 ┃ ┃ ┃ ┣ 📜Login.jsx\

 ┃ ┃ ┃ ┗ 📜index.js\

 ┃ ┃ ┣ 📂MarkDownPreviewer\

 ┃ ┃ ┃ ┣ 📜MarkDownPreviewer.jsx\

 ┃ ┃ ┃ ┗ 📜index.js\

 ┃ ┃ ┣ 📂ProgramEditor\

 ┃ ┃ ┃ ┣ 📜ProgramEditor.jsx\

 ┃ ┃ ┃ ┗ 📜index.js\

 ┃ ┃ ┣ 📂Signup\

 ┃ ┃ ┃ ┣ 📜Signup.jsx\

 ┃ ┃ ┃ ┗ 📜index.js\

 ┃ ┃ ┣ 📂WebEditor\

 ┃ ┃ ┃ ┣ 📜BottomBar.jsx\

 ┃ ┃ ┃ ┣ 📜DefaultWindow.jsx\

 ┃ ┃ ┃ ┣ 📜DisplayWindow.jsx\

 ┃ ┃ ┃ ┣ 📜Iframe.jsx\

 ┃ ┃ ┃ ┣ 📜ImageUpload.jsx\

 ┃ ┃ ┃ ┣ 📜Shortcuts.jsx\

 ┃ ┃ ┃ ┣ 📜WebCodeEditor.jsx\

 ┃ ┃ ┃ ┣ 📜WebEditor.jsx\

 ┃ ┃ ┃ ┗ 📜index.js\

 ┃ ┃ ┣ 📜CodeEditor.jsx\

 ┃ ┃ ┣ 📜Footer.jsx\

 ┃ ┃ ┣ 📜Icon.jsx\

 ┃ ┃ ┣ 📜Modal.jsx\

 ┃ ┃ ┗ 📜Navbar.jsx\

 ┃ ┣ 📂styles\

 ┃ ┃ ┣ 📜App.css\

 ┃ ┃ ┣ 📜index.css\

 ┃ ┃ ┗ 📜tailwind.css\

 ┃ ┣ 📂utils\

 ┃ ┃ ┣ 📜getIcons.js\

 ┃ ┃ ┣ 📜helpers.js\

 ┃ ┃ ┣ 📜parseMarkdown.js\

 ┃ ┃ ┗ 📜useModal.js\

 ┃ ┣ 📜App.jsx\

 ┃ ┗ 📜index.js\

 ┣ 📜.all-contributorsrc\

 ┣ 📜.gitignore\

 ┣ 📜CODE_OF_CONDUCT.md\

 ┣ 📜CONTRIBUTING.md\

 ┣ 📜LICENSE\

 ┣ 📜README.md\

 ┣ 📜jsconfig.json\

 ┣ 📜netlify.toml\

 ┣ 📜package-lock.json\

 ┣ 📜package.json\

 ┣ 📜postcss.config.js\

 ┗ 📜tailwind.js\

  

  Backend Directory Structure

📦CodeINN\

 ┣ 📂.vscode\

 ┃ ┗ 📜settings.json\

 ┣ 📂api\

 ┃ ┣ 📂migrations\

 ┃ ┃ ┗ 📜__init__.py\

 ┃ ┣ 📜__init__.py\

 ┃ ┣ 📜admin.py\

 ┃ ┣ 📜apps.py\

 ┃ ┣ 📜models.py\

 ┃ ┣ 📜tests.py\

 ┃ ┣ 📜urls.py\

 ┃ ┗ 📜views.py\

 ┣ 📂codeinn\

 ┃ ┣ 📜__init__.py\

 ┃ ┣ 📜asgi.py\

 ┃ ┣ 📜settings.py\

 ┃ ┣ 📜urls.py\

 ┃ ┣ 📜views.py\

 ┃ ┗ 📜wsgi.py\

 ┣ 📂snips\

 ┃ ┣ 📂migrations\

 ┃ ┃ ┣ 📜0001_initial.py\

 ┃ ┃ ┗ 📜__init__.py\

 ┃ ┣ 📜__init__.py\

 ┃ ┣ 📜admin.py\

 ┃ ┣ 📜apps.py\

 ┃ ┣ 📜models.py\

 ┃ ┣ 📜serializers.py\

 ┃ ┣ 📜tests.py\

 ┃ ┣ 📜urls.py\

 ┃ ┗ 📜views.py\

 ┣ 📂users\

 ┃ ┣ 📂migrations\

 ┃ ┃ ┣ 📜0001_initial.py\

 ┃ ┃ ┗ 📜__init__.py\

 ┃ ┣ 📜__init__.py\

 ┃ ┣ 📜admin.py\

 ┃ ┣ 📜apps.py\

 ┃ ┣ 📜forms.py\

 ┃ ┣ 📜models.py\

 ┃ ┣ 📜serializers.py\

 ┃ ┣ 📜tests.py\

 ┃ ┣ 📜urls.py\

 ┃ ┗ 📜views.py\

 ┣ 📜.gitignore\

 ┣ 📜README.md\

 ┣ 📜manage.py\

 ┗ 📜requirements.txt

  

## Slack Channel

[![chat on slack](https://img.shields.io/badge/chat-on%20slack-brightgreen)](https://join.slack.com/t/codeinnworkspace/shared_invite/zt-hncwfhlc-uZ48U49lBxBLKh_Xd1aXxQ)

## Special Thanks To:

                                                                                                                                     

  

    
_{Code Mirror}
💻

    
_{Judge0 API}
:technologist:


_{FossUnited.Org}
:earth_africa:

        
_{ImgBB API}
🎨

  

## Future Prospects:

- [ ] Add more views in Web like full-screen view, Editor view, etc

- [ ] Add support for more programming languages in programming mode

- [ ] GitHub integrations for creating the repository

- [ ] Hosting the web snippet on a suitable hosting platform

- [ ] Feature to fork the programs in all views/modes

- [ ] Add compatibility to popular web frameworks

- [ ] Grow the community size and create beginner-friendly issues

## Team:

> "Alone we can do so little; together we can do so much."

| S.No. | Name | Role | GitHub Username:octocat: |

| --------------- | --------------- | --------------- | --------------- |

| 1. | Pragati Verma | Backend Development | [@PragatiVerma18](https://github.com/PragatiVerma18) |

| 2. | Rajat Verma | Frontend Developer| [@rajat2502](https://github.com/rajat2502)  |

| 3. | Shristi Singh | UI Designer/Frontend Developer | [@shristisingh29](https://github.com/shristisingh29)  |

## FossHack2020

> This project was made within the span of 2 days under FossHack2020 Hackathon







## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Rajat Verma}
💻

    
_{Pragati Verma}
💻

    
_{Shristi Singh}
🎨

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[![Uses Git](https://forthebadge.com/images/badges/uses-git.svg)](https://github.com/rajat2502/CodeINN/) [![Uses HTML](https://forthebadge.com/images/badges/uses-html.svg)](https://github.com/rajat2502/CodeINN/) [![Uses CSS](https://forthebadge.com/images/badges/uses-css.svg)](https://github.com/rajat2502/CodeINN/) [![Uses JS](https://forthebadge.com/images/badges/uses-js.svg)](https://github.com/rajat2502/CodeINN/)

[![Built with love](https://forthebadge.com/images/badges/built-with-love.svg)](https://github.com/rajat2502/CodeINN) [![Built By Developers](https://forthebadge.com/images/badges/built-by-developers.svg)](https://github.com/rajat2502/CodeINN)