Dev Stack - Online Code Editor

Overview

Dev Stack is an interactive online community platform designed for front-end developers to create, share, and showcase their HTML, CSS, and JavaScript code snippets. It provides a user-friendly interface for coding, with features that promote collaboration and learning among developers.

Features

• Code Editing: Real-time code editing with syntax highlighting.
• Project Management: Create, edit, and delete projects easily.
• Auto save: Code will automatically saved in working project file.
• Live Preview: Instantly see the results of your code in a live preview window.
• User Authentication: Secure login and sign-up process to protect your projects.

Tech Stack

• Frontend:

  • React.js: A JavaScript library for building user interfaces.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.

• Backend:

  • Node.js: JavaScript runtime for building scalable network applications.
  • Express: A minimal and flexible Node.js web application framework.

• Database:

  • MongoDB: A NoSQL database for storing user data and project information.

• API Testing:

  • Axios: A promise-based HTTP client for making requests.

• Authentication:

  • JWT (JSON Web Tokens): For secure authentication.
  • bcrypt: For password hashing.

How to Use

1. Sign Up: Create your account by signing up.

   • Simply provide your username and password.

2. Login: Access your account using your credentials.

3. Create Project: Click on the "Create Project" button to start a new project.

4. Start Coding:

   • Select your project from the dashboard.
   • Use the code editor to write your HTML, CSS, and JavaScript.
   • Watch your code come to life with the live preview feature.

Note: You can start coding without signing up!

Installation and Setup

If you want to run Dev Stack locally, follow these steps:

Prerequisites

• Node.js and npm installed on your machine.
• MongoDB installed and running.

Clone the Repository

git clone https://github.com/yourusername/dev-stack.git
cd dev-stack

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your changes to your fork.
5. Submit a pull request.

Thank you for your interest in contributing!

Live Demo

Check out the live version of the application here: Dev Stack Live