Learn how to build a Github user dashboard by using ReactJS then test & deploy the app with Cypress, WebdriverIO, and ScreenerIO.

Hi friends, welcome to Ultimate QA — where testers come to develop and developers come to test.

In this new tutorial, you will learn how to:

✅​ Build a Github user’s dashboard using ReactJS. This dashboard will have the capability to enter a username of a Github user and search for that user pulling back all of their relevant information such as the followers, location, username, repositories, and so much more using real Github API.

✅​ Test the application using Cypress to do functional end-to-end testing and WebdriverIO and ScreenerIO for visual end-to-end testing.

✅​ Take the code and deploy it to Netlify so that you can have a production version of the application to display in your project’s portfolio. ​

What’s in the tutorial:

📌 Overview of the App

📌 Starter Project

📌 Separating Pages with React-Router-Dom

📌 Auto Rename Tag Extension

📌 Error Page with Styled Components

📌 Implement Login Page

📌 Dashboard Skeleton

📌 Add Github Context

📌 When Do We Test?

📌 React useState

📌 Adding Mock Data

📌 Finish Info.js

📌 Card.js and User.js

📌 Thinking About Testing

📌 How Will We Test Routes?

📌 Setting Up a Visual Test with ScreenerIO

📌 Analyzing Visual Results

📌 Does Back Home Button Work?

📌 Fixing Visual Issues in ScreenerIO

📌 Installing Cypress

📌 Opening CypressIO

📌 Cypress Test for Button URL

📌 Followers Component

📌 Search Component Dummy

📌 Get Rate Limit of API

📌 Finishing Rate Limit Request

📌 Add Remaining Requests to Display

📌 Axios API Update

📌 Search Github User Functionality

📌 Set Followers

📌 Finish Navbar

📌 Resolving Bugs with Tests

📌 Final Touches on the App

📌 Summary

📌 Deploying Site

Watch FULL Workshop Now! 👇👇👇

What students are saying?

83% speed improvement in test suite! We started with 150 tests running in 1 hr. After learning the correct parallelization approach from Nikolay, with thread-safety, we can now run 3 jobs, using 3 threads, in 10 min for the whole suite!

Andrei R, Software Tester

It took me six to eight months to work through the course in my limited spare time. I was able to write about 70 automated tests using the ideas and teachings from the course before losing my job due to COVID. With the training and actual (limited) experience, I was able to land on my feet with a new position as a front end developer.

Life changing?

Yes, I put in the work, and this course provided me the track to run on. It helped me be effective and intentional with my code and test cases. One the most useful things about the course is the references to others work and ideas. It allowed me to continue learning even after I finished the course.

Michael S, Front-End Developer