Welcome to the Goraebab Frontend project!
- Node.js - version v20.10.0 or higher
- npm - for package management
-
Clone the repository:
git clone https://github.com/Team-Goraebab/Goraebab-Frontend.git
-
Navigate to the project directory:
cd Goraebab-frontend
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
The app will be available at http://localhost:3000.
Here's an overview of the key directories and files in the project:
goraebab-frontend/
βββ .github/ # GitHub workflows and configurations
βββ .idea/ # Project settings (for JetBrains IDEs)
βββ .next/ # Next.js build output (auto-generated)
βββ node_modules/ # Project dependencies (auto-generated)
βββ public/ # Static assets
βββ src/ # Source files
β βββ app/ # Main application logic
β β βββ dashboard/ # Dashboard components
β β βββ settings/ # Settings components
β β βββ api/ # API handlers
β β βββ favicon.ico # Favicon file
β β βββ globals.css # Global CSS
β β βββ layout.tsx # Layout component
β β βββ page.tsx # Main page component
β βββ components/ # Reusable UI components
β βββ context/ # Context providers for global state
β βββ data/ # Static or configuration data
β βββ hook/ # Custom React hooks
β βββ services/ # API services and business logic
β βββ store/ # Zustand store configuration
β βββ types/ # TypeScript types and interfaces
β βββ utils/ # Utility functions
βββ .env # Environment variables
βββ .eslintrc.json # ESLint configuration
βββ .gitignore # Git ignore rules
βββ .prettierrc # Prettier configuration
βββ daemon.json # Custom daemon configuration
βββ next-env.d.ts # Next.js TypeScript environment definitions
βββ next.config.mjs # Next.js configuration
βββ package.json # Project metadata and dependencies
βββ package-lock.json # Lockfile for npm dependencies
βββ postcss.config.mjs # PostCSS configuration
βββ tailwind.config.ts # Tailwind CSS configuration
βββ tsconfig.json # TypeScript configuration
βββ README.md # Project documentation
Here are some key libraries used in this project:
- Next.js: A React framework for production-grade web applications with SSR (Server-Side Rendering).
- React: The core UI library.
- Zustand: A lightweight state management library, used for managing global state in the app.
- axios: A promise-based HTTP client for making API requests.
- Tailwind CSS: A utility-first CSS framework used for designing the UI.
- MUI: A popular UI component library for React, used for implementing Material Design in the app.
- Lucide: Icon library for adding vector icons to the app.
- React-Draggable: A component used for making elements draggable within the UI.
- Panzoom: Provides zoom and pan functionality for elements.
- React Tooltip: A library to easily create tooltips in your app.
- Notistack: Snackbar library for displaying notifications.
- uuid: Generates unique IDs for various use cases.
dev
: Run the development server.build
: Generate the production build.start
: Run the production server.lint
: Run ESLint to check for issues in the code.
This project is licensed under the MIT License. See the LICENSE file for details.