Creating a Gantt chart with React using Next.js

1. gantt-chart-nextjs-starter

   1 1 1 10.0 JavaScript

   

   You can find the code for the completed Next.js Gantt Chart in our GitHub repository.

2. SurveyJS

   surveyjs.io featured

   SurveyJS: Build JSON-Driven Surveys and Forms with Full Data Control. Add the SurveyJS UI components to your JS app (React/Angular/Vue3). Securely collect and analyze data without sending it to 3rd-party servers. Fully customizable, works with any backend, and ideal for data-heavy apps. Learn more.

   

3. styled-jsx

   2 24 7,799 4.2 JavaScript

   Full CSS support for JSX without compromises

   

   The CSS we'll use for the Gantt chart is included in the starter code. We've used Styled JSX, which comes with Next.js, to write scoped-styled components. There are some global styles in styles/globals.js. These global styles are added to our app in the Layout component in the components folder. The entire app is wrapped in this Layout component in the _app.js file, which is in the pages folder.

4. prettier

   3 495 51,307 9.9 JavaScript

   Prettier is an opinionated code formatter.

   

   The .vscode folder includes some VS Code settings and extension recommendations, as well as settings for ESLint and Prettier. ESLint and Prettier have been added and configured to format your code on paste and on save. If you don't use VS Code as an IDE, you'll need to configure these for your IDE. Once you've done that, you can delete this file.

5. ESLint

   4 443 26,718 9.8 JavaScript

   Find and fix problems in your JavaScript code.

   

   The .vscode folder includes some VS Code settings and extension recommendations, as well as settings for ESLint and Prettier. ESLint and Prettier have been added and configured to format your code on paste and on save. If you don't use VS Code as an IDE, you'll need to configure these for your IDE. Once you've done that, you can delete this file.

Suggest a related project