muhammadgmalezzat / CodePen-Clone

CodePen-Clone

Home Page:https://github-clone-4c4a3.web.app/home

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CodePen Clone

Full Stack CodePen Clone React Application

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them.

Front-end Technologies and liberaries

- HTML 
- CSS 
- JavaScript 
- React.js 
- Routing 
- Redux 
- Google Authentication 
- Tailwind CSS
- FireBase 
- Framer motion
- React Icons
- MUI
- Code Mirror 
- UUID 
- React Split Pane 
- React Loader Spinner 

User Stories & Features

๐Ÿ’น As a visitor, you can see a visually appealing and intuitive landing page with a clear navigation menu so that you can easily understand the purpose of the website and find my way around.

๐Ÿ’น As a registered user, you can be able to log in and log out of my account so that you can securely access and manage your pens and projects.

๐Ÿ’น As a registered user, you can create a new pen by providing a title, description, and choosing the appropriate HTML, CSS, and JavaScript settings so that you can start working on your code projects.

๐Ÿ’น As a user, you have a real-time code editor with separate tabs for HTML, CSS, and JavaScript, and the ability to see live previews of your code changes so that you can easily experiment and iterate on my projects.

๐Ÿ’น As a user, you can be able to search for pens based on keywords, tags so that you can discover interesting and relevant code projects.

๐Ÿ’น As a mobile user, the website is responsive and provide a seamless experience on different devices so that I can access and use CodePen on the go.

Website Screenshot in Laptop screen

Check out Website Video Here

Youtube video

About

CodePen-Clone

https://github-clone-4c4a3.web.app/home


Languages

Language:JavaScript 93.7%Language:CSS 4.3%Language:HTML 2.0%