This project is a Kindle-like e-reader experience for our client, the Al-Karkari Institute, designed to make the teachings of Shaykh Mohamed Faouzi Al-Karkari available to a global audience of academics and laymen in multiple languages.
The e-reader aims to:
- Provide a beautiful reading experience on desktop, mobile, and tablet devices.
- Offer an all-you-can-read subscription membership model.
- Make the Shaykh's teachings accessible in multiple languages.
- User authentication
- Responsive design for various devices
- Pagination with left and right pages
- Footnote display
- Chapter and section navigation
- Remix
- Convex
- React
- TypeScript
- Tailwind CSS
- Figma
- Python (for pdf parsing, not included)
- Anthropic (for AI JSON Parsing of PDF, base prompt included)
-
Clone the repository
-
Install dependencies:
npm install -
Set up environment variables: Create a
.envfile in the root directory and add:CONVEX_URL=your_convex_url_here -
Run the development server:
npm run dev
To deploy the app:
-
Build for production:
npm run build -
Start the production server:
npm start
app/routes/reader.tsx: Main e-reader componentapp/components/LoginPage.tsx: Authentication componentconvex/: Backend functions and database schema