HightTrip

This is a project I did to better understand how to use the Nest Js framework, how folders are organized, what I can and cannot delete, etc. I took the liberty of improving some specific points that I felt were missing in the original version, such as some responsive sizes, for example.

Stack used

Features

• Front End structured in Next.JS
• Reusable Typescript components made from props
• Tailwind to create styles quickly and efficiently
• Mobile responsive UX/UI design
• Constants file for creating easy-to-maintain sections and footers

Learnings

This was my first contact with Frameworkl Next.js and I was able to see that it offers a robust development environment with automatic page reloading and TypeScript support, which speeds up the development and debugging process. Including automatic optimization features, such as optimized image loading, page pre-rendering and code splitting, which help to greatly improve application performance. It provides the ability to create internal APIs within the Next.js application, which is useful for manipulating data without the need to configure a separate backend. And finally, what I actually used most in this project, the creation of static pages generated at construction time (SSG) and dynamic pages that can be updated with each request (ISR), making the Framework quite versatile and complete in my opinion.

Installation

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

./styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

pages/_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Screenshots