⛩️ Project Info

NotePad - Online Note

Introduction:

App to note everything

Related web:

1.Notion: https://www.notion.so/

🎉 Features

• React - A JavaScript library for building user interfaces.
• TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
• Tailwind CSS - A utility-first CSS framework.
• Tailwind Prettier Plugin - A Prettier plugin for formatting Tailwind CSS classes.
• ESLint - A pluggable linting utility for JavaScript and TypeScript.
• PostCSS - A tool for transforming CSS with JavaScript.
• Autoprefixer - A PostCSS plugin to parse CSS and add vendor prefixes.
• Firebase - A Nosql database.
• remixicon - A icon library.
• Tiptap - A rich text editor.

⚙️ Prerequisites

Make sure you have the following installed on your development machine:

• Node.js (version 18.17 or later)
• Install: https://nodejs.org/en/download

🚀 Getting Started

Follow these steps to get started project:

1. Clone the repository:

   git clone https://github.com/TuanChill/minipad.git

2. Navigate to the project directory:

   cd minipad

3. Install the dependencies:

   yarn

4. Start the development server:

   yarn dev

📜 Available Scripts

• yarn dev - Starts the development server.
• yarn start - Starts the production mode.
• npm build - Builds the production-ready code.

📂 Project Structure

The project structure follows a standard React application layout:

project/
  ├── node_modules/      # Project dependencies
  ├── public/            # Public assets
  ├── src/               # Application source code
  │   ├── components/    # React components
  │   ├── services/      # Services (Firebase)
  │   ├── styles/        # Global styles
  │   ├── utils/         # Utility classes and functions
  │   ├── libs/          # Third-party libraries configuration
  │   ├── pages/         # Pages 
  │   ├── hooks/         # Custom hooks
  │   ├── layouts/       # Layout components
  │   ├── context/       # Contexts (React Context API)
  │   ├── containers/    # Container components
  │   ├── App.tsx        # Application entry point
  │   ├── index.css      # Global css
  │   └── index.tsx      # Main rendering file
  ├── .eslintrc.json     # ESLint configuration
  ├── index.html         # HTML entry point
  ├── postcss.config.js  # PostCSS configuration
  ├── tailwind.config.js # Tailwind CSS configuration
  ├── tsconfig.json      # TypeScript configuration
  └── vite.config.ts     # Vite configuration