Git Product home page Git Product logo

devhub's Introduction

Dev Hub: A Awesome Hub for all Developers

Frame

About The Project

Dev Hub is a coolest hub for all developers to get any kind of libraries & packages. And it's very easy and fast way to get them all in one place. We will include more libraries for each section & update soon. Also we are working on some cool code snippets that are used daily on live projects.

Libraries for CSS, JS, ICON, IMAGES, ANDROID, ML, API etc.

Note: Next Js version coming soon with more features, under development.

Built With

All Tech Stacks that are using in this project:

  • HTML5
  • CSS3
  • Javascript | Jquery
  • SVG

Other tools you need know:

  • Figma
  • Illustrator

Here it seems that the main moto is to make the frontend awesome.

Folder Structure

├── client/
    ├── assets/             Other Resources Files
    ├── css/
        ├── components/     Css Component Files (header, footer, settings, loader)
        ├── libraries/      Css External Library Files
        ├── pages/          Css Main Site Page's Files
        ├── scss/           Sass Files
    ├── data/               Page Data Mapping Files [*.data.js]
    ├── fonts/              External Fonts
    ├── img/                All Images Files
    ├── js/
        ├── components/     Js Component Files (secure, responsive)
        ├── libraries/      Js External Library Files
    ├── src/                All Site Pages (css, js, img, icon)
    ├── index.html          Main Home Page
    ├── (Other Pages)       Extra Pages (404, new)

Before You Start

  • Try to maintain the file format & folder structure.
  • Try to maintain proper file names.
  • Don't use capital or spaces for files names instead use _ or -.

Getting Started

Please follow these simple steps to start working:

  1. If you want to work on issue then comment, then if you get assigned.
  2. Fork this Repo and clone your forked copy of the project.
  3. Navigate to your project directory and open it in your code editor.
  4. Always take a pull from the upstream repository to your main branch to keep it at par with the main project (updated repository).
  5. Create a new branch and name it as according to the issue.
  6. Start making your changes & after making changes.
  7. Open a Pull Request with a name of the issue and describe about your changes with reasons.

Add Your Name

Once your PR got merged, do not forget to add your name in CONTRIBUTING file. Further instructions are mentioned there.

Roadmap

See the open issues for a full list of proposed features (and known issues).

  • Documentation at some places.
  • Addition of Some Cool Styles.
  • Addition of More Useful Libraries.
  • Give Chance to user to add their Library.
  • More Features for More Interactivity in Site.
  • Developing in Next Js with more features.

Contact

Niladri Mondal

devhub's People

Contributors

imgbotapp avatar imniladri avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

sahilsaha7773 rishvantsingh srijita-mandal devmindtk prajwaldhule rohan-hazari polarizz17 vish-han sahilkr9 lavanyabisht11 combatantash soumali28 rajulpe mridul4101 wasimreja tanya-gupta25 sayan404 yes2eyes codeking95

devhub's Issues

Feature | Add some cool page transitions

Needed page transitions, when a user visits from one page to another.

What to do:

  • Some kinds of animations from one page to another, such as sliding, fading, etc.
  • Can use any library or manually but make sure it looks great.
  • Do other necessary changes for a good and better UI.

Feature | 404 (Page Not Found) Page required

Added the page not found error page and design it & make it awesome.

What to do:

  • Design the 404 page, add your HTML in 404.html.
  • Create an error.css stylesheet in /css/pages directory & make your changes.
  • Must use the fonts and colors variables that are in settings.css.
  • Also use the SVG file that is provided in the img directory error.svg
  • And make other necessary changes.

Feature | Create a Form for Users to Add Library

Create a beautiful form that helps users to submit new libraries for the hub.

What to do:

  • Add a form with the required fields mentioned below in new.html file.
  • Create custom stylings for each form field and add your styles in form.css file.
  • Try to use the color theme we provided in settings.css file.
  • And make other necessary changes and make the UI best looking.

Fields:

Add these fields must and you can also add any extra info field.

  • Name:
  • Email:
  • Library Name:
  • Library Link:
  • Library Category: (Use radio or dropdown for this)
  • Library Description:
  • Uses of the Library:

Feature | Create a Color Theme Shifter for the Site

Create a theme changer or shifter for the whole website, which changes the main color theme for the site.

What to do:

  • Make a theme shifter that changes the main color theme. (Current Color Theme: Blue+Yellow)
  • Choose some color combinations for other themes, Minimum 3-4. Get Here
  • Place the theme shifter in the footer section.
  • Try to use variables for the colors in a separate theme.css file in /css/components directory.
  • And make other necessary changes and make sure that the UI be good.
  • Also use proper documentation for writing the code.

Challenge:

  • The main challenge is that the selected theme may remain the same after the user closes the site or reload the page.
  • And it is for each theme.

Example: See an Example Here: My Site

Doc | Add more libraries in library page

Needed more useful libraries and resources in library pack pages.

What to do:

  1. More awesome CSS, JS, Android, API libraries.
  2. More awesome Icons, Images resources, etc.
  3. Make sure that your library doesn't exist before, check it before adding anything.

Bug | Make Responsive Form Page

The form page new.html isn't responsive.

What to do:

  • Make it responsive and make it look simple but cool.
  • And make other necessary changes and make sure that the UI be good.

Feature | Add Confetti Particles to the Loader Screen

Add some awesome confetti particles to the loading screen.

What to do:

  • Gather some cool colorful confetti particles.
  • Can use the particles.js library for this, which is already added in /js/libraries directory.
  • Create a sketch.app.js file for the configuration of the particles js and use this file for awesome customization.
  • Make the particles only for the loading screen.
  • And make other necessary changes that fit in and make UI be good.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.