CODEWEB

This is the frontend of the project. It is a web based code editor for developing frontend websites. you can write html, css, javascript and view the resualt at the same time and also you can share your work with others

Backend Code

See Backend

Deployed Link

https://codeweb-woad.vercel.app/

Technologies Used

• React - used for building the UI
• Redux and redux Toolkit - used for state management
• React Router Dom - used for routing
• Axios - used for making API requests
• monaco-editor - used for code building code editor
• html-to-image - used for converting result output to image
• jszip - used for creating zip files and downloading them
• react-hook-form - used for form validation
• react-infinite-scroll-component - used for implementing infinite scrolling
• tailwindcss - used for styling

Features

• It is a web based code editor for developing frontend websites.
• User can write html, css, javascript and view the resualt at the same time and also you can share your work with others by sharing the link.
• User can also download the code as a zip file. In addition.
• User can create private and public projects. private projects are only visible to you and public projects are visible to everyone.
• This app allows you to create, edit, delete and view your projects.
• User can also fork other projects and edit them and also view the projects of other users.
• User can also search for projects by name or by user name.
• User like and comment on the projects.
• User can also view the profile of other users.
• User can follow and unfollow other users and also view the followers and following of other users.
• A User can create unlimited Public and Private projects.

How to run the project

This project is made with React. So, you need to have Node.js installed on your machine. If you don't have Node.js installed, you can download it from here.

Steps to run the project

Clone the repository

clone the repository by running the following command in your terminal

git clone https://github.com/kuntal-hub/codeweb-frontend.git

before running this command make sure that you have git installed in your local system. If you don't have git installed, you can download it from here.

Change the directory

change the directory to codeweb-frontend by running the following command in your terminal

cd codeweb-frontend

Install the dependencies

install the dependencies by running the following command in your terminal

npm install

configure the environment variables

after installing all the dependencies you need to create a .env file in the root directory of this project and then copy all the content from .env.example file and paste it in .env file and then change the value of all the variables according to your need.

Run the project

after doing all the above steps you are ready to run this project in your local system. to run this project in your local system run the below command in your terminal.

npm run dev

congratulations now you have successfully run this project in your local system.

---

How to contribute in this project

This project is open for contributions. If you want to contribute in this project, you can follow the below steps.

Fork the repository

fork this project in your github account by clicking on the fork button.

Clone the repository

clone the repository by running the following command in your terminal

git clone <your-forked-repository-url>

Change the directory

change the directory to codeweb-frontend by running the following command in your terminal

cd <cloned-repository-name>

Install the dependencies

install the dependencies by running the following command in your terminal

npm install

configure the environment variables

after installing all the dependencies you need to create a .env file in the root directory of this project and then copy all the content from .env.example file and paste it in .env file and then change the value of all the variables according to your need.

make changes

make the changes in the project according to your need. like adding new features, fixing bugs, improving the UI, etc.

Run the project

after doing all the above steps you are ready to run this project in your local system. to run this project in your local system run the below command in your terminal.

npm run dev

push the changes

after making the changes you need to push the changes to your forked repository by running the following command in your terminal

git add .
git commit -m "your commit message"
git push origin <your-branch-name>

Create a pull request

after pushing the changes to your forked repository you need to create a pull request to the main repository. you can create a pull request by clicking on the create pull request button.

congratulations 🎉 now you have successfully created a pull request. Now, the maintainers of this project will review your pull request and if everything is fine then your pull request will be merged.