Versinity is a React-based web application that provides users with random Bible verses along with beautiful background images. Users can navigate through verses, save their favorites, and customize the appearance of the text.
- Random Bible Verses: Fetches random Bible verses from an API.
- Background Images: Each verse is accompanied by a background image fetched from Unsplash.
- Favorites: Users can save their favorite verses.
- Dark Mode: Toggle between light and dark themes.
- Text Customization: Change text size and font family.
- Keyboard and Touch Navigation: Navigate through verses using keyboard arrows, mouse wheel, or touch gestures.
- Share Verses: Easily share verses with others.
- Commentaries: View additional commentary for each verse.
- React: A JavaScript library for building user interfaces.
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
- Vite: A fast build tool and development server for modern web projects.
- React Router: A library for routing in React applications.
- Unsplash API: An API for fetching high-quality background images.
- Custom Hooks: For managing state and side effects.
- LocalStorage: For persisting user preferences and favorites.
- Tailwind CSS: A utility-first CSS framework for styling.
-
Clone the repository:
git clone https://github.com/kenawak/versinity.git cd versinity -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173.
- Use the arrow keys or swipe up/down to navigate through verses.
- Click the heart icon to add a verse to your favorites.
- Click the info icon to view additional information about the verse.
- Click the share icon to copy the verse text to your clipboard.
- Use the settings icon to customize the text size and font family.
- Toggle dark mode using the sun/moon icon.
- Click the info icon to view commentary for the current verse.
This project is licensed under the MIT License. See the LICENSE file for details.