Dive into the world of Next.js, Incredible Frontend Hilink website built with Next.js using TypeScript & Tailwind CSS 🪐

View Demo

Table of Contents

• Table of Contents
• 🌟 Introduction
  • Folder Structure
    • .vscode
    • app
    • components
    • constants
    • assets
    • types
• 👾 Technologies Used
• 🧰 Getting Started
  • ⚙️ Installation and Run Locally
    • Step 1
    • Step 2
    • Step 3
    • Step 4
  • Learn More
  • Deploy on Vercel
• 📷 Screenshots
• 👋 Contributing
• ⚠️ License
• 🤝 Contact

🌟 Introduction

Hilink website is a web application built with Next.js using TypeScript & Tailwind CSS. The application is a landing page used to showcase the mobile application. The website is responsive and works great on mobile devices and tablets. The web application is designed using Tailwind CSS, linted with ESLint and formatted with Prettier. The application is deployed on Vercel.

Folder Structure

Hilink code folder structure is as follows:

nextjs13-hilink/
├── .vscode/
├   └── settings.json
├── app/
├   ├── favicon.ico
├   ├── globals.css
├   ├── layout.tsx
├   └── page.tsx
├── components/
├   ├── layout/
├   ├   ├── Footer.tsx
├   ├   └── Navbar.tsx
├   ├── shared/
├   ├   └── Button.tsx
├   └── sections/
├       ├── Hero.tsx
├       ├── Camp.tsx
├       ├── Guide.tsx
├       ├── Features.tsx
├       └── GetApp.tsx
├── constants/
├   └── index.ts
├── public/
├   └── assets/
├   ├   ├── icons/
├   ├   ├   └── [[...]].svg
├   ├   └── images/
├   ├       └── [[...]].{png,svg}
├   ├── next.svg
├   └── vercel.svg
├── types/
├   └── index.d.ts
├── .eslintrc.json
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

Now let's dive into the root folder and see what it contains.

.vscode

settings.json

This is a JSON file contains the settings used in Visual Studio Code.

app

favicon.ico - globals.css - layout.tsx - page.tsx

The app directory contains the application's favicon, the global styles, the layout component and the page component which is the home page of the application.

components

layout/: Footer.tsx - Navbar.tsx

The layout directory contains the layout components of the application. The layout components are the Navbar and the Footer.

shared/: Button.tsx

The shared directory contains the shared components of the application. The shared components are the Button component.

sections/: Hero.tsx - Camp.tsx - Guide.tsx - Features.tsx - GetApp.tsx

The sections directory contains all the sections used in the application. Each section is a React component. The sections are imported in app/page.tsx and rendered in the application.

constants

index.ts

This is a TypeScript code contains all the constants used in the application, specifically the Navbar and Footer links (navLinks, footerLinks, footerContactInfo, socials), the features used in the Features section and the peopleUrl used in the Camp section.

assets

icons/ - images/ react.svg

The public directory contains the media used in the application. The assets folder contains all the images and icons used in the application.

types

index.d.ts

This is a TypeScript code contains all the types used in the application, more precisely the interfaces.

(back to top)

👾 Technologies Used

Hilink web application is built using the following technologies:

• TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Next.js: Next.js is an open-source React front-end development web framework created by Vercel that enables functionality such as server-side rendering and generating static websites for React based web applications.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
• Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

(back to top)

🧰 Getting Started

⚙️ Installation and Run Locally

Step 1

Download or clone this repo by using the link below:

 https://github.com/ladunjexa/nextjs13-hilink.git

Step 2

Hilink using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in consle

  node -v

Step 3

Go to root folder and execute the following command in console to get nodemon the required packages:

npm install

Step 4

Go to root folder and execute the following command in console to start the application locally:

npm run dev

This is a Next.js project bootstrapped with create-next-app.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

(back to top)

📷 Screenshots

(back to top)

👋 Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

⚠️ License

Hilink web application is open source and distributed under the MIT License.

(back to top)

🤝 Contact

If you want to contact me, you can reach me at @ladunjexa.

(back to top)