How to Build a Fullstack Next.js Application (with Storybook & TailwindCSS)

• nextjs-fullstack-app-template

  3 689 0.0 TypeScript

  A fullstack template for a NextJs App

If you are unsure what I am describing, you can refer back to the original tutorial where we created the BaseTemplate component, or simply take it from the project repo.

• PostCSS

  86 28,192 8.8 TypeScript

  Transforming styles with JS plugins

  

postcss and autoprefixer are tools for transforming CSS that Tailwind uses to do its job.

• 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.

  

• storybook

  321 82,727 10.0 TypeScript

  Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  

module.exports = { stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'], /** Expose public folder to storybook as static */ staticDirs: ['../public'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-css-modules-preset', { /** * Fix Storybook issue with PostCSS@8 * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085 */ name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: require('postcss'), }, }, }, ], framework: '@storybook/react', core: { builder: '@storybook/builder-webpack5', }, };

• Prisma

  442 37,151 9.9 TypeScript

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

  

Adding a real database is beyond the scope of this tutorial (though it will be covered in a future one soon, likely using Prisma and PostgreSQL) so we're just going to create our own little pretend one that is close enough so that we can at least teach the fundamentals.

• postman-app-support

  279 5,741 2.3

  Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

  

Now let's test our endpoint before we go any further. If you're not familiar with API testing I would suggest you look into some of the great tools out there. Postman used to be the best, but they've started really locking things down behind sign-up walls. It does still have a workable free version though. Insomnia is a great alternative.

• PostgreSQL

  404 14,673 10.0 C

  Mirror of the official PostgreSQL GIT repository. Note that this is just a *mirror* - we don't work with pull requests on github. To contribute, please see https://wiki.postgresql.org/wiki/Submitting_a_Patch

  

Adding a real database is beyond the scope of this tutorial (though it will be covered in a future one soon, likely using Prisma and PostgreSQL) so we're just going to create our own little pretend one that is close enough so that we can at least teach the fundamentals.

• Tailwind CSS

  1,278 78,166 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

We'll be using the current "hot commodity" Tailwind CSS as the tool we use to organize our design system, and get styles implemented quickly while maintaining a consistent look and feel to the product.

• 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,313 10.0 JavaScript

  The React Framework

  

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction import type { NextApiRequest, NextApiResponse } from 'next'; import database from '../../../lib/search/database.json'; import { ISearchData } from '../../../lib/search/types'; interface IApiSearchRequest extends NextApiRequest { body: { searchTerm?: string }; } export type IApiSearchResponseData = ISearchData[]; export default function handler( req: IApiSearchRequest, res: NextApiResponse ) { const { body: { searchTerm }, } = req; if (req.method === 'POST' && searchTerm && searchTerm.length > 0) { // Creates a regex search pattern for a case insensitive match from the user's search term const searchPattern = new RegExp(searchTerm, 'i'); const filteredResults = database.filter((result) => { return ( // Check the user's search term again either the title or the text of the database entry searchPattern.test(result.title) || searchPattern.test(result.text) ); }); res.status(200).json(filteredResults); } else { res.status(400).json([]); } }

• insomnia

  225 33,067 9.7 JavaScript

  The open-source, cross-platform API client for GraphQL, REST, WebSockets, SSE and gRPC. With Cloud, Local and Git storage.

  

Now let's test our endpoint before we go any further. If you're not familiar with API testing I would suggest you look into some of the great tools out there. Postman used to be the best, but they've started really locking things down behind sign-up walls. It does still have a workable free version though. Insomnia is a great alternative.

Suggest a related project