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 👨‍💻 , coders 💻 , and geeks 🤓 to do more with their tech.

See Hosted Version Here

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:

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

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/ 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

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

Special Thanks To:

_{Code Mirror}

_{Judge0 API}

_{FossUnited.Org}

_{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
1.	Pragati Verma	Backend Development	@PragatiVerma18
2.	Rajat Verma	Frontend Developer	@rajat2502
3.	Shristi Singh	UI Designer/Frontend Developer	@shristisingh29