Skip to content

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

License

Notifications You must be signed in to change notification settings

rajat2502/CodeINN

Repository files navigation

codeinn



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

HitCount MIT License All Contributors Open Issues Pull Requests Tweet watchers stars forks

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

CodeINN an online code editor

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:

Run in Postman Code Quality Code Coverage Build Passing

How to Get Started?

Dependencies Up to date Requirements Up To Date Node NPM ESLint Python Django

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

chat on slack

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

FossHack2020

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!

Uses Git Uses HTML Uses CSS Uses JS Built with love Built By Developers

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks