aviknayak22 / code-brackets-wd

Code-Brackets is a browser-based code editor similar to Jsfiddle, Codepen etc.

Code Brackets

Code Brackets is a web-based code editor application that provides a seamless environment for writing and previewing HTML, CSS, and JavaScript code snippets.

Screenshots

1. Home page:

   

2. Compiler page:

   

Features

1. Code Editing: Supports editing and syntax highlighting for HTML, CSS, and JavaScript within a single interface.

2. Live Preview: Real-time preview of code changes rendered in an embedded iframe.

3. Save and Share: Users can save and share their code snippets via unique URLs.

4. Responsive Design: Easily adapts to different screen sizes and orientations.

Technologies Used

• Frontend: React, React Router, Redux Toolkit, Tailwind CSS, Shadcn UI

• Backend: PocketBase for managing and storing code snippets.

• Other Libraries: CodeMirror, Axios, Lucide icons

Installation

1. Clone the repository:

    git clone https://github.com/AvikNayak22/Code-Brackets.git
   

2. Change into the project directory:

   cd Code-Brackets
   

3. Install dependencies:

   npm install
   

4. Create a .env file in the root directory of the project with the following content:

   VITE_POCKETBASE_URL=your-pocketbase-url
   

5. Start the development server:

   npm run dev
   

Contributors

• Avik Nayak (@AvikNayak22)