Skip to content

etorres-revature/Github_Finder

Repository files navigation

Github License

Github Finder

Project Description

This app is designed to search the Github API for user information and display the information dynamically using React.js.

The axios npm package is used to make calls to the Github API.

Client-side routing is provided by the react router.

Server-side routing is provided with Express.js.

The development environment was Node.js.

The app is deployed using the gh-pages npm package as well on heroku.

Table of Contents

Installation Instructions

If you would like a copy of this application for your own use the Github Finder repository can be cloned/forked.

Usage

Github Finder is deployed to gh-pages and heroku. Github Finder gh-pages deployment. Github Finder heroku deployment.

The Github Finder Home Page has a text input for searching Github users and a button to submit those searches.

GITHUB FINDER home page

Users can type in the text input and push the button to submit those searches to the Github API.

GITHUB FINDER search

Once the Github API call is made, the information returned is dynamically displayed to represent each Github user account returned by the search.

GITHUB FINDER search results

When the "more" button is pushed on a card, the associated Github user account information is displayed.

The user's picture, name, location, biography, link to github profile, username, and linked in URL are displayed prominently. Below that are badges for the user's followers, following, public repos, and public gists. Finally, there are links to some of the user's most recent repositories:

GITHUB FINDER profile page

From the Github User page you can click links to return to the Search Page or view the Github user's profile.

React creates a Single Page Application(SPA). With conditional rendering and the react router the SPA appears to have multiple pages.

GITHUB FINDER about page

Guidelines for Contributing

If you have ideas for improvements or suggestions for further features, please e-mail the address below.

Tests

Test early; test often.

Technologies Used

💻 💻 💻 💻 💻 💻

📝 HTML5 📝

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. The goals are to improve the language with support for the latest multi-media and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices; and to remain backward compatible to older software. Many new symantec features are included.

HTML5 content borrowed from this page.

🎨 CSS 🎨

Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of a document written in a markup language (such as HTML5). CSS is designed to enable the separation of presentation and content; including layout, colors, and fonts. This separation improves content accessibility to provide more flexibility and control in the specification of presentation characteristics, enabling multiple web pages to share formatting by specifying relevant CSS in a separate file, which reduces complexity and repetition in the structural content (HTML), as well as enabling the file to be cached to improve the page load speed between the pages that share the file and its formatting.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice, and on Braille-based tactile devices.

CSS content borrowed from this page.

🎇 JavaScript 🎇

JavaScript (JS) is one of the core technologies of the World Wide Web (along with HTML and CSS). It enables interactive web pages and is an essential part of web applications. JS is a multi-faceted, scripting language that provides versatility through Application Programming Interfaces (APIs) and Document Object Model (DOM) manipulation, among others.

JavaScript content borrowed from this page.

🌐 NODE.js 🌐

NODE.js is an open-source, cross-platform JavaScript runtime environment that execute JavaScript code outside a web browser. NODE.js lets developers use JavaScript to write command line tools and for server-side scripting. NODE.js represents a "Javascript everywhere" paradigm, unifying web-application development around a single programming language, rather than different programming languages for server- and client-side scripts.

NODE.js content borrowed from this page.

Download Node.js.

📡 Express.js 📡

Express.js is a minimal and flexible NODE.js web application framework that provides a robust set of features for web and mobile applications. The myriad HTTP utility methods and middleware allow for the creation of a robust API. Express.js provides a thin layer of fundamental features, without obscuring NODE.js features.

Express.js content borrowed from this page.

💫 React.js 💫

React.js is an open source JavaScript library that is used for building interfaces for single-page applications, which handles the view layer for web and mobile apps. React allows for the creation of reusable UI components. This allows developers to create large web applications that change data, without reloading the page.

React.js content borrowed from this page.

Author

This Github Finder was built by 💚 Eric D. Torres 💚

Questions

Check out my GitHub profile.

You can contact me by e-mail at etorresnotary@gmail.com for any additional questions and/ or clarifications you may need about the project.

License

This application uses the MIT License found here.

This README.md file generated with my NODE.js README Generator app.