whosramoss/coffee-boilerplate

Coffee Boilerplate is a time-saving Next.js and TypeScript boilerplate designed to accelerate your development process. Build interactive and engaging web experiences with ease.

Coffee NextJS Boilerplate

This template provides a starting point for building Next.js apps with amazing animations.

Check the preview

How to install ⚡

  # Clone the project
  git clone https://github.com/whosramoss/coffee-boilerplate/

  # Go to the project directory
  cd coffee-boilerplate

  # Install dependencies
  npm install

  # Start the server 
  npm run dev

How to build ⚡

• To generate a static compilation, the next.config.mjs file must have the parameters below :

const staticbuild = {
  distDir: 'build',
  output: 'export',
  trailingSlash: true,
}

• Run the command:

  npm run build

Structure 📂

• src – Add all folders below
  • app – Contains pages, layouts, and api routes
  • client – Contains components, hooks, providers, and styles
  • server – Contains schemas and services
  • shared – Contains methods, types, enums and constants that will be used in more than one place in the application

Features 🦾

• Next.js
• TypeScript
• Prettier
• ESLint
• Tailwind CSS
• Framer Motion
• Zod

Hooks ⚡

Animation

• useAnimationCursor
• useAnimationFadeIn
• useAnimationHoriozontalList
• useAnimationHover
• useAnimationItemMouseMove
• useAnimationParallax
• useAnimationParallaxImage
• useAnimationSplash
• useAnimationTextScroll

Others

• useApiFetch
• useLocalStorage
• useMediaQuery
• useTabs
• useTimeout

API

FAKE COFFEE API : Fake coffee products rest API for your e-commerce or cafe website prototype

Contributing 📄

If you want to contribute to coffee-boilerplate, please make sure to review the contribution guidelines. This project makes use of GitHub issues for tracking requests and bugs.

License 📄

MIT License. LICENSE

Author ✍️

Gabriel Ramos (@whosramoss)