Codepen Clone

React, firebase, tailwind

Quick Demo

Codepen-nouman.firebaseapp.com

Key Features:

1. 🎨 Tailwind design
2. 🔍 Searching
3. 🔐 Credential authentication
4. 🚀 Google authentication
5. 💻 Github authentication
6. 📝 Form validation
7. 👩‍💻 Code compilation (HTML, CSS, JS)
8. ⌛ Page loading state

Technology Stack:

1. 🚀 React.js (v18)
2. 🛠️ Tailwind CSS
3. 🔄 React Hooks
4. 🔄 Redux
5. 🔄 React-split-pane
6. 🌐 React router dom
7. 🎨 Framer-motion (animations)
8. 📦 Firebase (Database)
9. 🔐 Firebase (Authentication)
10. 📤 File handling (error, loading)

Cloning the repository

git clone https://github.com/chnoumanejaz/codepen.git

Install packages

npm i

Setup .env file

REACT_APP_API_KEY = 
REACT_APP_AUTH_DOMAIN = 
REACT_APP_PROJECT_ID = 
REACT_APP_STORAGE_BUCKET =
REACT_APP_MESSAGING_SENDER_ID = 
REACT_APP_APP_ID = 

Explore Codepen-Clone Now: Click here

Connect with me:

Skills

Support

For support, email noumanejaz92@gmail.com or join Linkedin (https://www.linkedin.com/in/chnoumanejaz/).

Author

• Nouman Ejaz - FrontEnd Developer, Reactjs | Redux | Nextjs | MySql | PHP | SASS | JavaScript - Nouman Ejaz