README.md

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

FossHack2020

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Rajat Verma 💻

Pragati Verma 💻

Shristi Singh 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!