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!
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!
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!
https://code-pen-theta.vercel.app
-
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.
Client: JavaScript , Tailwind CSS , Framer Motion , ReactJS , Code Mirror , Redux Toolkit
Server: Firebase
Install my-project with npm
git clone <https://github.com/AkashKumarRam/CodePen.git>
cd codepen
npm install
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
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
To deploy this project run
npm run build
- JavaScript ⚡️
- TypeScript 📘
- Tailwind CSS 💻
- ReactJS ⚛️
- Redux Toolkit 💡
- React Query 🔍
- Next.js 🚀
- Docker 🐳
- System Design ⚙️
If you have any feedback, please reach out to us at LinkedIn
Connect with me on LinkedIn
For support, Dm me on LinkedIn
-
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.
Here are some related projects