Quote App

This is a Quote App have features:-

1. User will be able to login and login info shows on top right.
2. User will be able to get a random quote as many times as they want.
3. User will be able to favourite a random quote.
4. User will be able to unfavourite a random quote.
5. User will be able to edit the text and author of a quote.

Table of Contents

• Getting Started
• Running the Project
• Environment Variables
• Project Structure

Getting Started

Prerequisites

• Node.js (>= 14.x)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/your-username/quote-app.git

2. Install dependencies:

   npm install

Running the Project

Development

To start the development server with hot module replacement:

npm run dev

Build

To build the project for production:

npm run build

Preview

To preview the production build:

npm run preview

Environment Variables

Create a .env file in the root of the project and add the following environment variables:

VITE_API_NINJAS_KEY=your_api_key_here

You can use the provided env.example as a template.

Project Structure

quote-app/
├── public/
│ ├── vite.svg
│ └── profile.svg
├── src/
│ ├── assets/
│ │ ├── profile.png
│ │ └── react.svg
│ ├── components/
│ │ ├── FavouritesList/
│ │ │ ├── EmptyFavourites.tsx
│ │ │ └── FavouritesList.tsx
│ │ ├── Loader/
│ │ │ ├── Loader.css
│ │ │ └── Loader.tsx
│ │ ├── LoginForm/
│ │ │ └── LoginForm.tsx
│ │ ├── NavBar/
│ │ │ └── NavBar.tsx
│ │ ├── QuoteCard/
│ │ │ └── QuoteCard.tsx
│ │ └── QuoteSection/
│ │ └── QuoteSection.tsx
│ ├── lib/
│ │ ├── models/
│ │ │ └── card.model.ts
│ │ ├── stores/
│ │ │ └── useStore.ts
│ │ ├── user-messages/
│ │ │ ├── error-messages.ts
│ │ │ └── success-messages.ts
│ │ └── utils.ts
│ ├── ui/
│ │ ├── avatar.tsx
│ │ ├── badge.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── toast.tsx
│ │ ├── toaster.tsx
│ │ └── use-toast.ts
│ ├── App.css
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── .gitignore
├── .gitattributes
├── components.json
├── index.html
├── package.json
├── postcss.config.ts
├── tailwind.config.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts