This project demonstrates using both ZingGrid and ZingChart in a NextJS application. The application is meant to be used by a small group of people that watch TV together to rate a collection of shows. The first user to log in becomes the administrator, giving them priviledge to add other users and shows for them to rate. Each user has a highest content rating (from TV-Y to TV-MA) and will only be shown shows appropriate for their age on their rating page.
For this app you'll need
npm installed. We recommend running the server locally, it will require
python as well as
There's a simple
tuql server that supports this app, you should install it and run it locally. The server is here. Download it,
cd into its directory and
npm run reset
npm run start
(See the README for the server for more details.) This will start the server on port 4000. You can reset the database to its initial state with
npm run reset.
Download this repository and
cd into the directory. Edit the file
lib/database.ts and set the constant
database to thr URL for your instance of
http://localhost:4000/graphql, but you may have it running on a different host and port). Then run:
npm run dev
The application should now be running on port 3000, view it in your browser at
The first page you'll see is the home page describing the app. Start by going to the
Login page via the link in the toolbar at the top of the page. You should see the login form, with a notice indicating that you are the first user. The authentication in this app is very simple: the first time you log in you can enter any password, and that will be stored as your account password. Since you are the first user, you will become the administrator. You will be able to create additional users, and you can reset their passwords if needed.
Users are only authorized to see the shows allowed by their highest content rating. The default is
TV-Y, you'll need to change this before you can see any shows. Go to the
Users page, there should be one entry for your user. Use the pencil icon to edit that row of the table and set your highest content rating to
TV-MA. You should also create some more test users while you're on this page. Create some users with a lower content rating so you can see that they're shown fewer shows to rate when you log in as them.
You can now go to the
Shows page and see the list of shows available to be rated. Go to the
Your Ratings page to enter some ratings by dragging the bars on the bar chart. Note that the rating page has a
randomize button you can use to assign a random rating to each of the shows displayed, this is to avoid the tedium of having to enter ratings for each user during testing.
There are two versions of the summary page, both should show the same results. The
Summary SSR page is rendered on the server, while the
Summary CSR is rendered on the client. Take a look at the source code to see the differences between server-side and client-side rendering.
The summary pages show a curved bar chart indicating the percentage of participation (what portion of the users have entered ratings). Log out and log in as the other test users you created to enter ratings for each of them. The summary page will show the average ratings and a radial plot displaying all the ratings for all users, with plots of the individual users' ratings further down on the page.