Nextjs Thirdweb Webkit

A NextJS-Thirdweb webkit with inspiration drawn from Laravel

Introduction

• The directory structure and certain features of this webkit was inspired by Laravel
• The main goal of this project was to make it easier for developers when working with a Laravel Project and a NextJS at the same time

Scripts

• there are useful scripts in package.json that can aid in development
• run yarn scripts to show available scripts

Setting up

• yarn setup
  • run migrations and seed prerequisite and test data

Templates

• Certain libraries like models can be generated through the make command.
• yarn make:help
  • shows available template commands and description
• For example:
  • yarn make:model user
    • create a user model, seeder, factory and inserts a new table/model in schema.prisma
  • yarn make:crud user
    • Generates all initially needed libraries for creating a RESTFUL API
    • initiates make:controller, make:model, and make:api

Database and Prisma

• yarn prisma:generate
  • update prisma client with the latest changes in the schema
  • please run this after updating the schema to avoid type errors when using models
• yarn migrate:dev
  • run database migrations and seed (updating database with changes in schema)
• yarn migrate:reset
  • reset database schema and seed
• yarn db:seed
  • run/rerun seeders

Overview

Directory Structure

• src
  • all the application related code.
• config
  • application configs that includes the constants
• database
  • factories
    • code for generating test models ideally with fakerjs
  • seeders
    • code for seeding database with test or production data
      • prod
      • dev
  • migrations
    • sql files generated by prisma, can be edited manually for custom changes
• library
  • hooks
    • set of hooks to be used in frontend
  • enums
    • set of constants like GUARDS for list of guard constants
  • helpers
    • library that is specific to the project like guard or http helper
  • utils
    • generic reusable piece of code that can be used anywhere like randomColor()
  • http
    • controllers
      • for interacting with services and returning data requested by the app
    • requests
      • form data or query validations, all data validators per controller exists here
  • models
    • for database queries
  • errors
    • custom error classes
• resources
  • css
    • contains all the stylesheets
  • components
    • contains the layout files and reusable components
  • stores
    • responsible for fetching data from the api and formatting them and storing to local storage
• pages: for pages router
  • api: api endpoints
• tests
  • directory for all automated tests
  • jest
  • cypress

Coding Guide

** Please use a generator (if available) when creating the libraries

Naming Convention

General

• Components should be in PascalCase
• Route and directory names should be in kebab-case
• Other files should be in camelCase

Specifics

• Models: [name].model.ts (e.g. user.model.ts)
• Controllers: [name].controller.ts (e.g. auth.controller.ts)
• Requests: [name].request.ts (e.g. auth.request.ts)
• Tests: [name].test.ts or [name.category].test.ts if applicable (e.g. auth.test.ts)
• Seeders: [name].seeder.ts (e.g. user.seeder.ts)
• Factory: [name].factory.ts (e.g. user.factory.ts)

Validation

• Please use request objects for validations (create validator objects in src/library/http/requests). It makes use of the zod package for the rules

back to top