updated readme

Author: vickyguptaa7

front-end/README.md

@@ -1,46 +1,60 @@
-# Getting Started with Create React App
+# Code Verse Frontend
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Features
 
-## Available Scripts
+- Multiple tabs for editing multiple files simultaneously
+- Integrated terminal
+- Search and replace functionality
+- Code folding
+- Import files and folders from your local system
+- Download files and folders to your local system
+- Persistent storage of files and folders
+- Autocomplete suggestions
 
-In the project directory, you can run:
+<br>
 
-### `npm start`
+## Themes
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+The code editor app offers multiple themes to customize the editor's appearance. Themes provide different color schemes and styles, allowing you to personalize the coding environment. Here are some available themes:
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+- Dark Theme: A sleek and modern dark-themed editor with a dark background and vibrant syntax highlighting colors. It is easy on the eyes and suitable for coding in low-light conditions.
 
-### `npm test`
+- Light Theme: A clean and bright light-themed editor with a white background and contrasting syntax highlighting colors. It offers a refreshing and professional coding experience.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+- Monokai Theme: A popular theme inspired by the Monokai color scheme, known for its vibrant and visually appealing syntax highlighting. It provides a stylish and energetic coding environment.
 
-### `npm run build`
+- Solarized Theme: The Solarized theme is a balanced and well-thought-out color scheme designed for code legibility. It offers both light and dark variants, ensuring comfortable coding in different lighting conditions.
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+- Dracula Theme: A dark-themed editor inspired by the popular Dracula color scheme. It features a dark background with contrasting syntax highlighting colors, creating an atmospheric and visually appealing coding environment.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+- Night Owl Theme: A sophisticated dark theme with carefully selected colors for optimal code readability. The Night Owl theme provides a pleasant contrast between the background and syntax elements, making code stand out while reducing eye strain.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+You can easily switch between themes within the app to find the one that suits your preferences.
 
-### `npm run eject`
+<br>
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+## Getting Started
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+1. Clone the repository:
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+   ```bash
+   git clone https://github.com/vickyguptaa7/Code-Verse.git
+   ```
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+2. Change to the `back-end` directory:
 
-## Learn More
+   ```bash
+   cd react-code-editor
+   ```
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+3. Install the dependencies:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+   ```bash
+   npm install
+   ```
+
+4. Start the development server:
+   ```bash
+   npm run dev
+   ```
+5. Open your favorite web browser and visit `http://localhost:3000` to access the code verse editor.

front-end/src/Assets/Data/FileFolder.data.tsx

@@ -9,15 +9,17 @@ import {
 import { uniqueIdGenerator } from "../../library/uuid/uuid.lib";
 
 const README = `#Introduction
-This web app is a clone of the popular code editor, Code Verse.
-It provides a similar interface and features to Code Verse, but can be accessed directly from your web browser.
+Welcome to CodeVerse, an online code editor and compiler designed to support various programming languages including Java, C++, Python, and more. With CodeVerse, you can write, edit, and execute your code seamlessly within a web-based environment.
 
 #FEATURES
-1.Multiple tabs for editing multiple files simultaneously
-2.Integrated terminal
-3.Search and replace functionality
-4.Code folding
-5.Autocomplete suggestions`;
+- Multiple tabs for editing multiple files simultaneously
+- Integrated terminal
+- Search and replace functionality
+- Code folding
+- Autocomplete suggestions
+- Import files and folders from your local system
+- Download files and folders to your local system
+- Persistent storage of files and folders`;
 
 const uniqueId = uniqueIdGenerator();
 

readme.md

@@ -26,8 +26,16 @@
 
 - **Code Folding**: When dealing with large code files, readability becomes crucial. CodeVerse allows you to collapse or fold sections of code, such as functions, classes, or loops, to hide their details temporarily. This feature helps you focus on specific parts of your code and improves overall code organization.
 
+- **Import files and folders**: I integrated a feature that allows me to import files and folders from my local system directly into the code editor web app. This makes it seamless to integrate my existing codebase into the editor.
+
+- **Download files and folders**: Another convenient feature I added is the ability to download files and folders from the web app. This functionality makes it effortless to save and share code with others.
+
+- **Persistent data**: One critical aspect I focused on was data persistence. The code editor automatically saves my work, ensuring that I never lose progress, even if I close the app or refresh the browser.
+
 - **Autocomplete Suggestions**: CodeVerse offers intelligent autocomplete suggestions as you type. The app analyzes your code context and provides suggestions for variables, functions, and other relevant code snippets. This feature saves time, reduces typos, and helps you write code more efficiently.
 
+
+
 <br>
 
 ## Technologies Used