A Test Project with NextJS, Tailwindcss, and GraphQL

Last update: May 21, 2022

Pagination NextJS Training

Your Task is to create a a Nice Paginated List of Pokemon.

Criteria

User Story

As a User

I want to be able to browse through pages of pokemon in a quick and organized fashion.

Acceptance Criteria

  • Click on Next and Previous should navigate to the correct page
  • A Block of available Page Numbers should be displayed
  • The Current Page Number should be highlighted
  • The Current Page Number should be centered in the List when appropriate
    • Page Numbers 1 and 2 should not be centered
    • Page Numbers Max and Max - 1 should not be centered
  • Invalid Page Numbers should not be displayed
  • A Clicking on a Page Number should goto that Page in the List
  • Changing the Items Per Page should Reset the list to Page 1
  • System should only accept Valid Page Numbers from 1 to the max Page Number
  • Invalid Page Numbers should produce an Error

Expected Environment

We expect you to be working in a unix based environment (mac, linux, ubuntu, mint, etc...) with node installed with a node package manager.

  • NVM - A Node Version Manager
  • Yarn - a Node Package Manager (Note we link to version 1.x)
  • VSCode - A Code Editor suited to web development

NOTE

Many other environments and tools will work with this project, but are not supported by 44 North.

Get Started

  1. Download this repository
  2. Install the Dependencies
  3. Run the Application in your command line. yarn dev

Scripts

  • dev: Run NextJS in Development Mode
  • build: Build NextJS for Production Mode
  • start: Run NextJS in Production Mode
  • lint: Run the NextJS Linter
  • knex:make <name>: Make a KnexJS migration file
  • knex:latest: Run all of the migration files
  • knex:up: Run the next migration file
  • knex:down: Revert the last migration file run

Resources

  • NextJS - The Application Framework
  • KnexJS - A Database Adapter API
  • GraphQL - An Open Graph Based Web API
  • Apollo - A Client Side GraphQL Library
  • tailwindcss - A CSS Utility Framework
  • headlessui - A utility framework for common JavaScript Components
  • heroicons - A Icon Library
  • axios - A Client and Server Side XHR Request API Library
  • @44north/classnames - A Library for managing Class Names in React
  • PokeAPI - An online open source data API of Pokemon

GraphQL Query to Run

you can visit /api/graphql on your running NextJS instance to see everything available to you through the GraphQL implementation we setup.

You can run this query to get a list of Pokemon in the System.

{
    listPokemon(itemsPerPage: 3, pageNo: 1) {
        id
        name
        height
        weight
        species {
            habitat {
                name
            }
            color {
                name
            }
        }
        sprites {
            official_artwork_front_default
        }
        types {
            name
        }
        abilities {
            name
            is_hidden
        }
    }
}

Note

To make this api more responsive, we have setup an SQLite3 Database to cache responses from the RestfulAPI. The means that the first time you call an endpoint with a set of parameters, the response may be slow, but subsequent requests to the same endpoint with the same parameters will be quick.

GitHub

https://github.com/fortyfournorth/pokemon-pagination
You might also like...

YoutubeDownloader - A test project for learning React, Vue and TS

Requirements: Node.js 10.x Vue.JS 2.x Python 2.6+ FFMPEG Youtube-DL Installation Run command below in root directory npm install --production And inst

Jan 1, 2022

GoogleAppClone - Bulding Google App with NextJS, TailWindCss, ReactJS and Firebase

GoogleAppClone - Bulding Google App with NextJS, TailWindCss, ReactJS and Firebase

GoogleAppClone - Bulding Google App with NextJS, TailWindCss, ReactJS and Firebase

Feb 11, 2022

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

May 13, 2022

Windows 11 clone made with 💛 using NextJS and TailwindCSS by Vishwa Gaurav.

Windows 11 clone made with 💛 using NextJS and TailwindCSS by Vishwa Gaurav.

Windows 11 Windows 11 made with 💛 using NextJS and TailwindCSS by Vishwa Gaurav. ScreenShots *In Development Mode Our Social Links PageSpeed Insights

Jun 10, 2022

WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application

 WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application

This Repository demonstrates how to combine 7 APIs (4 Apollo Federation SubGraphs, 1 REST, 1 standalone GraphQL, 1 Mock) into one unified GraphQL API which is then securely exposed as a JSON API to a NextJS Frontend.

Jun 14, 2022

This project implements an online shopping application to show techniques used to test React applications.

This project implements an online shopping application to show techniques used to test React applications.

This project implements an online shopping application to show techniques used to test React applications.

Jun 26, 2022

This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json

This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json

Healthy Foods 🍉 📚 Informações sobre o projeto Esse projeto foi desenvolvido como teste técnico para uma vaga Frontend JR Landing Page com dados dinâ

Jan 20, 2022

This is a functional front-end project not a front-end design project. How to implement logic in react js project It's has been shown in this project.

Expense Tracker App react React is a JavaScript library for creating user interfaces. The react package contains only the functionality necessary to d

Mar 20, 2022

Bookmark manager on steroid built with React / NextJs / Apollo Tools / Prisma 2 — styled with TailwindCSS 🌱🎺

Bookmark manager on steroid built with React / NextJs / Apollo Tools / Prisma 2 — styled with TailwindCSS 🌱🎺

Tottem is an open source experimentation, it aims combining personal productivity tool approach with (slow) social media capabilities to make users em

Jun 13, 2022

A Facebook clone web app built with Nextjs&Reactjs - Tailwindcss - firebase - heroIcons

A Facebook clone web app built with Nextjs&Reactjs - Tailwindcss - firebase - heroIcons

A Facebook clone web app built with Nextjs&Reactjs - Tailwindcss - firebase - heroIcons

Apr 22, 2022

A NextJS + TailwindCSS 3 Dashboard Admin For Laravel Breeze

A NextJS + TailwindCSS 3 Dashboard Admin For Laravel Breeze

Windmill with Laravel Breeze as Backend API Introduction This repository is an implementing of the Laravel Breeze application / authentication starter

Jun 19, 2022

Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Jun 22, 2022

NextJS Site of @jayantkageri, Designed with TailwindCSS

Jayant Hegde Kageri This repository contains the Source Code of the Website jayantkageri.in Environment Variables To run this website, you will need t

Jun 19, 2022

Personal website built using react, nextjs, tailwind, and graphql deployed to vercel.

Website My personal website built using nextjs. Getting Started Clone the repository git clone [email protected]:searchableguy/website.git Move inside th

Jan 17, 2022

Woo-next-br - WooCommerce React CMS Theme built with NextJs Babel, Node, using GraphQL and Apollo Client

Woo-next-br - WooCommerce React CMS Theme built with NextJs Babel, Node, using GraphQL and Apollo Client

WooCommerce Nextjs React Theme 🚀 This is a React WooCommerce theme, built with

Feb 23, 2022

A fancy sharex server with a dashboard made with nextjs, express and graphql

A fancy sharex server with a dashboard made with nextjs, express and graphql

A fancy sharex server with a dashboard made with nextjs, express and graphql

Jun 8, 2022

Admin panel built with NextJS(Typescript), Material UI, Apollo Client & GraphQL.

Admin panel built with NextJS(Typescript), Material UI, Apollo Client & GraphQL.

Admin panel built with NextJS(Typescript), Material UI, Apollo Client & GraphQL. In the backend, Prisma 2 with Nexus and Mysql is used.

May 25, 2022

next-gql-dogs code for the NextJS + GraphQL + Typescript Blueprint video

next-gql-dogs code for the NextJS + GraphQL + Typescript Blueprint video

Jun 11, 2022

Adding Headless CMS to NextJS like a Pro, this repository contains code examples and guide on how to integrate Storyblok, a headless CMS to NextJS.

Adding Headless CMS to NextJS like a Pro, this repository contains code examples and guide on how to integrate Storyblok, a headless CMS to NextJS.

Adding Storyblok to NextJS Like A Pro The official website describes Storyblok in the following terms: Storyblok is the only Headless Content Manageme

Apr 16, 2022
Webjump-test - A Next.js project to be used as a test for the WEBJUMP company
Webjump-test - A Next.js project to be used as a test for the WEBJUMP company

?? WEBJUMP ?? Teste para contratação webjump Um projeto Next.js para ser usado c

Feb 25, 2022
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Dec 20, 2021
test for a job, application made with nextJs ReactJs, TypeScript, Styled Component to consume an api
test for a job, application made with nextJs ReactJs, TypeScript, Styled Component to consume an api

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server:: npm run dev # or yarn dev Open http:/

Sep 6, 2021
Tailwindcss-react-native: Use Tailwindcss in your cross platform React Native applications

tailwindcss-react-native Use Tailwindcss in your cross platform React Native applications. This library is currently stabilising for a v1 release. Fol

Jun 21, 2022
Blog app using different modern technology like Next.js, ReactJS, TailwindCSS, GraphQL, GraphCMS, JavaScript, TypeScript, ...
Blog app using different modern technology like Next.js, ReactJS, TailwindCSS, GraphQL, GraphCMS, JavaScript, TypeScript, ...

Tony Blog Blog app using different modern technology like Next.js, ReactJS, TailwindCSS, GraphQL, GraphCMS, JavaScript, TypeScript, ... Link Blog: htt

May 14, 2022
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server

Apollo Client Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build U

Jun 18, 2022
Next plugin for .graphql and .gql files using graphql-tag

Next.js + Graphql Use Graphql files with Next.js Installation npm install next-plugin-graphql or yarn add next-plugin-graphql Usage Create a next.conf

May 19, 2022
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server
:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server

Apollo Client Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build U

Jun 27, 2022
ArtemisQL is a GraphQL migration and database visualizer tool that empowers developers to build GraphQL schemas with ease.
ArtemisQL is a GraphQL migration and database visualizer tool that empowers developers to build GraphQL schemas with ease.

ArtemisQL A GraphQL migration tool and relational database visualizer ?? Overview ArtemisQL is an open-source web application providing a SQL (Postgre

May 12, 2022
Remix-graphql - Utilities for using GraphQL with a Remix app

remix-graphql Remix and GraphQL can live together in harmony ❤️ This package con

Jun 17, 2022