PaperMote is a web app that allows users to keep track of their paperbook notes and annotations.
The production site is deployed on Vercel, using the main branch of this repo.
If you want to see the presentation slides, please refer to this link that is depoloyed on Github Pages, using the gh-pages branch of this repo. Note: the slides are still under construction.
- Node.js
- npm, pnpm, or yarn
- Git
git clone https://github.com/luoyaqifei/PaperMote.git
cd PaperMoteCopy .env.example to .env and set the correct environment variables.
- For Google Books API, no key is needed.
- For Postgres, you can use Vercel Postgres and pull the secrets from Vercel dashboard, or run one locally using Docker, Dockerfile is not included in this repo, however there is an official reference.
- For cloudinary, create an account and pull the secrets from Cloudinary Dashboard.
- For Auth.js, you don't need anything in local, but if you deploy it to Vercel or other production environment, you need to create an SSH secret using
$ openssl rand -base64 32and copy this intoAUTH_SECRETin.envas instructed in NextAuth Dashboard.
npm install
npm run devAfter the server is running, you need to use Postman or curl to GET the route /seed to populate the tables with data schema.
Paperbooks are a great way to read, but they can be difficult to annotate and take notes on. PaperMote solves this problem by providing a platform for users to easily annotate and take notes on their paperbooks.
PaperMote is designed for avid readers who want to keep track of their paperbook notes and annotations. Whether you're a student, a professional, or just someone who loves to read, PaperMote can help you keep track of your notes and annotations in one place. You can use it on your computer, tablet, or phone.
- User registration and authentication
- Create notes and annotations by book
- Upload a photo of your paperbook
- Add notes and annotations to your paperbook, with their location in the book
- Edit notes and annotations with rich text editing
- Delete notes and annotations
- Download metadata for books online
- Frontend and Backend:
- Next.js and React, for functionalities
- NextUI for UI components, Tailwind CSS and Tailwind Variants for style managements, Heroicons for icons
- Database: Vercel Postgres
- Deployment: Vercel
This tech stack is chosen because of the innate support of React Server Rendering and large community group of Next.js, and the 1-Click deployment to Vercel.
- Google Books API to search for books online
- Image upload API to upload images
- Introduction Page
- Login / Signup
- Book List
- Book Notes
- Profile
Here are the mockups for the main pages of PaperMote:
-
Homepage
+----------------------------------+ | PaperMote Logo | | | | Welcome to PaperMote | | | | [Login] [Sign Up] | | | | Featured Books | | +------+ +------+ +------+ | | | Book | | Book | | Book | | | +------+ +------+ +------+ | | | | How It Works | | 1. Sign Up | | 2. Add Books | | 3. Take Notes | | | +----------------------------------+ -
Login/Signup
+----------------------------------+ | PaperMote Logo | | | | [Login] | [Sign Up] | | | | Username: [____________] | | Password: [____________] | | | | [Submit] | | | | | | | +----------------------------------+ -
Book List
+----------------------------------+ | PaperMote Logo [User Menu] | | | | My Books | | | | [Add New Book] | | | | +------+ +------+ +------+ | | | Book | | Book | | Book | | | | Title| | Title| | Title| | | +------+ +------+ +------+ | | | | +------+ +------+ +------+ | | | Book | | Book | | Book | | | | Title| | Title| | Title| | | +------+ +------+ +------+ | | | +----------------------------------+ -
Book Notes
+----------------------------------+ | PaperMote Logo [User Menu] | | | | Book Title | | Author | | | | [Add Note] | | | | Notes: | | +----------------------------+ | | | Note Title | | | | Content preview... | | | | Page: 42 | | | +----------------------------+ | | | | +----------------------------+ | | | Another Note Title | | | | Content preview... | | | | Page: 78 | | | +----------------------------+ | | | +----------------------------------+ -
Profile
+----------------------------------+ | PaperMote Logo [User Menu] | | | | User Profile | | | | [Avatar] | | Username: ___________ | | Email: ________________ | | | | | | | | Statistics: | | Books: 12 | | Notes: 156 | | Pages Annotated: 789 | | | | [Save Changes] | | | +----------------------------------+
These mockups provide a basic visual representation of the main pages in the PaperMote app. They can be further refined and styled according to the design preferences and additional features as the project progresses.
User
- id
- username
- password
- avatar
Book
- id
- title
- author
- description
- published_date
- page_count
- cover
- created_at
- updated_at
Note
- id
- title
- content
- book_id
- book_location
- created_at
- updated_at
There are no specific endpoints on the server side, because in Next.js App Router mode, it's directory-based routing and it uses server actions which hides details of API calls.
Scope your project as a sprint. Break down the tasks that will need to be completed and map out timeframes for implementation working back from the capstone due date.
-
Day 1-2: Initialize project repository, set up project structure and prepare for background knowledge
- Set up frontend and backend directories
- Initialize Git repository and create initial commit
- Prepare knowledge of tech stack
-
Day 3-5: Implement basic frontend and backend
- Create server
- Set up database connection
- Set up CI/CD pipeline
- Implement basic CRUD operations for Books and Notes
- Implement basic frontend pages along with backend API integration
- Implement user authentication (registration and login)
-
Day 6-7: Set up frontend structure and routing, develop basic functionality
- Develop layout for main pages (Home, Books, Notes)
- Develop user profile management page
- Day 1-3: Add advanced features
- Implement functionality to record and update notes at specific locations within books
- Implement functionality to upload images of paperbooks
- Add responsive design across all devices
- Day 4-5: Testing and Deployment Preparation
- Conduct initial testing of all features
- Fix any critical bugs
- Refine UI/UX based on initial usage
- Prepare for the deployment
- Day 6-7: Polish and Documentation
- Implement additional features
- Add more detailed documentation
- Turn the app into a PWA
- Add skeleton UI to the app for loading status
- Create dashboard for user statistics
- Add animations to the app
- Add book summary feature based on current notes
- Use OCR to extract text and annotationsfrom images of paperbooks
- Allow users to export their notes in a formatted style, such as markdown
- Allow users to share excerpts with others with beautiful formatting
- Allow users to share notes with others with a shortened url
- Automatically resume taking notes for a book from where you left off
- Tag everything in the system: books, notes, users, etc.
- Add a variety of visualizations for books display in user's dashboard
- Use Electron to create a desktop version of the app