WebDevHub - A place for developers

WebDevHub is designed to be one central place for developers, that offers a variety of tools to help with any developing needs. This includes code formatters, file converters, image compressors etc.

https://webdevhub.herokuapp.com/

A central hub with all the tools a developer might need makes it easier to focus on developing, rather then searching for different sites to find a working tool. WebDevHub eliminates this hassle. The site is open-source, designed to be made by the users. If there a feature you want to add, a bug you want to fix etc, simply open a pull request.

Implemented Features

Hex to css filter: converter
Word Counter
Lorem Ipsum Generator
Code Formatter (HTML, CSS, JS, etc.)
JSON to XML converter.
Color Converter (Hex to RGB etc.)
Epoch Converter

Planned Features

Image Converter - UI implemented but needs server-side code to fix
URL Shortner
File Compressors
Site/code templates.
Expansion to provide tools for other programming languages (C, C++, Python etc.)
CSS grid generator
JWT encoder / decoder
Link to Regex101
Colour palette generator from a base colour
Text & JSON diff
JS repl
ESLint & Prettier config generators
.MD formatter/preview

If you like, you can fork the repo and create a pull request to contribute one of these features to the site. These are only some of the features planned to be added, and more will be listed here in the future. Check out the Projects page to see a more in-depth board of potential features to be added, or create a pull request and suggest your own feature.

Frameworks Used

How to Contribute

To contribute to the site:

Clone the repository via terminal or github desktop.
Run npm i to install all needed node packages.
In a terminal window opened in the main project directory, run npm run devStart to active nodemon, which will restart the test server whenever a change is made. The server can be acessed at localhost:3000
Create a new file in the /views directory titled your-feature.ejs and a new JS file in the /public directory titled your-feature.js in a relevent subfolder.
Add a new app.get request in the server.js file, as such:

app.get("/your-feature", (req, res) => {
    // Render the page with given paramaters.
    res.render("your-path/your-feature", {    // The name of the .ejs file you created including the path
        title: "Your Feature",      // The title of the webpage, usually the same as the feature name.
    });
});

Code your feature.
Add a link to the feature on the home page under a relevant subcategory.
(Optional) - Credit yourself at the bottom of your feature using this sample code. Have a look here for an example of how it is done.

  <!-- User Credit -->
  <hr class="credit-hr">
  <span class="credit-link">Feature added by <a href="https://github.com/your-username">@your-username</a></span>

Create a pull request for your new feature.

Rules/Guidelines for contributing

Try to follow the site's colour scheme.
Comment your code as you go and use readable variable names. Its hard to debug code when it looks like Latin.
Dont delete or change other people's code without a good explanation, or your pull-request wont be approved.

We want to make our documentation (including this README) the best it can be. If you have any suggestions, please open an issue or join our Discord for discussion.