This is a frontend application for CaPer project. It is designed following the best practices and recommendations to ensure a clean, maintainable, and scalable codebase. It is also built with security in mind to protect against common security threats.
The application is built using TypeScript for strong typing, pnpm as a fast package manager, and React for building UI. It leverages Next.js to enable server-side rendering and static site generation. For styling, it uses TailwindCSS.
- Clone the repository
git clone https://github.com/kelompok1-swe-academya/caper-fe.git
- Set up the environment variables by copying .env.example
cp .env.example .env
- Install the required the dependencies
pnpm install
- Run the development server
pnpm dev
- Open http://localhost:3000 with your browser to see the result.
The project is structured using a feature-based approach to ensure scalability, modularity, and maintainability. The src directory is organized into three main sections:
app: Contains global application-level components, pages, layouts, and configurations, including the main entry point for pages and global styles.features: Houses feature-specific modules, where each module includes its own actions, services, components, containers, and types to encapsulate functionality and logic for that feature.shared: Includes reusable components, hooks, libraries, and utilities that are shared across different features and pages, promoting consistency and code reusability.
- State Management: Utilizes Zustand, a minimalistic state management solution for React, to handle global state across the application.
- Form Handling: Employs React Hook Form, a library that manages forms efficiently with minimal re-renders, offering built-in validation and integration with Zod.
- Data Fetching: Integrates React Query, a data-fetching library that simplifies data management by handling caching, synchronization, and background updates.
- Table Management: Utilizes TanStack Table, a powerful and flexible table library for displaying large datasets, supporting features like pagination, sorting, and filtering.
- Schema Validation: Employs Zod, a TypeScript-first schema validation library used for form validation and data parsing.
- Code Formatting: Utilizes Biome, a tool for managing and formatting code in a consistent and optimized way across the project.
- Animations: Integrates Motion, a library for adding animations to React components, enabling smoother transitions and interactions.
- Data Visualization: Utilizes Recharts, a charting library for creating interactive and customizable data visualizations.
- Make sure to run husky prepare command
pnpm prepare
- You can start contributing by reading CONVENTION for commit convention