Dock App Demo

Welcome to the Dock App Demo! 🚀 This project showcases a MacOS-inspired Dock component built with NextJS 14's App Router and Cult/UI's libraries. It integrates Progressive Web App (PWA) functionality using @ducanh2912/next-pwa, provides smooth animations with Framer Motion, and styles the application with Tailwind CSS for a modern, responsive user interface. This demo is open source and available for the community to explore and contribute.

Overview

This demo application highlights:

• MacOS-inspired Dock Component : A sleek, interactive Dock component.

• NextJS 14's App Router : Utilizes NextJS 14 for efficient routing and server-side rendering.

• Cult/UI Libraries : Integrates Cult/UI's libraries for enhanced design and user experience.

• Framer Motion Animations : Adds smooth, modern animations for a dynamic user experience.

• Tailwind CSS Styling : Uses Tailwind CSS for rapid, utility-first styling with a responsive design.

• PWA Integration : Offers a Progressive Web App experience with offline capabilities and installability.

• Theme Support : Includes support for light and dark themes.

Features

• Modern UI : MacOS-inspired design with vibrant gradients and responsive layouts.

• Smooth Animations : Leveraging Framer Motion for fluid transitions and interactions.

• Customizable Themes : Dark and light mode support.

• PWA Capabilities : Offline functionality and the ability to install the app on your device.

• Open Source : Contribute and explore the source code on GitHub.

Installation

To get started with this project locally, follow these steps:

1. Clone the Repository :

git clone https://github.com/xi-Rick/dock-app-demo.git

2. Navigate to the Project Directory :

cd dock-app-demo

3. Install Dependencies :

npm install
# or
yarn install

4. Run the Development Server :

npm run dev
# or
yarn dev

Your application will be available at http://localhost:3000.

Usage

• Home Page : View the main screen with a description of the app and links to explore more.

• Profile Page : Manage your user profile with a unique UI/UX including an avatar.

• Settings Page : Configure various settings with distinct sections for account management, privacy, and more.

• Dashboard Page : A central hub for navigating various sections of the app.

Contributing

We welcome contributions to improve this project! If you have suggestions, bug reports, or want to contribute, please follow these steps:

1. Fork the Repository .

2. Create a New Branch for your changes:

git checkout -b feature/your-feature

3. Commit Your Changes :

git add .
git commit -m "Add your commit message here"

4. Push to Your Branch :

git push origin feature/your-feature

5. Open a Pull Request on GitHub.

Acknowledgements

• NextJS : For the powerful framework and App Router.

• Cult/UI : For the beautiful UI components.

• Framer Motion : For enabling smooth animations.

• Tailwind CSS : For providing a flexible and responsive styling framework.

• @ducanh2912/next-pwa : For seamless PWA integration.

• Lucide Icons : For the clean and versatile icons used in this project.