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 techn

Repository Video ▶️

CodeINN

CodeINN is an instant code editor :pagewithcurl:, 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 :mantechnologist: , coders :computer: , and geeks :nerdface: 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

<summary>Frontend Setup Instructions</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

Install node dependencies

$ npm install

Run Server at localhost using

$ npm start

<summary>Backend Setup Instructions</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

Directory Structure

<summary>Frontend Directory Structure</summary>

📦CodeINN\ ┣ 📂.github\ ┃ ┣ 📂ISSUETEMPLATE\ ┃ ┃ ┣ 📜bugreport.md\ ┃ ┃ ┗ 📜featurerequest.md\ ┃ ┗ 📜PULLREQUESTTEMPLATE.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\ ┣ 📜CODEOF_CONDUCT.md\ ┣ 📜CONTRIBUTING.md\ ┣ 📜LICENSE\ ┣ 📜README.md\ ┣ 📜jsconfig.json\ ┣ 📜netlify.toml\ ┣ 📜package-lock.json\ ┣ 📜package.json\ ┣ 📜postcss.config.js\ ┗ 📜tailwind.js\

<summary>Backend Directory Structure</summary>

📦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\ ┃ ┃ ┣ 📜0001initial.py\ ┃ ┃ ┗ 📜init.py\ ┃ ┣ 📜init.py\ ┃ ┣ 📜admin.py\ ┃ ┣ 📜apps.py\ ┃ ┣ 📜models.py\ ┃ ┣ 📜serializers.py\ ┃ ┣ 📜tests.py\ ┃ ┣ 📜urls.py\ ┃ ┗ 📜views.py\ ┣ 📂users\ ┃ ┣ 📂migrations\ ┃ ┃ ┣ 📜0001initial.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}
:technologist:

_FossHack2020
: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
2.	Rajat Verma	Frontend Developer	@rajat2502
3.	Shristi Singh	UI Designer/Frontend Developer	@shristisingh29