basic fullstack project structure for starting a new project

This project uses Next.js as simple and performant backend with Prisma as ORM. React is being used as Frontend framework with Tailwind css for creating fast and clean user interfaces.
For automated tests Cypress is used as end-to-end test framework.

Create the structure on your own

• Install Node JS
  • Install Next.js
  • run dev server npm run dev
  • Open http://localhost:3000
• Create a database you prefer.
• Install Prisma
  • Create Prisma directory in your project npx prisma init
  • install Prisma clientnpm install @prisma/client
    • Use prisma generate to generate entities from your database
• Install Tailwind css
  • Create Tailwind directory in your project npx tailwindcss init -p
  • Add tailwind directive @tailwind base to global.css
• Install Cypress
  • Start npx cypress open for GUI testing
  • Run npx cypress run in your continuos integration script

Getting started

Just use npm install and you are ready to go :)

Open http://localhost:3000 with your browser to see your current page.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file. Here you can app your project structure.

API documentation is taken from Next.js:

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts. The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Author

Artur Marks