Skip to content

vlrnsnk/quotesso

Repository files navigation

Quotesso - Random Quote Machine

Quotesso is a simple and elegant web application that allows users to get inspired by random quotes with a single click. The app was bootstrapped with Create React App, and it utilizes Tailwind CSS for styling and Redux for state management. Each new quote comes with a refreshing color change to enhance the user experience, and users can easily tweet their favorite quotes directly from the app.

Table of Contents

Features

  • Random Quote: Get inspired by a random quote at the click of a button.
  • Dynamic Color Change: The background and button colors change with each new quote.
  • Tweet a Quote: Share your favorite quotes on Twitter with a single click.
  • Responsive Design: Fully responsive design powered by Tailwind CSS, ensuring a seamless experience on all devices.

Demo

Check out the live demo deployed to the GitHub Pages: Quotesso

Technologies Used

  • React: Bootstrapped with Create React App for fast and easy setup.
  • Tailwind CSS: Utilized for rapid and responsive styling.
  • Redux: Manages the state of quotes and colors efficiently.
  • Quotable API: Fetches random quotes from the Quotes API.
  • Twitter API: Enables users to tweet quotes directly from the app.

Installation

Follow these steps to set up the project locally:

  1. Clone the repository:

    git clone https://github.com/vlrnsnk/quotesso.git
    cd quotesso
  2. Install dependencies:

    npm install
  3. Start the development server:

    npm start

    This will start the app and open it in your default browser at http://localhost:3000.

  4. Build the project:

    npm run build

    This will create an optimized production build in the build directory.

Usage

  • Click the "Quotesso!" button to generate a random quote.
  • Click the "Tweet" button to share the current quote on Twitter.
  • Enjoy the changing background colors with each new quote!

Customization

  • Tailwind CSS: Customize the design easily by modifying the tailwind.config.js file.
  • Redux: Add or modify state management logic by editing files within the features/ directory.

Contributing

Contributions are welcome! If you have suggestions or improvements, feel free to fork the repository and submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgements

Contact

Feel free to reach out to me with any questions or for collaborations.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published