Our great sponsors
-
startup-acquisitions-starter
A starter repo for using Airtable with Sync Inc, Prisma, and Next.js to build an app.
-
typescript-book
:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 🌹
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
To help you get right into the project, I have created a starter repo. Clone the repo and let's get started!
index.ts is just for ease of use. It imports everything inside api/graphql folder and re-exports it like a barrel. It acts as a simple aggregator of the other files to make imports easier down the road.
In this tutorial, you will be using Next.js, Prisma, urql and Tailwind CSS (for styling).
You used Next.js as your React-powered front-end framework and Prisma as your ORM of choice. Prisma makes it simple to query the database by using static typing which allows you to code with confidence. The built-in autocompletion allows you to write applications at lightning speed.
You used Tailwind CSS to quickly make the applications look great. Thi focus on writing the logic rather than writing CSS. You also made use of Headless UI to easily create custom Switch and Select component.
Related posts
- Build your free link shortener with Next.js and Vercel Postgres
- Integrating OpenAI's GPT-3 into a Next.js and Go Fiber App
- I made a 1D Cellular Automata emulator that's very configurable
- Fixing the Sticky Footer Issue with Next.js and TailwindCSS
- Rebuilding my Portfolio with Next, MDX, and Contentlayer