⚡ Next Prisma Data

• Next.js React used with a Prisma database to display a simple data table
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

📚 General info

• Full-stack app with Next React frontend and Prisma as the backend
• There is not a lot of styling - most aplied to the data entry form

📷 Screenshots

📶 Technologies

• Node.js v14 javascript runtime using the Chrome V8 engine.
• React v17 Javascript library.
• Next v10 minimalist framework for rendering react apps on the server.
• Next with Apollo v5 to save coding time
• @prisma/client auto-generated query builder that enables type-safe database access
• Prisma Studio

💾 Setup

• Install dependencies using npm i
• npm run dev runs the Next app in the development mode. Open http://localhost:3000 to view it in the browser.
• npx prisma studio opens up a useful browser CLI for the Prisma database on http://localhost:5555/

🔧 Testing

• N/A

💻 Code Examples

• pages/index.ts async function to fetch all data from the Prisma database

export async function getServerSideProps() {
	const movies = await prisma.movie.findMany();

	return {
		props: {
			data: movies,
		},
	};
}

🆒 Features - Frontend

• The Prisma CLI browser interface is quite cool

📋 Status, Testing & To-Do List

• Status: Working
• To-Do: Change use of item.id as key in React list of films as it is not best practise. Could be developed with styled cards etc. on frontend to display data

👏 Inspiration/General Tools

• Watch and Learn: Let's Checkout... Prisma & Next.js

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com