The Wordsmith's Collection

A website featuring a curated selection of the most important literary works in history.

Report Issue · Request Feature · Ask Question

🇬🇧 English | 🇪🇸 Español

Table of Contents

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

About the Project

The Wordsmith's Collection consists of a website with a subscription model (SaaS) that allows users to access a curated library of the most important literary works in history. They will be able to read the books on the site, as well as search and filter by genre and author. Each book, genre and author will have a description to get more insight into their bibliography and synopsis, 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 types of subscription:

• Basic: The subscriber can read all books except those marked PREMIUM.
• Premium: The subscriber can read the entire available library, including PREMIUM books.

The website has three types of users:

• Visitor: A user who visits the site. Cannot read books, but can see the available library and reviews.
• Subscriber: Registered user who pays a monthly/annual fee to read books. Can be Basic or Premium.
• Administrator: An existing user who, in addition to performing the same operations as a subscriber, can add, edit, and delete books at will.

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 diagrams.
• Flowbite: Open-source UI component library built on top of Tailwind CSS. Used for Nav dropdowns and tabs.
• 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.

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

   If necessary, you can configure it by setting the correct configuration for the 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 credit card generator to fake a payment.

Authors

• José Carlos López Henestrosa (HenestrosaDev)

License

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

(back to top)