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
- Single Platform for web development and programming, 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
- 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 application is not responsive in mobile devices until now.
- 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
| 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 |
Frontend Setup Instructions
- Fork and Clone the repo using
$ git clone https://github.com/rajat2502/CodeINN.git
$ cd CodeINN
- Change Branch to
frontendusing
$ git checkout frontend
- 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
backendusing
$ 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
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
- Add Routes for login, signup, homepage
- Add Routes for dashboard, web editor and program editor
- Integrate login and signup APIs
- Add Image hosting feature to web editor
- Add shortcuts to web editor
- Integrate save pen APIs in Web Editor
- Integrate All Snips API and Dashboard UI
- Add Makrdown previewer
- Integrate save program API for Markdown Previewer
- Add Programming IDE UI
- Add language support for some common lanaguges in programming editor (IDE)
- Integrate Compiler API in IDE
- Integrate save program API for IDE
Team Members
| S.No. | Name | Role | GitHub Username:octocat: |
|---|---|---|---|
| 1. | Pragati Verma | Backend Development | @PragatiVerma18 |
| 2. | Rajat Verma | Frontend Developer | @rajat2502 |
| 3. | Shristi Singh | UI Designer | @shristisingh29 |
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!
