Pine UI

A comprehensive and user-friendly boilerplate, designed to expedite the development process of MERN Stack Dashboards, providing developers with an extensive range of components and features.

Getting Started

npx pineuix --vite

or just clone the project by running

git clone https://github.com/kyooowe/PineUI.git

That will scaffold a new folder with the latest version of 🚀 Pine UI

Installation

Create a .env file in the project directory (apps/api and apps/dashoard) with your environment variables. You can copy the contents of the .env.example file and replace the values with your own. Install dependencies by running the command in the terminal (root folder)

npm install

Run the following command in the root directory to start the application

npm run dev

Access the application in your dashboard at http://127.0.0.1:5173/ and API http://localhost:3001

Build

To build a production-ready version of your application, run the command in the terminal (root folder):

npm run build

Demo

Experience the impressive features and functionality you'll have at your fingertips when you kickstart a project with Pine UI through an engaging live read-only demonstration, conveniently available for you to explore right here.

Framework / Libraries

This project uses the following frameworks and libraries:

• 🚀 Turborepo - A build tool for a mono repo that is optimized for JavaScript and TypeScript codebases1
• ⚛️ React - a free and open-source front-end JavaScript library for building user interfaces based on UI components.
• 🌐 Express JS - A popular web application framework for Node.js, a JavaScript runtime environment that allows server-side JavaScript execution.
• 🔍 React Query - A JavaScript library for managing and synchronizing server state in React applications.
• 🎨 Tailwind CSS - A utility-first CSS framework that provides a set of pre-designed utility classes to quickly build user interfaces.
• ✨ React Particles - Easily create highly customizable JavaScript particle effects, confetti explosions, and fireworks animations and use them as animated backgrounds for your website.
• 📚 Typescript - A strongly-typed superset of JavaScript that adds static typing and other features to the language.
• 🐻 Zustand - A state management library for React applications.
• 📝 Formik - A popular form library for React applications. It simplifies the process of building and managing complex forms by providing an intuitive API and a set of useful features.
• 🎭 Framer Motion - A popular animation library for React applications. It provides a simple and intuitive API for creating smooth and interactive animations and gestures.
• 🐆 Mongoose - An Object-Data Mapping (ODM) library for Node.js and MongoDB.

Features

This innovative project showcases a comprehensive range of powerful and cutting-edge features, seamlessly integrating the following capabilities:

• Responsive Layout
• Authentication w/ Forgot Password Recovery
• Student Management (CRUD)
• Custom Components based on TailwindCSS
• Developer experience improved with ESLint, Prettier, and Husky

Frequently Asked Questions (FAQs)

It leverages the strength of Vite and Express.js, along with TypeScript, to build an impressive MERN Stack project. It encompasses essential features such as seamless authentication, forgot password retrieval, and CRUD functionality. The project also enhances the developer experience by incorporating ESLint, Prettier, and Husky, ensuring code quality and consistency. Additionally, it boasts customized components based on Tailwind CSS and a responsive layout for a visually appealing and user-friendly interface.

I created this project not only for personal use but also to benefit co-developers by significantly speeding up the development process. By utilizing the power of Vite and Express.js, along with TypeScript, ESLint, Prettier, and Husky, the project aims to enhance collaboration and streamline development, ultimately saving time and effort for everyone involved.

Roadmap

An overview of our development plans and upcoming features.

• Component libraries (Will add more components and variants)
  • Alert
  • Avatar
  • Badge
  • Buttons
  • Cards
  • Select
  • Text Input
• Landing Page
• NextJS Version Ongoing
• CLI (Create a dashboard, services, and CRUD pages)
• Auth with Google, Github, Twitter, and Facebook

License

The code in this repository is released under the MIT license as found in the License file.

Author

• @kyooowe