The Wordsmith's Collection

A website with a SaaS model that allows users to access a curated library of the most important literary works in history.

Report Issue · Request Feature · Ask Question

🇬🇧 English | 🇪🇸 Español

Video in Spanish with English subtitles explaining the main features of the website.

Table of Contents

• About the Project
  • Built With
  • Entity-Relationship Model
  • Relational Model
  • Use Cases
• Getting Started
  • Prerequisites
  • Steps
• Notes
• Roadmap
• Authors
• License

About the Project

The Wordsmith's Collection is a subscription-based website (SaaS) that allows users to access a curated library of the most important literary works in history. Subscribed users will be able to read and review the books available for their subscription plan. Each book, genre and author has detailed descriptions to provide synopsis, subject matter and bibliography information, respectively.

In order to access the service, users must register and enter a credit card for payment. Note that no payments are actually made, as the site only verifies that the credit card is valid. To actually use this feature, you should implement a payment gateway provider such as Redsys or Stripe.

There are two subscription plans:

• Basic: Can read and review all books except those marked Premium.
• Premium: Can read and review the entire library, including Premium books.

The website has three types of users:

• Non-subscriber visitor: Cannot read books or write reviews, but can see the available library and posted reviews.
• Subscriber: Registered user who pays a monthly/annual fee to read books. Can be Basic or Premium.
• Administrator: A user who has all the features of a subscriber plus the ability to add, edit, and delete books, genres, and authors. They can also edit and delete users, and delete reviews.

Screenshots

 

 

 

Built With

• Laravel: PHP framework.
• TailwindCSS: CSS framework.
• Vue.js 3: JavaScript framework.
• Inertia.js: Enables the creation of fully client-side rendered, single-page applications without the complexity of modern SPAs.
• drawio.com: Tool used to create the entity-relationship model diagrams.
• dbdiagram.io: Tool used to create the relational model diagrams.
• Flowbite: Open-source UI component library built on top of Tailwind CSS. Used for Nav dropdowns and tabs.
• PDF.js: Library for rendering PDFs.
• Spatie/laravel-medialibrary: Associates files with Eloquent models.
• uuid: JavaScript package to generate unique UUIDs for the alerts.
• cviebrock/eloquent-sluggable: Creates unique slugs for Eloquent models in Laravel.
• jpkleemans/vite-svg-loader: Vite plugin to load SVG files as Vue components.
• laravel-validation-rules/credit-card: Credit card validation package for Laravel.
• @vueuse/core: Collection of essential Vue Composition Utilities. Used for infinite scrolling with useIntersectionObserver and useDebounceFn.
• @vuepic/vue-datepicker: Datepicker component for Vue 3.
• xiCO2k/laravel-vue-i18n: Internationalization for Vue and Laravel.
• Terms and Conditions generator: Self-explained

Entity-Relationship Model

Relational Model

Use Cases

(back to top)

Getting Started

Prerequisites

Ensure you have PHP, Git, Composer, npm, and Laravel installed on your local machine. If not, you can download and install them from the official websites:

• PHP
• Git
• Composer
• npm
• Laravel (install globally using Composer)

Steps

1. Use git to clone the Laravel project repository to your local machine. Open your terminal or command prompt and run:

   git clone https://github.com/HenestrosaDev/the-wordsmiths-collection.git

2. Navigate to the project directory using the cd command. For example:

   cd /path/to/the-wordsmiths-collection`

3. Install Composer dependencies running the following command:

   composer install

4. Install npm dependencies running the following command:

   npm install

5. Create a .env file, as Laravel uses environment variables stored in a .env file for configuration. Duplicate the .env.example file provided with the project and rename it to .env:

   cp .env.example .env

   Edit it to set the correct configuration for your database.
   
   
6. Generate an application key, required for security. Generate it using Artisan:

   php artisan key:generate

7. Run database migrations to set up the database tables:

   php artisan migrate

8. Start the development server by running this command:

   php artisan serve

You can enable hot refresh with Vite by running the command npm run dev. Note that you'll need to open the URL provided by Artisan to enjoy this feature, not the one provided by Vite.

(back to top)

Notes

• Use a real email address when creating an account, as a verification email will be sent to proceed with the payment.
• Use a credit card generator to fake a payment.

Roadmap

Improvements that can be made to the project:

• Support .mobi and .epub files and create a viewer for them for a more satisfying experience on mobile devices.
• Add a User/Detail.vue page to view data such as their recent activity, ratings and comments from other users.
• Add support for half scores (0.5, 1.5, 2.5, 3.5 and 4.5).
• Allow users to upload a profile picture and change it.
• Add the option to add favorite books, genres, authors, and reviews.
• Add a dialog when hovering a book to show more information about it, similar to Filmin.
• Make this a real product by using a payment gateway such as Redsys or Stripe.
• Add more subscription plans to support more time at a reduced price (e.g., 6 months of Premium subscription for 34,99€).
• Add logic and missing services to control recurring payment.
• Extend the subscription end date if the recurring payment is successful, or cancel if the payment cannot be made.

You can propose a new feature creating an issue.

Authors

• José Carlos López Henestrosa (HenestrosaDev)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)