Added Notes app - React.js + Firebase (#349)

* Create README.md

* Added notes app project

* Update react.js README.md

* Update database-react.json

* Add screenshot.webp

* fixed the repetition in readme.md

React-JS-Projects/Advanced/Notes-App/README.md

@@ -0,0 +1,98 @@
+<h1 align='center'><b>💥 NOTES APP 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+  <img src="https://img.shields.io/badge/firebase-red?style=for-the-badge&logo=firebase" />
+  <img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" />
+  <img src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" />
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+    <p>
+      A user-friendly notes app enabling seamless note management functionalities by authentication, folder management, nested folders, text formatting, search functionality and responsive design.
+Users can login and create account using either email/password or Google account.
+      - Authentication: Login and register using either email/password or Google account.
+
+  - Folder Management: Create, edit, delete, and view folders to categorize and store notes.
+
+- Nested Folders: Create nested folders/subfolders, enabling hierarchical organization.
+
+- Note Management: Create, edit, delete, and view notes.
+
+- Text Formatting: Create text with bold, italic, underline, lists, images, and hyperlinks.
+
+- Search Functionality: Easily find notes and folders.
+
+- Responsive Design: Optimized for all screen sizes.
+    </p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+To run this project locally, follow these steps:
+
+1. Fork the repository.
+2. Clone the Repository.
+```
+git clone repository-url
+```
+3. go to root of project directory. 
+```
+cd repository-directory
+```
+4. Install Dependencies:
+```
+npm install
+```   
+5. setting up firebase - create .env file and fill the required credentials as below.<br/>
+```
+VITE_FIREBASE_API_KEY=your_api_key
+VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
+VITE_FIREBASE_PROJECT_ID=your_project_id
+VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
+VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
+VITE_FIREBASE_APP_ID=your_app_id
+```
+6. Run the Development Server.
+```
+npm run dev
+```
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+<img src="./public/screenshots/image_00.png"/><br/>
+<img src="./public/screenshots/image_01.png"/><br/>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>DHARSHI</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/dharshi-balasubramaniyam-47b193243'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/DharshiBalasubramaniyam'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

React-JS-Projects/Advanced/Notes-App/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./public/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <title>NoteNova</title>
+  </head>
+  <body>
+    <div id="root" class="bg-pink-950"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>