johncastorina / nextjs-template

highspot-web NextJS Template

Get Started

• Install: yarn
• (If not) Run in terminal yarn dev
• Navigate to https://localhost:3000
• Check more about Tailwind CSS

Storybook

• yarn storybook

Cypress

• yarn cypress:open

Docker

Local development on port 80:

• yarn docker:dev

Local production build on port 80:

• yarn docker:prod

Fully Coded Components

Notus NextJS is built with over frontend 120 components, giving you the freedom of choosing and combining. All components can take variations in colors, that you can easily modify using Tailwind CSS classes

This project has TailwindCSS 2.2.x installed with Just In Time mode enabled. This means that all new classes being added during development time will automatically be built, including all classes with custom arbitrary values.

You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Free Tailwind CSS Template is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.

Every element has multiple states for colors, styles, hover, focus, that you can easily access and use.

CSS Components

120 Fully Coded CSS elements, such as Alerts, Buttons, Inputs and many more.

Please check all of them here.

NextJS Components

We also feature the following dynamic components:

• Alerts
• Popper for Menus
• Menus
• Modals
• Navbars
• Popper for popover content
• Tabs
• Popper for tooltips content

Table of Contents

• Files and folders
• Browser Support
• Resources

Files and Folder

Project Initial State

├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── .storybook
├── config
│   ├── index.ts
│   └── constants
│   │   ├── index.ts
│   │   └── SERVICES.ts
├── src
│   └──styles
│   │   ├── index.css
│   │   └── tailwind.css
│   ├── @types
│   ├── stories
│   ├── services
│   ├── components
│   │   ├── Cards
│   │   │   ├── CardBarChart.tsx
│   │   │   ├── CardLineChart.tsx
│   │   │   ├── CardPageVisits.tsx
│   │   │   ├── CardProfile.tsx
│   │   │   ├── CardSettings.tsx
│   │   │   ├── CardSocialTraffic.tsx
│   │   │   ├── CardStats.tsx
│   │   │   └── CardTable.tsx
│   │   ├── Dropdowns
│   │   │   ├── IndexDropdown.tsx
│   │   │   ├── NotificationDropdown.tsx
│   │   │   ├── PagesDropdown.tsx
│   │   │   ├── TableDropdown.tsx
│   │   │   └── UserDropdown.tsx
│   │   ├── Footers
│   │   │   ├── Footer.tsx
│   │   │   ├── FooterAdmin.tsx
│   │   │   └── FooterSmall.tsx
│   │   ├── Headers
│   │   │   └── HeaderStats.tsx
│   │   ├── Maps
│   │   │   └── MapExample.tsx
│   │   ├── Navbars
│   │   │   ├── AdminNavbar.tsx
│   │   │   ├── AuthNavbar.tsx
│   │   │   └── IndexNavbar.tsx
│   │   ├── PageChange
│   │   │   └── PageChange.tsx
│   │   └── Sidebar
│   │       └── Sidebar.tsx
│   ├── layouts
│   │   ├── Admin.tsx
│   │   └── Auth.tsx
│   ├── pages
│   │   ├── 404.tsx
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── _error.tsx
│   │   ├── [user]
│   │   │   └── profile.tsx
│   │   ├── admin
│   │   │   ├── dashboard.tsx
│   │   │   ├── maps.tsx
│   │   │   ├── settings.tsx
│   │   │   └── tables.tsx
│   │   ├── auth
│   │   │   ├── login.tsx
│   │   │   └── register.tsx
│   │   ├── index.tsx
│   │   └── landing.tsx
├── public
│   ├── img
│   │   ├── brand
│   │   │   └── favicon.ico
│   │   ├── github.svg
│   │   └── google.svg
├── .gitignore
├── .env.local
├── .env.production
├── package.json
├── .eslintrc.js
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── Dockerfile.dev
├── Dockerfile.prod
├── docker-compose.dev.yaml
├── docker-compose.prod.yaml
├── next-env.d.ts
├── cypress.json
├── tsconfig.json
├── postcss.config.js
└── tailwind.config.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Chrome	Firefox	Edge	Safari	Opera