Skip to content

Latest commit

 

History

History
85 lines (62 loc) · 2.81 KB

README.md

File metadata and controls

85 lines (62 loc) · 2.81 KB

Pokédash

This is a Pokémon Dashboard built with NextJS

Pokedash

This project was built with

Next JS ESLint Prettier PNPM Sass Tailwind CSS Radix UI Storybook Vitest GraphQL Github Actions

See it running

You can see it running at pokedash-snx.vercel.app

The storybook component documentation is also available at vitorxfs.github.io/pokedash

Running Locally

  1. Fork this repository
  2. Clone or download the forked project
  3. Run
pnpm install
pnpm run dev

For building, run

pnpm run build
pnpm run postbuild

The script postbuild will create the sitemap as well as the robots.txt file for SEO.

The boilerplate used for this project can be found at vitorxfs/next-blank-app

Project Design

The design of this project can be found on this figma file.

Figma

Project Structure

src/
|--app/
|  '-api/
|--components/
|--config/
|--data-types/
|--helpers/
|--hooks/
|--layout/
|--lib/
|  |-clients/
|  |-components/
|  '-next/
|--styles/
|--env.ts
'--factories.ts
  • factories.ts centralizes the classes instantiation
  • env.ts exports environment variables

Data flow

Diagram

Island Architecture

Based on this Jason Miller post about the Island Architecture, the listing page was divided in five islands: four interactive client-side islands, that updates the URL query parameters; and one static server island, which is the listing itself.

Islands