Skip to content

EhrichPeter/quote

Repository files navigation

Quote

Quote is a web application that aims to inspire and uplift users by displaying a quote of the day along with a motivating headline. The website provides a daily dose of positivity and encouragement to help users stay Quoted and focused on their goals.

Features

  • Quote of the Day: Each day, a new inspiring quote is displayed on the website's homepage. The quotes are carefully curated to provide a variety of motivational messages from famous personalities, thought leaders, and authors.

  • Motivating Picture: In addition to the quote, the website also showcases a motivating picture that complements the quote and reinforces the positive message. The pictures are designed to inspire users and encourage them to take action towards their dreams and aspirations.

  • Bookmarking: Logged-in users have the ability to bookmark their favorite quotes. This feature allows users to save quotes that resonate with them, making it easy to revisit and reflect on those quotes later.

Technologies Used

Quote is built using the following technologies:

  • Next.js: A React framework for building server-side rendered and static websites.
  • Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
  • shadcnui: A library for creating shadowed and rounded UI components.
  • supabase: An open-source Firebase alternative that provides a suite of tools for building scalable and secure applications, including authentication, real-time database, and file storage.
  • OpenAI Api: The OpenAI API is used to extract keywords from quotes and find suitable backdrop images.

The application also utilizes the following API:

  • Quote of the Day API: Provides a daily inspiring quote from https://zenquotes.io/.
  • Picture API: Provides an accompanying picture for the quote from Unsplash.

Getting Started

To get started with Quote, follow these steps:

  1. Clone the repository: git clone https://github.com/your-username/Quote.git
  2. Install the required dependencies: npm install
  3. Start the server: npm run dev
  4. Access the website: Open your web browser and navigate to http://localhost:3000