https://github.com/akashkumarram/codepen
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.
https://github.com/akashkumarram/codepen
codemirror-editor firebase framer-motion javascript reactjs redux-toolkit tailwindcss
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/akashkumarram/codepen
- Owner: AkashKumarRam
- Created: 2024-05-01T09:12:05.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T11:57:07.000Z (about 2 years ago)
- Last Synced: 2025-05-05T03:16:08.735Z (about 1 year ago)
- Topics: codemirror-editor, firebase, framer-motion, javascript, reactjs, redux-toolkit, tailwindcss
- Language: JavaScript
- Homepage: https://code-pen-theta.vercel.app
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
[](https://github.com/AkashKumarRam)
[](https://www.linkedin.com/in/akash-kumar-ram-b02387252)
# 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!
## Screenshots
## 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
```bash
git clone
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
```bash
git clone https://github.com/AkashKumarRam/CodePen.git
```
Go to the project directory
```bash
cd codepen
```
Install dependencies
```bash
npm install
```
Start the server
```bash
npm run dev
```
## Deployment
To deploy this project run
```bash
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](https://www.linkedin.com/in/akash-kumar-ram-b02387252)
## FAQ
#### What if I don't run this project?
Connect with me on [LinkedIn](https://www.linkedin.com/in/akash-kumar-ram-b02387252)
## Support
For support, Dm me on [LinkedIn](https://www.linkedin.com/in/akash-kumar-ram-b02387252)
## 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](https://eraser-seven.vercel.app)
[Airbnb | Holiday rentals, cabins, beach houses & more](https://airbnb-nine-puce.vercel.app)
## Authors
- [@Akash Kumar Ram](https://github.com/AkashKumarRam)