<div align="center"> <img align="center" alt="codeinn" src="https://user-images.githubusercontent.com/42115530/92988202-e29fcb80-f4e6-11ea-8464-40a6d0bd5297.png" height='80' width='400'></div>

<br /><br />

CodeINN

CodeINN 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

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

<!-- ALL-CONTRIBUTORS-BADGE:END -->

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

<a href="https://youtu.be/xdtb31djE1Y" target="_blank" rel="noopener"> <img src="https://user-images.githubusercontent.com/42115530/93301744-873b4980-f816-11ea-9c70-371afae8be9c.png" alt="CodeINN an online code editor" title="CodeINN" width="400px" /> </a>

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:

<img src="https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white"/> <img src="https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white"/> <img src="https://img.shields.io/badge/python%20-%2314354C.svg?&style=for-the-badge&logo=python&logoColor=white"/> <img src="https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E"/> <img src="https://img.shields.io/badge/react%20-%2320232a.svg?&style=for-the-badge&logo=react&logoColor=%2361DAFB"/> <img src="https://img.shields.io/badge/django%20-%23092E20.svg?&style=for-the-badge&logo=django&logoColor=white"/> <img src="https://img.shields.io/badge/markdown-%23000000.svg?&style=for-the-badge&logo=markdown&logoColor=white"/> <img src="https://img.shields.io/badge/adobe%20photoshop%20-%2331A8FF.svg?&style=for-the-badge&logo=adobe%20photoshop&logoColor=white"/> <img src="https://img.shields.io/badge/github%20-%23121011.svg?&style=for-the-badge&logo=github&logoColor=white"/> <img src="https://img.shields.io/badge/heroku%20-%23430098.svg?&style=for-the-badge&logo=heroku&logoColor=white"/> <img src ="https://img.shields.io/badge/sqlite-%2307405e.svg?&style=for-the-badge&logo=sqlite&logoColor=white"/>

• 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:

• Frontend: https://codeinn.netlify.app/
• Backend: https://codeinn.herokuapp.com/
• Postman Collection: https://app.getpostman.com/run-collection/3023eb862bb9b0f8a287
• Postman Docs: https://documenter.getpostman.com/view/10608582/TVCmRjz6

How to Get Started?

GitHub Repository Structure

| S.No. | Branch Name | Purpose | | --------------- | --------------- | --------------- | | 1. | master | contains the main code | | 2. | backend | contains all backend code | | 3. | frontend | contains all frontend code | | 4. | documentation | contains all documentation related changes |

Setup

<details> <summary><strong>Frontend Setup Instructions</strong></summary>

• 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/ and replace it with REACT_APP_IMGBB_API_KEY in .env.example

• Get a new API key from 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

</details> <details> <summary><strong>Backend Setup Instructions</strong></summary>

• 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

</details>

Directory Structure

<details> <summary><strong>Frontend Directory Structure</strong></summary>

📦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