funnelsPreview: A TypeScript repository from NickolasBenakis

Features · Deployment · Getting started · Scripts overview ·

🎉 Features

🚀 Next.js 14 (App router)
⚛️ React 18
📘 Typescript
🎨 TailwindCSS - Class sorting, merging and linting
🛠️ Shadcn/ui - Customizable UI components
🧪 Jest & React Testing Library - Configured for unit testing
📈 Absolute Import & Path Alias - Import components using @/ prefix
💅 Biome - Format, lint, all in one
🐶 Husky & Lint Staged - Run scripts on your staged files before they are committed
🔹 Icons - From Lucide

🚀 Deployment

website 🎉 Has been tested across Safari, Chrome, Firefox

🎯 Getting started

2. Install dependencies

pnpm install

4. Prepare husky

It is required if you want husky to work

pnpm prepare

5. Run the dev server

You can start the server using this command:

pnpm dev

and open http://localhost:3000/ to see this app.

📁 Project structure

.
├── .husky                          # Husky configuration
├── public                          # Public assets folder
└── src
    ├── __tests__                   # Unit and tests
    ├── app                         # Next JS App (App Router)
    ├── components                  # React components
    ├── hooks                       # Custom hooks
    ├── lib                         # Functions and utilities
    ├── styles                      # Styles folder
    ├── types                       # Type definitions

⚙️ Scripts overview

The following scripts are available in the package.json:

dev: Run development server
build: Build the app
start: Run production server
preview: Run build and start commands together
lint: Lint the code using Biome
lint:fix: Fix linting errors
format:check: Checks the code for proper formatting
format:write: Fix formatting issues
typecheck: Type-check TypeScript without emitting files
test: Run unit tests
test:watch: Run unit tests in watch mode
postbuild: Generate sitemap
prepare: Install Husky for managing Git hooks

Extra Mile 🏁

I wanted to add a way to avoid low contrast colors within elements. I tried different approaches but It wasn't ideal so I dropped it completely.
More Unit tests and UI Integration tests.
More Styling around the canvas and the elements.
More file management, potentially upload the json files to S3 and provide a file management for the client.

NickolasBenakis/funnelsPreview