TEMPLATE-FRONTEND-NEXTJS

❯ Template developed by Artur Schincariol Rossi

Table of Contents

• Overview
• Features
• Project Structure
• Technologies
• Pages
• Getting Started
  • Prerequisites
  • Installation
  • Configuration
  • Usage

Overview

❯ Base frontend template for building application with the NextJS framework.

Features

• Code formatters && Linters (Eslint + Prettier)
• Forms Validations
• Theme selector (Light/Dark Mode)
• User Context
• Notification System
• Pre-built Components: Input (using Composition Pattern), Button, Header, Footer

Project Structure

└── template-frontend-nextjs/
    ├── LICENSE
    ├── README.md
    ├── next.config.mjs
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── public
    │   ├── favicon.ico
    │   ├── logo-quadrada.png
    │   └── logo.png
    ├── src
    │   ├── @types
    │   ├── app
    │   ├── components
    │   ├── contexts
    │   ├── layouts
    │   ├── styles
    │   └── utils
    ├── tailwind.config.ts
    └── tsconfig.json

Technologies

• NextJS
• ReactJS
• TailwindCSS
• React Hook Form
• RadixUI
• Zod
• Prettier && Eslint

Pages

Pages	Access Type
Index	Public Route
Register	Public Route
Login	Public Route
Dashboard	Protected Route, Only logged users can access this route

Getting Started

Prerequisites

Before getting started with template-frontend-nextjs, ensure your runtime environment meets the following requirements:

• Version Control System: Git
• Javascript Runtime: NodeJS
• Package Manager: Npm (Installed with NodeJS)
• Backend: template-backend-nodejs (Needs to be running for use all functionalities)

Installation

1. Clone the template-frontend-nextjs repository:

❯ git clone https://github.com/Artursrossi/template-frontend-nextjs

2. Navigate to the project directory:

❯ cd template-frontend-nextjs

3. Install the project dependencies: Using npm  

❯ npm install

Configuration

Set the environment variables by creating a .env file using .env.example

Usage

Run template-frontend-nextjs using one of the following methods:

Development environment:

1. Start project without generating a build: Using npm  

❯ npm run dev

Production environment:

1. Generate a optimized build version: Using npm  

❯ npm run build

2. Start project using the optimized build version: Using npm  

❯ npm run start