Building a website directory with Next.js, Tailwind CSS, and Prisma

• landing-page-hunt

  1 11 10.0 JavaScript

  A site directory, an example application showcasing the ScreenshotOne screenshot API

  

The source code of the project is available on github.com/screenshotone/landing-page-hunt.

• puppeteer

  359 86,773 9.9 TypeScript

  Node.js API for Chrome

  

I didn't set up Puppeteer to take screenshots of the sites but decided to use a screenshot as a service API. It gives a bunch of free screenshots to render websites, so that's enough to play with our project. Because taking screenshots of the site is not a core topic of the post, and using Puppeteer would be a pain in the ass.

• SurveyJS

  surveyjs.io sponsored

  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.

  

• Prisma

  442 37,151 9.9 TypeScript

  Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB

  

I am seeking a good stack I can switch to for my new projects. So, I decided to try and evaluate Next.js, Tailwind CSS, and Prisma stack with a small project.

• TypeORM

  156 33,287 9.0 TypeScript

  ORM for TypeScript and JavaScript. Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

  

There are many popular ORM libraries for Node.js: Prisma, Sequelize, TypeORM, and others.

• Tailwind CSS

  1,278 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

I am seeking a good stack I can switch to for my new projects. So, I decided to try and evaluate Next.js, Tailwind CSS, and Prisma stack with a small project.

• Sequelize

  89 29,026 9.8 TypeScript

  Feature-rich ORM for modern Node.js and TypeScript, it supports PostgreSQL (with JSON and JSONB support), MySQL, MariaDB, SQLite, MS SQL Server, Snowflake, Oracle DB (v6), DB2 and DB2 for IBM i.

  

There are many popular ORM libraries for Node.js: Prisma, Sequelize, TypeORM, and others.

• React

  1,693 221,803 9.9 JavaScript

  The library for web and native user interfaces.

  

Before I start, I must admit that I have zero experience or don't have experience at all with React, Tailwind CSS, and Prisma. I also don't feel that I am profound in JavaScript. And this is excellent news because you will see this stack through the lens of a newcomer, not a passionate fan of these technologies.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• Next.js

  2,041 120,572 10.0 JavaScript

  The React Framework

  

I am seeking a good stack I can switch to for my new projects. So, I decided to try and evaluate Next.js, Tailwind CSS, and Prisma stack with a small project.

• Bootstrap

  530 167,414 9.6 JavaScript

  The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

  

I mostly used Twitter Bootstrap as a CSS framework, but Tailwind CSS has become quite popular over the last few years. And it proposes a different approach from what you do with the Bootstrap framework.

• flowbite

  189 6,917 9.8 JavaScript

  Open-source UI component library and front-end development framework based on Tailwind CSS

  

However, in recent times, I have seen a lot of convergence in both approaches. Twitter Bootstrap adds more and more utility classes, and you can buy Tailwind UI or take a look at daisyUI and Flowbite, which provide many components that you might want to use along with Tailwind CSS.

• daisyui

  248 30,632 9.8 Svelte

  🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library

However, in recent times, I have seen a lot of convergence in both approaches. Twitter Bootstrap adds more and more utility classes, and you can buy Tailwind UI or take a look at daisyUI and Flowbite, which provide many components that you might want to use along with Tailwind CSS.

Suggest a related project