DEV Community: Dip Vachhani The latest articles on DEV Community by Dip Vachhani (@dip15739). https://dev.to/dip15739 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F605807%2F8ea29009-c84f-4d81-8b02-51d90c64eaf1.png DEV Community: Dip Vachhani https://dev.to/dip15739 en GitHub Search Dip Vachhani Thu, 27 May 2021 15:09:18 +0000 https://dev.to/dip15739/github-search-4k30 https://dev.to/dip15739/github-search-4k30 <p><strong>Search GitHub user and show user info with different UI and add or remove user repo to the favorite list using react with firestore and firebase authentication</strong></p> <h3> Demo </h3> <p>GitHub: <a href="https://github.com/DIp15739/github-search">https://github.com/DIp15739/github-search</a><br> URL: <a href="https://searchgithubuserinfo.netlify.app">https://searchgithubuserinfo.netlify.app</a></p> <p> <a href="https://user-images.githubusercontent.com/42184833/119221268-259d4e80-bb0c-11eb-85a9-8670dcd09d8f.png"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--w4tdy2Lq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/42184833/119221268-259d4e80-bb0c-11eb-85a9-8670dcd09d8f.png"> </a><a></a> </p> <h2> <strong>Features</strong> </h2> <ul> <li> <strong>Authentication</strong> </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>1. Sign up 2. Login 3. Forgot Password using email 4. Logout </code></pre> </div> <ul> <li> <strong>user info</strong> </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>1. Search GitHub user using GitHub API 2. Show user profile - Avatar - Name - Username / Github Id - Bio - Blog URL / Website - Location 3. User Repo - Total Repo, Gists and Followers Count - Name (on click open github repo page) - Description - language - Star count - Watch count - Heart icon for add to favorite 4. add or remove repo in favorite </code></pre> </div> <h2> <strong>Technologies</strong> </h2> <ol> <li> React 16.13.1</li> <li> React Dom 16.13.1</li> <li> React Router Dom 5.2.0</li> <li> React Toasttify 7.0.4</li> <li> Axios 0.21.1</li> <li> React Bootstrap 1.6.0</li> <li> Bootstrap 4.6.0</li> </ol> <h2> <strong>How to Use</strong> </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>git clone https://github.com/DIp15739/github-search.git cd github-search npm install </code></pre> </div> <ul> <li> <h3> <strong>Firebase</strong> </h3> <ul> <li>Create <ul> <li>Create Firebase Project</li> <li>Start Authentication with Email</li> <li>Start Cloud Firestore</li> <li>Copy config from Project settings <ul> <li>Setup in project</li> <li>Create <code>.evn.local</code> file and add all data <strong><em>REACT_APP_FIREBASE_API_KEY</em></strong> = apiKey value <strong><em>REACT_APP_FIREBASE_AUTH_DOMAIN</em></strong> = authDomain value <strong><em>REACT_APP_FIREBASE_DATABASE_URL</em></strong> = databaseURL value <strong><em>REACT_APP_FIREBASE_PROJECT_ID</em></strong> = projectId value <strong><em>REACT_APP_FIREBASE_STORAGE_BUCKET</em></strong> = storageBucket value <strong><em>REACT_APP_FIREBASE_MESSAGING_SENDER_ID</em></strong> = measurementId value <strong><em>REACT_APP_FIREBASE_APP_ID</em></strong> = appId value </li> </ul> </li> </ul> </li> </ul> </li> <li> <h3> <strong>In the project directory</strong> </h3> <h3> <code>npm start</code> </h3> <p>Runs the app in the development mode.<br><br> Open <a href="http://localhost:3000/">http://localhost:3000</a> to view it in the browser.</p> <p>The page will reload if you make edits.<br><br> You will also see any lint errors in the console.</p> <h3> <code>npm test</code> </h3> <p>Launches the test runner in the interactive watch mode.<br><br> See the section about <a href="https://facebook.github.io/create-react-app/docs/running-tests">running tests</a> for more information.</p> <h3> <code>npm run build</code> </h3> <p>Builds the app for production to the <code>build</code> folder.<br><br> It correctly bundles React in production mode and optimizes the build for the best performance.</p> <p>The build is minified and the filenames include the hashes.<br><br> Your app is ready to be deployed!</p> <p>See the section about <a href="https://facebook.github.io/create-react-app/docs/deployment">deployment</a> for more information.</p> </li> </ul> webdev github react firebase colabToolKit Dip Vachhani Tue, 30 Mar 2021 07:51:27 +0000 https://dev.to/dip15739/colabtoolkit-eg2 https://dev.to/dip15739/colabtoolkit-eg2 <p><a href="https://colab.research.google.com/github/DIp15739/colabToolKit/blob/main/colabToolKit.ipynb"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cw8uDh-t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colab.research.google.com/assets/colab-badge.svg" alt="open in colab"></a></p> <h3> Features </h3> <ol> <li> <strong>Mount &amp; Umount Drive</strong> </li> <li> <strong>Transfer Tools</strong> <ul> <li> Mega </li> <li> Rclone</li> </ul> </li> <li> <strong>Torrent Clients</strong> <ul> <li> SimpleTorrent</li> <li> Peerflix-Server</li> <li> Deluge</li> <li> qBittorrent</li> <li> µTorrent</li> <li> rTorrent</li> <li> Transmission-Web-Control</li> <li> Vuze</li> </ul> </li> <li> <strong>Other useful Tools</strong> <ul> <li> Jellyfin</li> <li> V2Ray</li> <li> pyLoad</li> <li> spotify-downloader</li> <li> aria2Rpc</li> <li> aria2Cli</li> <li> zip-tar-rar</li> <li> jDownloader</li> <li> Youtube-DL</li> </ul> </li> <li> <strong>Sys Tools</strong> <ul> <li> Wetty</li> <li> Glances</li> <li> NoMachine</li> <li> _[' &gt; ssh ']</li> <li> noVNC</li> <li> IceWM</li> <li> netData</li> </ul> </li> <li> <strong>File Manager</strong> <ul> <li> ghfs</li> <li> filebrowser</li> <li> cloudCommander</li> </ul> </li> <li> <strong>Programming</strong> <ul> <li> code-server (VScode) </li> <li> Flutter </li> <li> Kivy</li> </ul> </li> <li> <strong>Pentester</strong> <ul> <li> SocialFish</li> <li> L3Mon</li> <li> SayCheese</li> <li> Hashct</li> </ul> </li> </ol> <p><a href="https://github.com/DIp15739/colabToolKit"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--auw2ohCp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github-link-card.s3.ap-northeast-1.amazonaws.com/DIp15739/colabToolKit.png"></a></p> <blockquote> <p>For New Updates Star or Fork repo</p> </blockquote> webdev tutorial beginners colab