Frontend Structure

Welcome to the Frontend Structure repository! This project is a Next.js application that leverages various powerful libraries and tools to create a robust and efficient web experience.

Table of Contents

• Introduction
• Features
• Project Structure
• Dependencies
• Usage
• Contributing
• License

Introduction

Frontend Structure is a web application built with Next.js, offering a modern and efficient development experience. We utilize several libraries to enhance functionality, including Axios for API calls, React Query for state management and caching, and Zustand for local state management.

Features

• Next.js Framework: Leveraging the power of Next.js for server-side rendering, routing, and a seamless developer experience.
• Axios for API Calls: We use an Axios instance located in the services folder for making API calls. The configuration is modular and can be easily extended or modified.
• React Query Hooks: In the hooks folder, you'll find React Query hooks that interact with our Axios services. This ensures efficient data fetching, caching, and state management in your components.
• Compound Pattern for Templates: The components/template directory follows a compound pattern for creating reusable UI templates. This promotes consistency and maintainability throughout the application.
• Next UI Integration: We have integrated the Next UI library (@nextui-org/react), providing a set of pre-built components for faster development. However, feel free to use any other UI libraries based on your preferences.

Project Structure

The project structure is organized to maintain a clean and scalable codebase. Key directories include:

• src: The source code of the application.
• services: Contains Axios instances and API service functions.
• hooks: Custom hooks, including React Query hooks for data fetching and management.
• lib: Local state management with Zustand.
• components: Reusable UI components and templates.
• common: Shared utilities, constants, and interfaces.

Dependencies

Key dependencies include:

• Axios: For making HTTP requests.
• React Query: State management and caching.
• Zustand: Local state management.
• Next UI (@nextui-org/react): UI components for Next.js.

Check the package.json file for a complete list of dependencies and devDependencies.

Usage

1. Clone the repository: git clone https://github.com/MNBoy/frontend-structure.git
2. Install dependencies: npm install or pnpm install (if using pnpm).
3. Run the development server: npm run dev.
4. Explore and customize the application to fit your needs.

Contributing

We welcome contributions! If you find any issues or have ideas for improvements, please open an issue or submit a pull request. Make sure to follow our contributing guidelines.

License

This project is licensed under the MIT License. Feel free to use and modify the code as needed. We appreciate your contributions and feedback!

Happy coding! 🚀