{"id":27878877,"url":"https://github.com/akashkumarram/codepen","last_synced_at":"2026-04-09T02:31:18.572Z","repository":{"id":237469318,"uuid":"794480060","full_name":"AkashKumarRam/CodePen","owner":"AkashKumarRam","description":" 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. ","archived":false,"fork":false,"pushed_at":"2024-05-01T11:57:07.000Z","size":233,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T03:16:08.735Z","etag":null,"topics":["codemirror-editor","firebase","framer-motion","javascript","reactjs","redux-toolkit","tailwindcss"],"latest_commit_sha":null,"homepage":"https://code-pen-theta.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AkashKumarRam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-01T09:12:05.000Z","updated_at":"2024-05-01T11:57:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"51513927-65a4-4fa1-97d0-88be267e1f45","html_url":"https://github.com/AkashKumarRam/CodePen","commit_stats":null,"previous_names":["akashkumarram/codepen"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AkashKumarRam/CodePen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashKumarRam%2FCodePen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashKumarRam%2FCodePen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashKumarRam%2FCodePen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashKumarRam%2FCodePen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AkashKumarRam","download_url":"https://codeload.github.com/AkashKumarRam/CodePen/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AkashKumarRam%2FCodePen/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31582583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"online","status_checked_at":"2026-04-09T02:00:06.848Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemirror-editor","firebase","framer-motion","javascript","reactjs","redux-toolkit","tailwindcss"],"created_at":"2025-05-05T03:16:05.975Z","updated_at":"2026-04-09T02:31:18.567Z","avatar_url":"https://github.com/AkashKumarRam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Hi, I'm Akash Kumar Ram! 👋\nWelcome 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!\n\n\n\n\n## 🚀 About Me\nAs 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!\n\n\n## 🔗 Links\n\n[![Github](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge\u0026logo=ko-fi\u0026logoColor=white)](https://github.com/AkashKumarRam)\n\n[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/akash-kumar-ram-b02387252)\n\n\n\n# CodePen: Realtime Online Code Editor\n\n\nExperience 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! \n\n\n![Logo](https://github.com/AkashKumarRam/CodePen/assets/114729514/fe5669bf-2f0e-4e0a-8454-899e788399da)\n\n\n## Screenshots\n\n![SignUp](https://github.com/AkashKumarRam/CodePen/assets/114729514/cb078b6b-947f-44db-b176-33b46b1f4752)\n\n![Login](https://github.com/AkashKumarRam/CodePen/assets/114729514/52601cd4-ce1d-440d-8e55-3aaadad17df5)\n\n![Project Section](https://github.com/AkashKumarRam/CodePen/assets/114729514/3b57d10c-72d0-4dfd-842d-1cf18841a5f9)\n\n![Filter Project](https://github.com/AkashKumarRam/CodePen/assets/114729514/f55878b5-3b43-44ec-af0b-880c18138fa4)\n\n![Coding With Output](https://github.com/AkashKumarRam/CodePen/assets/114729514/7ae3395b-8ede-4271-9887-5127b43dfe94)\n\n\n## Demo\n\nhttps://code-pen-theta.vercel.app\n\n\n## Features\n\n- **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.\"\n\n- **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.\n\n- **Tailored Filtering:** Customize your search even further with tailored filtering options. Filter projects by language, framework, or popularity to refine your search results.\n\n- **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.\n\n- **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.\n\n\n## Tech Stack\n\n**Client:** JavaScript , Tailwind CSS , Framer Motion , ReactJS , Code Mirror , Redux Toolkit\n\n**Server:** Firebase\n\n\n## Installation\n\nInstall my-project with npm\n\n```bash\n  git clone \u003chttps://github.com/AkashKumarRam/CodePen.git\u003e\n\n  cd codepen\n\n  npm install\n\n```\n    \n## Environment Variables\n\nTo run this project, you will need to add the following environment variables to your **.env** file\n\n`VITE_APP_API_KEY`\n\n`VITE_APP_AUTHDOMAIN`\n\n`VITE_APP_PROJECTID`\n\n`VITE_APP_STORAGEBUCKET`\n\n`VITE_APP_MESSAGESENDERID`\n\n`VITE_APP_APPID`\n\n\n## Run Locally\n\nClone the project\n\n```bash\n git clone https://github.com/AkashKumarRam/CodePen.git\n```\n\nGo to the project directory\n\n```bash\n  cd codepen\n```\n\nInstall dependencies\n\n```bash\n  npm install\n```\n\nStart the server\n\n```bash\n  npm run dev\n```\n\n\n## Deployment\n\nTo deploy this project run\n\n```bash\n  npm run build\n```\n\n\n## 🛠 Skills\n\n- JavaScript ⚡️\n- TypeScript 📘\n- Tailwind CSS 💻\n- ReactJS ⚛️\n- Redux Toolkit 💡\n- React Query 🔍\n- Next.js 🚀\n- Docker 🐳\n- System Design ⚙️\n\n\n\n\n\n\n\n## Feedback\n\nIf you have any feedback, please reach out to us at [LinkedIn](https://www.linkedin.com/in/akash-kumar-ram-b02387252)\n\n\n## FAQ\n\n#### What if I don't run this project?\n\nConnect with me on [LinkedIn](https://www.linkedin.com/in/akash-kumar-ram-b02387252)\n\n\n\n\n## Support\n\nFor support, Dm me on [LinkedIn](https://www.linkedin.com/in/akash-kumar-ram-b02387252)\n\n\n\n## Lessons Learned\n\n- **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.\n\n- **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.\n\n- **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.\n\n## Related\n\nHere are some related projects\n\n[Drawer - Docs and Diagrams for Engineering Teams](https://eraser-seven.vercel.app)\n\n[Airbnb | Holiday rentals, cabins, beach houses \u0026 more](https://airbnb-nine-puce.vercel.app)\n\n\n## Authors\n\n- [@Akash Kumar Ram](https://github.com/AkashKumarRam)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashkumarram%2Fcodepen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakashkumarram%2Fcodepen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakashkumarram%2Fcodepen/lists"}