Building Advanced Admin Reporting in React
In this course, we'll be using React Query Builder to create admin reports with complex filtering, bulk editing, data grids, charts, and maps.
- 5.0 / 5 (2 ratings)
- Published
- Updated
1 hr 24 mins
10 Videos
Jake Boone
Product Owner and Web Developer
01Remote
You can take the course from anywhere in the world, as long as you have a computer and an internet connection.
02Self-Paced
Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.
03Community
Join a vibrant community of other students who are also learning with Building Advanced Admin Reporting in React. Ask questions, get feedback and collaborate with others to take your skills to the next level.
04Structured
Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.
How to configure a query builder
How to create an API for reports
How to add data grids, charts, and maps
What problems query builders can solve
In this course we teach you how to create admin reports with React using a query builder. Admin reporting is a broad topic, and getting started can be overwhelming.
In five modules, we cover configuration of the query builder, setting up a server, displaying data in a grid, chart, and map, as well as some more advanced uses of the query builder. It's about three hours long and comes with code samples.
The course is taught by Jake Boone, who uses React Query Builder in real, mission-critical applications for a large engineering and construction firm.
Our students work at
Course Syllabus and Content
Getting started
3 Lessons 5 Minutes
Introduction to React Query Builder and prerequisites for the course
Setting up the application and adding a query builder
Enhancing the query builder with fields from the sample sales data set
Configuration
4 Lessons
Adding another bit of customization to the query builder -- a Spanish translation
Changing or removing certain components of the query builder
Using the various input types provided with React Query Builder, including numeric inputs and drop-down lists
How to provide your own value editor in order to take full control of the rule manager
Integrating with an API
6 Lessons 59 Minutes
Preparing for the server setup by processing the output of the query builder into database-ready SQL
Beginning the process of setting up a server to host the API
Connecting to a database and finalizing the API
Retrieving data from the server
Configuring a grid to display the data
Configuring a chart to display summary information about the data
Geographic data
4 Lessons 7 Minutes
Setting up a new API endpoint to serve geographic data (UN/LOCODE ports)
Configuring the query builder with geographic data fields
Configuring the grid to show the geographic data
Using the Google Maps API to display the geographic data on a map
Bulk edits
3 Lessons 12 Minutes
Using React Query Builder for a completely different purpose
Changing the update mechanism to cover more use cases
Polishing off the bulk editor with a custom value editor
Subscribe for a Free Lesson
By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.
What Students are Saying
Meet the Course Instructor
Purchase the course today
One-Time Purchase
Building Advanced Admin Reporting in React
- Learn about React Query Builder
- Build an API for reporting
- Integrate charts, data grids, and maps
- Discord Community Access
- Full Transcripts
- Project Completion Guarantee
- Lifetime Access
newline Pro Subscription
$18/MO
Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More
Billed annually or $40/mo billed monthly. Free to cancel anytime.
- Discord Community Access
- Full Transcripts
- Project Completion Guarantee
- Lifetime Access
Plus:
- Unlimited access to 60+ newline Books, Guides and Courses
- Interactive, Live Project Demos for Every newline Book, Guide and Course
- Complete Project Source Code for Every newline Book, Guide and Course
- Best Value 🏆
Frequently Asked Questions
Who is this course for?
This course is for anyone who wants to know how to create flexible, robust reporting solutions with React.
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.
