Skip to content

Discover our Realtime Code Editor! Crafted with CodeMirror, Firebase Authentication, and Firestore, this platform offers seamless code editing with live output. Enjoy secure access with email, Google, and GitHub logins. Effortlessly perform CRUD operations, empowering efficient data management.

Notifications You must be signed in to change notification settings

AkashKumarRam/CodePen

Repository files navigation

Hi, I'm Akash Kumar Ram! 👋

Welcome to my GitHub! I'm a Frontend Developer skilled in JavaScript, TypeScript, Tailwind CSS, ReactJS, Next.js, Docker, and System Design. Let's build innovative web solutions together!

🚀 About Me

As a skilled Frontend Developer, I specialize in JavaScript, TypeScript, Tailwind CSS, ReactJS, Next.js, Docker, and System Design. With a passion for crafting intuitive user experiences and a keen eye for detail, I bring innovative solutions to the forefront of web development. Let's collaborate to bring your projects to life!

🔗 Links

Github

linkedin

CodePen: Realtime Online Code Editor

Experience real-time coding with CodePen: Realtime Online Code Editor. Built with JavaScript, React, Tailwind CSS, Framer Motion, Firebase, CodeMirror, and Redux Toolkit, our platform offers seamless email, Google, and GitHub authentication. Effortlessly navigate and filter projects, while unleashing your creativity in a custom HTML, CSS, and JavaScript editor. Witness your creations come to life instantly in the integrated output section. Securely store your projects in Firestore, ensuring they're always within reach. Embark on a journey of coding innovation and collaboration with CodePen today!

Logo

Screenshots

SignUp

Login

Project Section

Filter Project

Coding With Output

Demo

https://code-pen-theta.vercel.app

Features

  • Seamless Authentication: Enjoy a smooth sign-in and sign-out experience with our intuitive authentication system powered by Firebase. Enhance your convenience by seamlessly integrating Google and GitHub social logins, ensuring effortless access to your CodePen account."

  • Efficient Search: Discover projects effortlessly using our efficient search functionality. Filter projects by various criteria and find exactly what you're looking for in no time.

  • Tailored Filtering: Customize your search even further with tailored filtering options. Filter projects by language, framework, or popularity to refine your search results.

  • Real-time Editing: Experience the power of real-time editing with our integrated CodeMirror editor. See your changes instantly reflected in the output section as you type.

  • Secure Storage: Rest assured that your projects are securely stored in our Firestore database. Access your projects from anywhere and never worry about losing your work.

Tech Stack

Client: JavaScript , Tailwind CSS , Framer Motion , ReactJS , Code Mirror , Redux Toolkit

Server: Firebase

Installation

Install my-project with npm

  git clone <https://github.com/AkashKumarRam/CodePen.git>

  cd codepen

  npm install

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

VITE_APP_API_KEY

VITE_APP_AUTHDOMAIN

VITE_APP_PROJECTID

VITE_APP_STORAGEBUCKET

VITE_APP_MESSAGESENDERID

VITE_APP_APPID

Run Locally

Clone the project

 git clone https://github.com/AkashKumarRam/CodePen.git

Go to the project directory

  cd codepen

Install dependencies

  npm install

Start the server

  npm run dev

Deployment

To deploy this project run

  npm run build

🛠 Skills

  • JavaScript ⚡️
  • TypeScript 📘
  • Tailwind CSS 💻
  • ReactJS ⚛️
  • Redux Toolkit 💡
  • React Query 🔍
  • Next.js 🚀
  • Docker 🐳
  • System Design ⚙️

Feedback

If you have any feedback, please reach out to us at LinkedIn

FAQ

What if I don't run this project?

Connect with me on LinkedIn

Support

For support, Dm me on LinkedIn

Lessons Learned

  • CodeMirror Mastery: Delving into CodeMirror allowed me to construct a real-time custom code editor seamlessly integrated with live output features, enhancing user experience and productivity.

  • Firebase Authentication Expertise: By implementing Firebase, I gained proficiency in setting up email, Google, and GitHub authentication systems, ensuring secure access and user-friendly login options.

  • Firestore CRUD Operations: Through Firestore, I mastered performing CRUD (Create, Read, Update, Delete) operations, empowering me to efficiently manage and manipulate data within the database.

Related

Here are some related projects

Drawer - Docs and Diagrams for Engineering Teams

Airbnb | Holiday rentals, cabins, beach houses & more

Authors

About

Discover our Realtime Code Editor! Crafted with CodeMirror, Firebase Authentication, and Firestore, this platform offers seamless code editing with live output. Enjoy secure access with email, Google, and GitHub logins. Effortlessly perform CRUD operations, empowering efficient data management.

Topics

Resources

Stars

Watchers

Forks