[Quolity Car Company]

Introducing Quolity Car Company, captivating compaign landing page.

Documentation built by Developers

Each element is well presented in very complex documentation.

You can read more about the documentation here.

HELPFUL LINKS

• View Github Repository
• Check FAQ Page

Demo

Quick start

Quick start options:

• Download from Creative Tim.

Terminal Commands

1. Download and Install NodeJs LTS version from NodeJs Official Page.
2. Navigate to the root ./ directory of the product and run npm install to install our local dependencies.

Documentation

The documentation for the Material Dashboard is hosted at our website.

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Live Preview
• Download Page
• Documentation is here
• License Agreement
• Support
• Issues: Github Issues Page
• Nepcha Analytics - Analytics tool for your website

Reporting Issues

We use GitHub Issues as the official bug tracker for the Nextjs Tailwind Campaign Page. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Nextjs Tailwind Campaign Page. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2023 Creative Tim
• Creative Tim license

Useful Links

• More products from Creative Tim

• Tutorials

• Freebies from Creative Tim

• Affiliate Program (earn money)

Atomic Design Folder Structure for React

This document outlines the folder structure for a React project using Atomic Design principles.

Folder Structure

src/
├── assets/                     # Static assets like images, fonts, and icons
│   ├── images/
│   ├── fonts/
│   ├── icons/
├── components/                 # Atomic Design Layers
│   ├── atoms/                  # Small, reusable components (e.g., buttons, inputs)
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   │   ├── Button.css
│   │   │   └── Button.test.jsx
│   │   └── Input/
│   ├── molecules/              # Combinations of atoms (e.g., forms, cards)
│   │   ├── Form/
│   │   │   ├── Form.jsx
│   │   │   ├── Form.css
│   │   │   └── Form.test.jsx
│   │   └── Card/
│   ├── organisms/              # Groups of molecules forming sections (e.g., navbar)
│   │   ├── Header/
│   │   │   ├── Header.jsx
│   │   │   ├── Header.css
│   │   │   └── Header.test.jsx
│   │   └── Footer/
│   ├── templates/              # Page templates defining structure
│   │   ├── HomeTemplate.jsx
│   │   ├── AboutTemplate.jsx
│   │   └── index.js
├── pages/                      # Pages combining templates and data
│   ├── Home/
│   │   ├── Home.jsx
│   │   ├── Home.css
│   │   └── Home.test.jsx
│   └── About/
├── contexts/                   # Contexts for managing global state
│   ├── ThemeContext.jsx
│   └── AuthContext.jsx
├── hooks/                      # Custom React hooks
│   ├── useAuth.jsx
│   └── useFetch.jsx
├── services/                   # API services and logic (Axios, etc.)
│   ├── api.js
│   └── authService.js
├── styles/                     # Shared styles
│   ├── variables.css
│   ├── mixins.css
│   └── global.css
├── utils/                      # Utility functions/helpers
│   ├── formatDate.js
│   └── validateForm.js
├── App.jsx                     # Main App component
├── index.js                    # App entry point
└── routes/                     # Route definitions and configurations
    ├── AppRoutes.jsx
    └── PrivateRoute.jsx

Explanation of Folders

1. assets/:

   • Static files such as images, fonts, and icons.

2. components/:

   • atoms/: Smallest building blocks like buttons or text inputs.
   • molecules/: Combinations of atoms with logic.
   • organisms/: Larger UI structures combining molecules.
   • templates/: Define page layout and structure, combining organisms.

3. pages/:

   • Final pages tied to specific routes.

4. contexts/:

   • Global React Contexts for shared state (e.g., authentication).

5. hooks/:

   • Custom hooks for reusable logic.

6. services/:

   • API and business logic layers.

7. styles/:

   • Centralized styling files.

8. utils/:

   • Generic helper functions or utilities.

---

This structure adheres to Atomic Design principles, ensuring scalability, maintainability, and reusability across the project.