Skip to content

Latest commit

 

History

History
111 lines (94 loc) · 3.72 KB

README.md

File metadata and controls

111 lines (94 loc) · 3.72 KB
Raw

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