Bookify

Web application to manage, organize, and share academic books
Explore the repository »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Project Structure
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Environment Variables
   • Available Scripts
3. Contributing
4. Contact

About The Project

Bookify is an early-stage MVP (Minimum Viable Product) created to showcase my skills as a fullstack web developer. Rather than being presented as a production-ready platform, this project serves as a technical demonstration of how a virtual library system could be designed, structured, and implemented using modern web technologies.

The focus of this MVP is on:

• Designing a clean and scalable frontend architecture
• Implementing server-side logic and data handling
• Integrating third-party services (storage, database, APIs)
• Applying best practices in TypeScript, state management, and validation

This repository represents a solid foundation for a potential virtual library platform, while primarily acting as a portfolio project that highlights my ability to build, structure, and reason about fullstack applications.

(back to top)

Project Structure

Bookify/
├── .github/                # GitHub configuration (CI, templates, ownership)
│   └── workflows/          # GitHub Actions (ESLint, checks)
├── public/                 # Static assets (images, icons, logos)
├── src/
│   ├── app/                # Next.js App Router
│   │   ├── (main)/         # Main application routes
│   │   │   ├── components/ # Page-specific UI components
│   │   │   └── saved-books/# Folder & book management views
│   │   └── share-books/    # Book sharing flow
│   ├── components/         # Global reusable components
│   │   ├── common/         # Shared UI elements (BookItem, Header, Modals)
│   │   └── icons/          # Custom SVG icon components
│   ├── context/            # Global state management (Folder context)
│   ├── hooks/              # Custom React hooks
│   ├── models/             # Data layer (IndexedDB, Prisma, business logic)
│   ├── interfaces/         # TypeScript interfaces and domain models
│   ├── providers/          # Global providers (UI, theme, etc.)
│   ├── styles/             # Global styles and third-party CSS
│   └── utils/              # Utility and helper functions
├── prisma/                 # Prisma schema and migrations
├── tailwind.config.ts      # Tailwind CSS configuration
├── next.config.ts          # Next.js configuration
└── tsconfig.json           # TypeScript configuration

This structure follows modern Next.js App Router conventions, separating concerns between routing, UI components, business logic, and data access. The project is designed to scale while remaining easy to maintain and extend.

(back to top)

Built With

This project is built using a modern fullstack JavaScript ecosystem:

• Next.js – Fullstack React framework using the App Router
• React – Component-based UI library
• TypeScript – Strong typing and improved developer experience
• Prisma – Database ORM and schema management
• Tailwind CSS – Utility-first styling
• TanStack Query – Server-state management
• Supabase – Authentication and backend services
• Cloudflare R2 (S3-compatible) – Object storage for files
• Zod – Schema validation and type-safe forms

(back to top)

Getting Started

Follow these steps to set up the project locally for development.

Prerequisites

Make sure you have the following installed:

• Node.js (v18 or later recommended)
• npm or pnpm
• Git

If you plan to use the database features:

• A supported database (configured via Prisma)

Installation

1. Clone the repository

   git clone https://github.com/Mauriciocr207/Bookify.git

2. Navigate to the project directory

   cd Bookify

3. Install dependencies

   npm install

4. Set up environment variables (see next section)

5. Run the development server

   npm run dev

The application will be available at http://localhost:3000.

(back to top)

Environment Variables

Create a .env file in the root of the project and define the following variables:

# Cloudflare R2 (S3-compatible storage)
R2_ACCOUNT_ID=""
R2_ACCESS_KEY_ID=""
R2_SECRET_ACCESS_KEY=""
R2_BUCKET_NAME=""
R2_DEV_URL=""

# MODE
# MODE="dev"

# Supabase
SUPABASE_URL=""
SUPABASE_ANON_KEY=""

# Database (Prisma)
DATABASE_URL=""
DIRECT_URL=""
DATABASE_PASS=""

The required variables depend on the features you enable (storage, database, authentication). Make sure to restart the development server after modifying environment variables.

(back to top)

Available Scripts

The following scripts are available via npm run:

• dev – Runs the app in development mode with Turbopack
• build – Builds the application for production
• start – Starts the production server
• lint – Runs ESLint
• prisma:pull – Pulls the database schema
• prisma:generate – Generates Prisma client
• prisma:migrate – Runs database migrations
• prisma:seed – Seeds the database

(back to top)

⚠️ This project is an MVP intended for demonstration and portfolio purposes.
It is not designed to be production-ready without further security, scalability, and performance considerations.

Contact

Mauricio Carrillo linkedin.com/in/enrique-carrillo-romero 📧 enrique.mauricio.carrillo.romero@gmail.com

Project Link: https://github.com/Mauriciocr207/Bookify

(back to top)